使用vue和高德地图，仿58地图找房pc端，且解决marker过多卡顿

1.在index.html引入高德地图链接
https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch,AMap.InfoWindow

2.https://webapi.amap.com/demos/js/liteToolbar.js 工具栏

3.本来用vue3.0，写的，改成了html，可根据自己需求修改
源码地址 下载

最开始的思路：最开始是想用高德地图点聚合来写（官网点聚合），但是点聚合聚合区域计算方式不适用省市区，或者是行政区划聚合（官网行政区划聚合），奈何小弟能力有限，很多事件都想控制，但是找不到。。。

最后思路：后来想到，可以搞个假的聚合，像聚合就行啊。

在地图当前zoom层级小于8的时候，显示省级的marker标记点。
地图 8<=zoom<=10 的时候，清空地图上的marker标记，显示市级的标记点
地图 10<zoom<14 的时候，清空地图上的marker标记，显示区级的标记点
地图 zoom>=14 的时候，清空地图上的marker标记，显示门店的标记点
当门店数据过多，一次性加载在地图上，肯定会卡顿很长时间，那我们就利用地区的可视区域AMap.GeometryUtil.isPointInRing()方法，如果门店经纬度在可视区域，才在地图上加载marker.

先上效果图

省级效果图
市级效果图

区级效果图

门店效果图

好了现在根据思路来一步步实现

首先先实现清除地图上的所有marker方法和判断经纬度是否在可视区域的方法

    //清除marker标记function clearMarker() {map.clearMap()}/**规划处地图的可视范围，且判断经纬度是否在当前可视区域* @param {string} center* @returns {Boolean}*/function logMapBounds(center) {  center是经纬度字符串，用","拼接var point= center.split(',')var bounds = map.getBounds();  const NorthEast = bounds.getNorthEast();const SouthWest = bounds.getSouthWest();const SouthEast = [NorthEast.lng, SouthWest.lat];const NorthWest = [SouthWest.lng, NorthEast.lat];const path = [[NorthEast.lng, NorthEast.lat], SouthEast, [SouthWest.lng, SouthWest.lat], NorthWest]return AMap.GeometryUtil.isPointInRing(point,path); }

2.点击省市区marker转到相应层级和显示对应marker

//点击省,到市级，点击市到区级，点击区到门店function showInfoM (e){let level=map.getZoom()let zooms,centers;if(level<8){zooms=8}else if(level>=8&&level<11){zooms=11}else if(level>=11&&level<15){zooms=15}centers=[e.target.Ce.position.lng,e.target.Ce.position.lat]map.setCenter(centers)map.setZoom(zooms)}

3.由于省市区的marker一样，所以创建省市区的marker
creatMarker(data) 里面的data是请求后台接口返回的数据

数据格式      data:[{baseAreaCenter: "116.405285,39.904989",baseAreaCode: "11",baseAreaName: "北京市", //省codecount: 5}]

//添加省级或市级或区级markerfunction creatMarker(data){  //data数据格式见上面代码块clearMarker()for(let i=0;i<data.length;i++){var div=`<div class="circle" center=${data[i].baseAreaCenter}><div><div>${data[i].baseAreaName} </div><div>${data[i].count}</div></div></div>`if(logMapBounds(data[i].baseAreaCenter)){markers = new AMap.Marker({content:div,areaCode:data[i].baseAreaCode,position:data[i].baseAreaCenter.split(","),offset: new AMap.Pixel(-24, 5),zIndex: data[i].count,map:map});markers.on('click', showInfoM);  //省市区marker点击事件  见代码快2的showInfoM方法}}}

4.增加门店的marker

//创建门店markerfunction creatShopMarker(data){clearMarker()for (var i = 0; i < data.length; i++) {if(logMapBounds(data[i].baseAreaCenter)){var marker = new AMap.Marker({position: data[i].baseAreaCenter.split(','),icon: require('@/assets/marker.svg'),size:[32,43],imageSize: new AMap.Size(32,43),map: map});marker.content =`<div><span style="color:#31C0FD">${data[i].brandName}</span> ${data[i].storesAreaName}</div>`;marker.on('click', markerClick);}}}//点击门店marker时触发的事件function markerClick(e){infoWindow.setContent(e.target.content);infoWindow.open(map, e.target.getPosition());}

5.当地图缩放和左右平移的时候都要重新渲染地图上的marker

const init = () => {//初始化地图容器marker, map = new AMap.Map("container", {resizeEnable: true,zoom: 5,zooms: [5, 18],center: [106.49, 34.6],});AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.ControlBar'],function(){ //创建放大缩小控件map.addControl(new AMap.ToolBar({position:'RB', //定位在地图右下角locate:false, //不显示定位按钮ruler:true,//显示定位按钮标尺direction:false, //不显示移动按钮offset:new AMap.Pixel(59,24)}));//比例尺控件map.addControl(new AMap.Scale());// 添加 3D 罗盘控制map.addControl(new AMap.ControlBar({showZoomBar:false,//不显示缩放按钮  showControlButton:false //不显示显示倾斜、旋转按钮}));})//创建信息窗体infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});//map绑定滚动结束事件  map.on('zoomend', mapZoomend);//map拖拽结束事件map.on('moveend', mapMoveEnd);//首次加载省的markercreatMarker(state.provinces)};

6.地图缩放对应事件和地图平移缩放事件

  //地图层级放大缩小的事件function mapZoomend(){let level=map.getZoom()state.level=levelif(level<8){getCurrentProMap().then(res=>{if(res.code==200){clearMarker()creatMarker(state.provinces)}})}else if(level>=8&&level<=10){getCurrentCityMap().then(res=>{if(res.code==200){clearMarker()creatMarker(state.citys)}})}else if(level>10&&level<14){getCurrentAreaMap().then(res=>{if(res.code==200){clearMarker()creatMarker(state.areas)}})}else if(level>=14){getCurrentStoreMap().then(res=>{if(res.code==200){clearMarker()creatShopMarker(state.shop)}})}}//地图拖动结束时的事件function mapMoveEnd(){let level=map.getZoom()state.level=levelclearMarker()if(level<8){creatMarker(state.provinces)}else if(level>=8&&level<=10){creatMarker(state.citys)}else if(level>10&&level<14){creatMarker(state.areas)}else if(level>=14){creatShopMarker(state.shop)}}

7.接下来是请求省市区门店四个接口，可根据自己的公司需求修改

//获取省的数据const getCurrentProMap=()=>{return new Promise((resolve,reject)=>{let params={enterpriseCode:state.enterpriseCode}getProvinceMap(params).then(res=>{if(res.code==200){state.provinces=res.data}resolve(res)}).catch(err=>{reject(err)})})}//获取市的数据const getCurrentCityMap=()=>{return new Promise((resolve,reject)=>{let params={enterpriseCode:state.enterpriseCode}getCityMap(params).then(res=>{state.citys=res.dataresolve(res)}).catch(err=>{reject(err)})})}//获取区的数据const getCurrentAreaMap=()=>{return new Promise((resolve,reject)=>{let params={enterpriseCode:state.enterpriseCode}getAreaMap(params).then(res=>{state.areas=res.dataresolve(res)}).catch(err=>{reject(err)})})}//获取品牌门店数据const getCurrentStoreMap=(data)=>{return new Promise((resolve,reject)=>{let params={enterpriseCode:state.enterpriseCode,}if(data)params.baseAreaCode=dataelse delete params.baseAreaCodegetStoreMap(params).then(res=>{state.shop=res.dataresolve(res)}).catch(err=>{reject(err)})})}

使用vue和高德地图，仿58地图找房pc端，且解决marker过多卡顿相关推荐

基于Vue.js制作的仿车轮驾考通APP端页面
背景:学习完Vue,老师要求期末作业以Vue技术做一个手机端或者PC端的前端小项目.期末临近,周围的同学有的仿微信APP端,有的仿QQAPP端.小萍去年考科目一用了车轮驾考通刷题,然后她最后决定基于V ...
用Vue高仿qq音乐官网-pc端
用Vue高仿qq音乐官网-pc端一直想做一个vue项目然后呢我就做了http://www.tuicool.com/articles/eymeiiN 效果预览部分地方不全部根据原版,也有自由发挥 ...
android 仿百度地图,仿百度地图街景实现
使用过百度地图的同学知道,它有个街景功能,可以看到许多地方的实景.这里就其街景内容的实现,进行下学习. 在百度地图SDK的官网上可以看到,百度对开发者提供了很多相关的内容,方便我们进行学习.关于SDK ...
百度空间互踩_贝壳联手百度地图整合新房信息找房更便捷
来源:环球网近日,贝壳找房与百度地图达成战略合作,推出基于百度地图丰富房产社区POI点的房产信息服务内容.消费者只要进入到最新版的百度地图之后,输入想要查询的楼盘名称,即可查看贝壳App所提供的新房 ...
百度地图-图标过多卡顿解决方案
点聚合 <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=xxxx& ...
vue+element高度仿照QQ音乐，完美实现PC端QQ音乐
一.前言 QQ音乐官网:点击访问作者成品效果预览:点击访问作者其他博客成品汇总预览:点击访问暂时源码并没有提供其他获取渠道,私聊作者获取即可,或通过博客后面名片添加作者,很简单! 二.主要功能点 ...
vue websocket 公众号扫描二维码登录PC端
首先使用的是websocket进行消息的传递,当我们在pc端请求到二维码图片后,打开微信扫一扫,扫描二维码后,就可以在websocket里接收到扫描消息,然后进行自己的业务逻辑处理,具体代码如下: w ...
高德地图marker标点数据量太大造成卡顿的解决方案
marker标点卡顿问题问题说明应用高德地图使用marker标点时,由于数据量大(>1000)就会造成页面卡顿,好几秒才能加载完成,并且页面也会卡顿解决方案使用官方提供的海量点MassM ...
html地图缩放比例,百度地图之添加控件——比例尺、缩略图、平移缩放
地图控件概述百度地图上负责与地图交互的UI元素称为控件.百度地图API中提供了丰富的控件,您还能够经过Control类来实现自定义控件.javascript 地图API中提供的控件有:css Con ...

使用vue和高德地图，仿58地图找房pc端，且解决marker过多卡顿

使用vue和高德地图，仿58地图找房pc端，且解决marker过多卡顿

使用vue和高德地图，仿58地图找房pc端，且解决marker过多卡顿相关推荐

最新文章

热门文章