vue2使用高德地图添加marker点及marker点的鼠标事件，地图浮窗展示

vue2使用高德地图添加marker点及marker点的鼠标事件，地图浮窗展示

1.添加地图

这里使用的是JSAPI key搭配静态安全密钥以明文设置
在index.html文件种引入高度地图

在要显示地图的vue文件中添加设置 JSAPI 安全密钥的脚本标签，并将填写您的安全密钥

window._AMapSecurityConfig = {
  securityJsCode: '您的安全密钥'
}

地图容器设置宽高，初始化地图, 设置完毕地图即可加载完成

// 初始化地图
	data () {
		return {
			map: null,
			marker: null,
		}
	},
	mounted () { this.initMap()},
	methods: {
		initMap () {
	      console.log('初始化地图')
	      this.map = new window.AMap.Map('map', {
	        resizeEnable: true, // 是否监控地图容器尺寸变化
	        center: [120.132547,33.456318], // 地图中心点，按照自己要求设置即可
	        zoom: 10// 地图缩放级别
	      })
	    },
	}
    

2.通过接口获取数据动态添加marker点

先通过接口获取数据回调，拿到数据后进行marker点创建

API.getData(sendData).then(res => {
		let resData = res.data.data // 获取数据
        // 先清除以往marker点位
	      if (this.marker) {
	        this.marker.forEach(item => {
	          item.setMap(null)
	        })
	      }
	      resData.forEach(item => {
	      // 创建marker点
	      	let marker = new window.AMap.Marker({
              position: [item.longitude, item.latitude],
              zIndex: 101,
              icon: path, // 这里可以显示自定义的图片，但是图片路径只能用base64否则不展示，可以通require引入
              content: `<div class='vehicleNumBox'>
                <div class='vehicleNum'>点位名称</div>
                <img src="${path}"> 
              </div>`,
              map: this.map
            })
            // marker点注入到地图
            marker.setMap(_this.map)
            // 添加marker点鼠标事件
            // 鼠标移动到marker点位触发
            marker.on('mouseover', function (e) {
            // 显示这个marker点详细信息的浮窗，这个要放单独方法调用才能显示，暂时不明白为什么，直接把方法内的东西写在下面浮窗并不显示
              this.showInfoWindow(item, e) 
            })
            // 鼠标移出marker点位触发
            marker.on('mouseout', function (e) {
              this.map.clearInfoWindow() // 关闭详细信息的浮窗，地图方法
            })
            // 鼠标点击marker触发
             marker.on('click', function (e) {
              this.openCar(item) // 
            })
            // 将所有marker点暂存到本地，可以供后续显示隐藏marker使用，不用每次都创建
             this.marker.push(marker)
	      })
      })

3.添加marker点上的浮窗

// 绘制弹窗
    showInfoWindow (data, e) {
      let infoWindow
      let info = []
      // 组成一个要显示的dom，class可以增加对应的css，不过要加scoped可能不起作用，加scoped的话，less或者sass 可以用deep
      info.push('<ul class="input-card content-window-card">')
      info.push(`<li> 信息1：${data.info1}</li>`)
      info.push(`<li>信息2：${data.info2}</li>`)
      info.push(`<li>信息3：${data.info3}</li>`)
      info.push(`<li>信息4：${data.info4}</li>`)
      info.push('</ul>')
      // 创建浮窗
      infoWindow = new window.AMap.InfoWindow({
        isCustom: true,
        offset: new window.AMap.Pixel(26, -5), // 偏移量
        content: info.join('') // 使用默认信息窗体框样式，显示信息内容
      })
      infoWindow.open(this.map, e.lnglat) // 打开弹窗
    },