加载高德地图大量点的方法有2种方法

时间：2023-03-31 22:21:53 vue.js

1。由一个普通的制作者创建，然后添加到地图中，页面会卡住，甚至卡住，页面会崩溃。..asyncinitMark(){varmap=this.mapthis.removeMarkers()this.map.setZoom(7)this.map.setCenter([108.907295,35.601474])this.infoWindow=newAMap.InfoWindow({offset:newAMap.Pixel(-3,-16)})letinfoWindow=this.infoWindowletlist=this.listletcategory=this.mapDataType？'':this.categoryfor(vari=0;i{data=res.datashowItem=formItem[trueKey]myRow=''+data[shwoTitlekey]+'

'if(showItem&&showItem.length){for(leti=0;i'+showItem[i].label+'：'+val+'

'}elseif(showItem[i].type==='array'){letval=''for(letj=0;j0?'、'+data[showItem[i].name[j]]:data[showItem[i].name[j]]}}myRow+=''+showItem[i].label+'：'+val+'

'}else{让currentVal=data[showItem[i].name]？data[showItem[i].name]:'None'myRow+=''+showItem[i].label+':'+currentVal+'

'}}}lethtml=myRowinfoWindow.setContent(html)infoWindow.open(map,e.target.getPosition())})}})}//marker.emit('click',{target:marker})}}2.通过newAMap.MassMarks实现，页面可以很好的渲染，不卡顿asyncinitMark(){varmap=this.mapthis.resetMap()this.infoWindow=newAMap.InfoWindow({offset:newAMap.Pixel(-3,-16)})letinfoWindow=this.infoWindowletlist=this.listletcategory=this.mapDataType？'':this.categoryletstyle=[]list.forEach((item,ind)=>{letlon=item.lon||item.end_lonletlat=item.lat||item.end_latitem.lnglat=[lon,lat]leticonType=item&&item.index?item.index.split('_data')[0]:''leticon=iconType?this.newIcon2(iconType):this.iconstyle.push(icon)item.style=ind})varmass=newAMap.MassMarks(list,{opacity:1,zIndex:111,cursor:'pointer',style:style})varmarker=newAMap.Marker({内容：'',地图:地图})mass.on('click',function(e){letmyRow=''letshowItem=[]letshwoTitlekey=''letdata=e.data||e.target.w.data||e.target.Ce.datalettrueKey=data&&data.index?data.index.split('_data')[0]:''if(data.index){shwoTitlekey=getKeyByCategory(trueKey).nameKeydetailByIndexAndIdApi({index:data.index,id:data.id}).then(res=复制代码>{data=res.datashowItem=formItem[trueKey]myRow=''+data[shwoTitlekey]+''if(showItem&&showItem.length){for(让我=0;i'+showItem[i].label+'：'+val+''}elseif(showItem[i].type==='array'){letval=''for(letj=0;j0?'、'+data[showItem[i].name[j]]:data[showItem[i].name[j]]}}myRow+=''+showItem[i].label+'：'+val+''}else{让currentVal=data[showItem[i].name]?data[showItem[i].name]:'无'myRow+=''+showItem[i].label+'：'+currentVal+''}}}让html=myRowinfoWindow.setContent(html)infoWindow.open(map,e.data.lnglat)})}})this.mass=massmass.setMap(地图)}3、关于地图重绘普通制作者可以通过以下方式重绘地图：this.map.clearMap()

上一篇：在Vue中实现左侧导航的收起和展开

下一篇：京东科技风格NutUI发布

加载高德地图大量点的方法有2种方法相关文章