简述vue下高德地图的一些简单功能的使用（定位，添加marker）

中秋节刚过，马上迎来的就是国庆节，讲道理，我是真的有点浮躁了。

算了，说一下最近在项目中用到的简单的高德地图的一些功能。

● 定位（Geolocation）点标记（Marker） //////  vue中使用高德地图，要注意是vue中使用的

　　简单粗暴，直接上代码

　　

　　import AMap from 'AMap'

　　this.map = new AMap.Map('#container', {

　　　　center: [] , // 初始化地图时显示的中心点坐标

　　　　zoom： 11 , // 初始化地图时显示的地图放大等级

　　　　resizeEnable： true // 调整任意窗口的大小，自适应窗口

　　})

　　AMap.plugin('AMap.Geolocation', function () {

　　　　var geolocation = new AMap.Geolocation({

　　　　　　// 是否使用高精度定位，默认：true

　　　　　　enableHighAccuracy: true,

　　　　　　// 设置定位超时时间，默认：无穷大

　　　　　　timeout: 10000,

　　　　　　// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)

　　　　　　buttonOffset: new AMap.Pixel(10, 20),

　　　　　　// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false

　　　　　　 zoomToAccuracy: true,

　　　　　　// 定位按钮的排放位置, RB表示右下

　　　　　　buttonPosition: 'RB'

　　　　　　})

　　　　　　geolocation.getCurrentPosition()

　　　　　　AMap.event.addListener(geolocation, 'complete', (e) => {

　　　　　　　　console.log(e) // 定位成功之后做的事

　　　　　　　　// 定位成功之后再定位处添加一个marker

　　　　　　　　var marker = new AMap.Marker({

　　　　　　　　　　position: e.position, // （e.position）--->定位点的点坐标, position ---> marker的定位点坐标，也就是marker最终显示在那个点上，

　　　　　　　　　　icon： '', // marker的图标，可以自定义，不写默认使用高德自带的

　　　　　　　　　　map： this.map,  // map ---> 要显示该marker的地图对象

　　　　　　　　})

　　　　　　})

　　　　　　AMap.event.addListener(geolocation, 'error', (e) => {

　　　　　　　　console.log(e) // 定位失败做的事

　　　　　　})

　　})

 

ok，已经 给木偶蜗 了。接下来会说一些常用的数据展示类功能， 例如点聚集，通过点击点聚集中的某一个点，显示对应点的信息窗体。等等，期待大家的关注，谢谢