H5 中的高德地图开发

  最近写了个浙大校庆的活动页 https://123.zju.edu.cn，里面涉及到了一些高德地图的开发，记录一下。

¶一、注册开发账号

  公司项目一定要使用企业开发者，各类服务的调用配额会有很多差别。个人兴趣项目可以使用个人开发者账号。

¶二、https

  目前已经有很多浏览器禁止 http 站点使用定位，所以建议使用 https，同时使用 https 也是保障网站安全的一种手段。

¶三、Web 端 和 Web 服务

  Web 端是给 h5 页面使用的，Web 服务一般是给后端同学调用接口如：逆地理编码、搜索 POI 等。

¶四、加载地图 js 文件

  可以参考 动态加载 js 文件 的写法，在 js 文件加载完毕后初始化地图。

// 地图 js 动态加载
function loadMap (callback) {
  let head = document.getElementsByTagName('head')[0]
  let script = document.createElement('script')
  script.charset = 'utf-8'
  script.type = 'text/javascript'
  script.src = amapUrl

  if (typeof callback == 'function') {
    script.onload = script.onreadystatechange = function () {
      if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {   // 动态 script 加载完毕
        callback()
        script.onload = script.onreadystatechange = null
      }
    }
  }
  head.appendChild(script)
}

// mapStyle 是自定义地图
let mapConfig = {
  mapStyle: 'amap://styles/a22f2eb96ee3725363b7bc7b0f162599',
  zoom: 4,
  zooms: [3, 6],
  features: ['bg', 'road'],     // 'bg'（地图背景，必需）、'point'（POI点）、'road'（道路）、'building'（建筑物）
  center: ['104.964785', '34.049395'], // 中国中心
  viewMode: '3D',      // 2D, 3D
  pitch: 30            // 仰角
}
// 初始化地图
loadMap(() => {
  this.map = new AMap.Map('map', mapConfig)
  this.map.on('complete', () => {    // 地图加载成功
    // 海量点
    this.loadMassMarks(this.map).then(count => {
      this.count = count
    })
  })
})

PointSimplifier（海量点展示）

// 海量点
async loadMassMarks (map) {
  let style = { // 设置样式对象
    url: require('../assets/images/map/1.png'),  // 图标地址
    size: new AMap.Size(4, 4),      // 图标大小
    anchor: new AMap.Pixel(2, 2)    // 图标显示位置偏移量，基准点为图标左上角
  }
  let massMarks = new AMap.MassMarks([], {
    zIndex: 5,  // 海量点图层叠加的顺序
    alwaysRender: false,  // 表示是否在拖拽缩放过程中实时重绘，默认true，建议超过10000的时候设置false
    style
  })

  // 绘制海量点
  let res = await this.api.getLngLatAll()
  if (res.data.IP 城市定位data.url) {
    this.api.getDataByUrl(res.data.data.url).then(res => {
      massMarks.setData(res.data)
    })
  } else {
    massMarks.setData(res.data.data.addr)
  }
  massMarks.setMap(map)
  return res.data.data.count || 1
}

¶五、定位

¶1、精确定位

  AMap.Geolocation, getCurrentPosition

¶2、IP 城市定位

  AMap.CitySearch, getLocalCity

¶3、H5 自带的定位

  navigator.geolocation.getCurrentPosition