vue 高德地图AMap.MassMarks添加海量点标记、AMap.InfoWindow创建自定义信息窗体

高德地图添加海量点标记和创建自定义信息窗体的封装

假设已经正确引入了高德地图。那后面就直接看代码

<template>
	<div class="amap" id="amap"></div>
</template>
<script>
import mapFile from '../../../assets/images/map-filling.png'
import mapInfoWindow from "./info-window/info-window";
import reqMapList from '../../../api'
export default{
	data(){
		return {
			center:[12.32652,20.99399]
		}
	},
	mounted(){
		//由于高德地图加载会有延迟,因此需要判断高德地图是否已经加载,若没有加载,则延迟500毫秒加载。
		         this.$nextTick(()=>{
                    if(!window.Amap){
                        setTimeout(()=>{
                            this.loadMap()
                            this.initInfoWindow()
                        },500)
                        return
                    }else{
                        this.loadMap()
                    }
                    this.initInfoWindow()
                })
	},
	methods:{
	       initInfoWindow(){
                // //添加供应商点击事件和关闭点击事件
                window.closeInfoWindow=this.closeInfoWindow
                // //将信息窗体的样式添加到页面
                this.$nextTick(()=>{
                    let mapInfoWindowBox=this.$refs.mapInfoWindowBox
                    let mapInfoWindowStyle=mapInfoWindowBox.querySelector('#mapInfoWindowStyle')
                    if(!mapInfoWindowStyle){
                        let style=document.createElement('style')
                        style.setAttribute('id','mapInfoWindowStyle')
                        style.innerHTML=mapInfoWindow.style
                        mapInfoWindowBox.appendChild(style)
                    }

                })
            },
      async loadMap() { // 加载地图 需要在挂载后
	      let map = new AMap.Map('amap', {
	        center: this.center,
	        zoom: 16,
	      })
	      let {geoJsonData,mapAllList}=await reqMapList()
	      // //默认加载项目的经纬度图标
	      this.addMark(map,{geoJsonData,mapAllList})
	      // //创建信息窗体
	      this.createInfoWindow()
	      map.on('click',(event)=>{
	        // console.log(event)
	      })
	      this.map=map
    },
	 //添加标记
            addMark({geoJsonData,mapAllList}){
                let style=mapAllList.reduce((prev,current)=>{
                    let {province,city,strictName}=current
                    prev.push({
                        url:mapFile,  // 图标地址
                        size: new AMap.Size(30,30),      // 图标大小
                        anchor: new AMap.Pixel(15,25), // 图标显示位置偏移量,基准点为图标左上角
                        title:province+city+strictName
                    })
                    return prev
                },[])
                let massMarks = new AMap.MassMarks(null,{
                    zIndex: 50000,  // 海量点图层叠加的顺序
                    zooms: [3, 19],  // 在指定地图缩放级别范围内展示海量点图层
                    style  // 设置样式对象
                })
                console.log(geoJsonData)
                massMarks.setData(geoJsonData)
                // 将海量点添加至地图实例
                massMarks.setMap(map)
                massMarks.on('click',e=>{
					  this.infoWindow.setContent(mapInfoWindow.template(markEvent.data))
                	 this.infoWindow.open(map,markEvent.data.lnglat)
				})
            },
              //创建信息窗体
            createInfoWindow(){
                this.infoWindow=new AMap.InfoWindow({
                    content:'',  //传入 dom 对象,或者 html 字符串
                    isCustom: true,  //使用自定义窗体
                    autoMove:true,
                    anchor:'bottom-right',
                    offset:new AMap.Pixel(-20,-20),
                })
            },
              //关闭信息窗体
	    closeInfoWindow(){
	      this.infoWindow.close()
	    },
}
</script>

这里说下geoJsonData的数据格式,数据结构如下:

[
	{
          lnglat:[lon,lat],
          style:index,
        }
]

这是基本的数据结构,至于是否需要其他数据,可以视情况自己添加。创建海量点标记可以单独给每个点标记创建样式,style用来指定使用使用哪一个点标记,因此值index就是数组下标。lnglat是经纬度数组。

然后看下对Infowindow的封装。

export default {
  template:(data)=>{
    let {lnglat,name,fullAddress,area,amount,phone,type}=data
    return `
${name}
${area} ㎡
${amount} 万元
${type || ''}
${phone}
${fullAddress}
` }, style:` .infoWindowBox{ background: rgba(255, 255, 255, 0.9); box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, 0.35); border-radius: 4px; padding:40px 40px 30px 40px; position: relative; box-sizing: border-box; } .itemBox{ margin-bottom: 10px; align-items:flex-start; } .childItemBox{ flex:1; align-items:stretch; } .mapWidowIcon{ font-size: 16px; margin-right: 10px; } .itemText{ font-size: 14px; } .infoWindowBox #infoWindowClose{ position: absolute; right:10px; top:10px; font-size: 28px; cursor:pointer; color:#666666; } ` }

其实就是吧传入infowindow的content属性html抽成js组件而已,只是为了方便复用。

你可能感兴趣的:(js,vue,vue,javascript)