使用vue和高德地图，仿58地图找房pc端，且解决marker过多卡顿 |
您所在的位置：网站首页 › 58同城的地图找房怎么不见了 › 使用vue和高德地图，仿58地图找房pc端，且解决marker过多卡顿 |
|
使用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{ 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.data resolve(res) }).catch(err=>{ reject(err) }) }) } //获取区的数据 const getCurrentAreaMap=()=>{ return new Promise((resolve,reject)=>{ let params={ enterpriseCode:state.enterpriseCode } getAreaMap(params).then(res=>{ state.areas=res.data resolve(res) }).catch(err=>{ reject(err) }) }) } //获取品牌门店数据 const getCurrentStoreMap=(data)=>{ return new Promise((resolve,reject)=>{ let params={ enterpriseCode:state.enterpriseCode, } if(data)params.baseAreaCode=data else delete params.baseAreaCode getStoreMap(params).then(res=>{ state.shop=res.data resolve(res) }).catch(err=>{ reject(err) }) }) } |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |