vue引入高德地图(原生)

作者: bkbtp 分类: 前端 发布时间: 2018-05-06 10:09

引入高德

  1. index.html中引入相关js
<script src="http://webapi.amap.com/maps?v=1.4.6&key=***********"></script>
<script src="http://webapi.amap.com/ui/1.0/main.js"></script>
  1. webpack.base.config.js中导入模块
    在module.exports中添加代码
externals: {
  'AMap': 'AMap',
  'AMapUI': 'AMapUI'
}
  1. 页面引用
<div id="map-container">
</div>
import AMap from 'AMap'
// import AMapUI from 'AMapUI' 视情况引入

高德使用demo

根据后台返回数据给地图添加markers,开关热力图,根据搜索结果自定义标注,给标注添加自定义事件等。

首先初始化地图,可参考官网demo自行配置,在mounted()中调用即可。

initMap() {
  this.map = new AMap.Map('map-container', {
    resizeEnable: true,
    zoom: 14,
    center: [114.475708, 22.596137],
    // center: [116.418261, 39.921984]
    // cityName: '深圳',
    layers: [new AMap.TileLayer(), new AMap.TileLayer.Traffic()]
  })
  this.map.setMapStyle('amap://styles/blue')
  this.map.plugin(['AMap.Heatmap'], () => {
    // 初始化heatmap对象
    this.heatmap = new AMap.Heatmap(this.map, {
      radius: 20, // 给定半径
      opacity: [0, 0.8]
    })
    // 设置数据集
    this.heatmap.setDataSet({
      data: this.heatmapData,
      max: 100
    })
    this.heatmap.hide()
  })
  this.getAllPoint()
}
getAllPoint() {
  CockpitService.getAllPoint().then(data => {
    // AMapUI.loadUI(['overlay/SimpleMarker'], SimpleMarker => {
    //   for (var item in data) {
    //     new SimpleMarker({
    //       // 前景文字
    //       iconLabel: Number(item) + 1,
    //       // 图标主题
    //       iconTheme: 'default',
    //       // 背景图标样式
    //       iconStyle: 'red',
    //       // ...其他Marker选项...,不包括content
    //       map: this.map,
    //       position: [Number(data[item].lat), Number(data[item].lng)]
    //     })
    //   }
    // })
    for (let item in data) {
      this.marker = new AMap.Marker({
        position: [Number(data[item].lat), Number(data[item].lng)],
        icon: data[item].crossing ? '/static/img/icon_mark3.png' : '/static/img/icon_mark2.png',
        map: this.map
      })
      this.markers.push(this.marker) // 清空marker的关键
      // this.marker.on('click', this.markerClick(data[item])) // 自动执行
      // this.AMap.event.addListener(this.marker, 'click', this.markerClick(data[item])) // 自动执行
      AMap.event.addListener(this.marker, 'click', e => {
        this.markerClick(data[item])
      }) // 解决自动执行
    }
    this.map.setCenter([114.475708, 22.596137])
    // this.map.setCenter([Number(data[35].lat), Number(data[35].lng)])
  })
}
this.map.remove(this.markers) // 清空地图上所有marker,也可根据索引清空指定marker
this.heatmap.show() // 热力图开启

后记

热力图数据格式(经纬度权重)

export default[
  {
    'lng': 115.198254,
    'lat': 23.241155,
    'count': 66
  },
  {
    'lng': 114.561254,
    'lat': 22.553155,
    'count': 99
  },
  {
    'lng': 115.378254,
    'lat': 22.568155,
    'count': 98
  }
]

地图必须在mounted()初始化。

清空marker,需要先push后remove。

事件放入箭头函数中,可解决点击事件自动执行bug。

js的for…in语法 和 vue列表渲染语法 v-for…in 中 item 的指代不同,不可混淆。

v-for…in和for…of更接近。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。