zuley / vue-gaode

在Vue中完美的使用高德地图

在Vue中完美的使用高德地图

最近项目中有使用到高德地图，搜了下发现饿了么的 vue-amap 比较知名。不过实际安装使用中发现还是有很多问题的，并不友好。不但要学习 amap 的文档，也还要学习原生高德API文档，还不如直接使用原生来的方便。

而这篇教程的目的就是，怎么在vue中使用高德地图API

文档：Demo和使用文档

运行项目

# 安装依赖
npm install
# 运行项目
npm run serve

实现思路

• 创建一个 mapDrag 的公共组件
• 在组件的 created 生命周期，载入高德地图API
• API载入完成即开始执行地图初始化
• 地图API暴露全局变量 window.AMap 可以直接使用
• 监听地图拖放事件，获得数据后通知自定义事件，对组件外部提供事件接口

created 生命周期载入高德地图API

载入的方式类似于 jquery 的脚本加载，我这里也是使用了别人封装好的一个加载方法，各位直接使用或者自己改

async created () {
  // 已载入高德地图API，则直接初始化地图
  if (window.AMap && window.AMapUI) {
    this.initMap()
  // 未载入高德地图API，则先载入API再初始化
  } else {
    await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`)
    await remoteLoad('http://webapi.amap.com/ui/1.0/main.js')
    this.initMap()
  }
}

初始化地图

在 methods 中创建一个 initMap 的方法供载入地图API之后调用。这里就可以使用任意高德API

initMap () {
  // 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
  let AMapUI = this.AMapUI = window.AMapUI
  let AMap = this.AMap = window.AMap
  AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
    let mapConfig = {
      zoom: 16,
      cityName: MapCityName
    }
    if (this.lat && this.lng) {
      mapConfig.center = [this.lng, this.lat]
    }
    let map = new AMap.Map('js-container', mapConfig)
    // 加载地图搜索插件
    AMap.service('AMap.PlaceSearch', () => {
      this.placeSearch = new AMap.PlaceSearch({
        pageSize: 5,
        pageIndex: 1,
        citylimit: true,
        city: MapCityName,
        map: map,
        panel: 'js-result'
      })
    })
    // 启用工具条
    AMap.plugin(['AMap.ToolBar'], function () {
      map.addControl(new AMap.ToolBar({
        position: 'RB'
      }))
    })
    // 创建地图拖拽
    let positionPicker = new PositionPicker({
      mode: 'dragMap', // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
      map: map // 依赖地图对象
    })
    // 拖拽完成发送自定义 drag 事件
    positionPicker.on('success', positionResult => {
      // 过滤掉初始化地图后的第一次默认拖放
      if (!this.dragStatus) {
        this.dragStatus = true
      } else {
        this.$emit('drag', positionResult)
      }
    })
    // 启动拖放
    positionPicker.start()
  })
}

调用

<mapDrag @drag="dragMap" lat="22.574405" lng="114.095388"></mapDrag>

vue-gaode's Issues

刷新页面有时报错，地图无法加载

Uncaught Error: 请前置引入高德地图api，参见http://lbs.amap.com/api/javascript-api/gettingstarted/
Unhandled promise rejection TypeError: Cannot read property 'loadUI' of undefined(…)

多个Marker怎么区分？怎么给Marker添加点击事件？

不稳定有点，有时搜索框和定位logo显示不出来，报 PositionPicker is not a constructor 错误

请问高德地图怎么显示国外

初始化时loadUi会加载失败

文档怎么挂了，老哥

文档链接404了

chrome开发时在移动设备和桌面之前切换, 首次加载失败

复现步骤:
1.开启服务, 开启chrome, 开启控制台, 控制台切换到移动设备, 访问
2.控制台切换到PC, 首次刷新

控制台警告:
⚠Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

Uncaught TypeError: Cannot read property 'mobile' of undefined
at main.js:269
at main.js:801

搜索栏-----搜索出现问题

搜索栏-----搜索出现问题

定位组件

加入定位组件以后，该如何监听呢，用官方的监听没有返回.

AMap.plugin(['AMap.Geolocation'], function () {
map.addControl(new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
maximumAge: 0, //定位结果缓存0毫秒，默认：0
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, //显示定位按钮，默认：true
buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
}));
// mapObj.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});

vue使用高德地图设置点标记，如何删除点标记

vue使用高德地图设置点标记，如何实现删除覆盖物？求大神提供思路或者方法

弹窗嵌入这个组件的时候，提示正在加载