h5网站有哪些,珠海建网站,谷歌广告投放,外贸网站功能Vue使用百度地图实现聚合的效果(vue-baidu-map)
安装插件#xff1a;yarn add vue-baidu-map在main.js中全局引入密钥#xff08;在百度开发者中心注册#xff09;#xff1a;import BaiduMap from vue-baidu-map
Vue.use(BaiduMap, {ak: your_app_key // 百度地图秘钥
})…Vue使用百度地图实现聚合的效果(vue-baidu-map)
安装插件yarn add vue-baidu-map在main.js中全局引入密钥在百度开发者中心注册import BaiduMap from vue-baidu-map
Vue.use(BaiduMap, {ak: your_app_key // 百度地图秘钥
})代码实现
templatebaidu-map idallmap :zoommapZoom :centermapCenter classallmap :scroll-wheel-zoomtrue/baidu-map
/template
script typetext/javascriptexport default{data() {return {map: null,mapCenter:{ lng: 121.508483, lat: 31.289045 },mapZoom:13,},}mounted(){this.getList()this.initMap()},methods: {// 初始化地图initMap() {const that this// GL版命名空间为BMapGL 创建Map实例that.map new BMapGL.Map(allmap);// 初始化地图,设置中心点坐标和地图级别that.map.centerAndZoom(new BMapGL.Point(that.mapCenter.lng, that.mapCenter.lat), 5); //开启鼠标滚轮缩放that.map.enableScrollWheelZoom(true); // 设置地图类型为地球模式 that.map.setMapType(BMAP_EARTH_MAP); // 监听地图层级that.map.addEventListener(zoomend, function(e) {var ZoomNum that.map.getZoom();if (ZoomNum 6) {that.getqingdanList(30)} else if (ZoomNum 6 ZoomNum 10) {that.getList(50) // 设置像素聚合的距离阈值为 50 像素} else {that.getList(100) // 设置像素聚合的距离阈值为 50 像素}});},pixelCluster(markers, distance) {// 先清除之前的详细点位信息// if (this.map ! null this.map.getOverlays() ! null this.map.getOverlays().length 0) {// this.map.clearOverlays()// }let clusters []for (let i 0; i markers.length; i) {let cluster [markers[i]]for (let j i 1; j markers.length; j) {const pixel1 this.map.pointToPixel(new BMapGL.Point(markers[i].lng, markers[i].lat))const pixel2 this.map.pointToPixel(new BMapGL.Point(markers[j].lng, markers[j].lat))const pixelDistance Math.sqrt(Math.pow(pixel1.x - pixel2.x, 2) Math.pow(pixel1.y - pixel2.y, 2))if (pixelDistance distance) {cluster.push(markers[j])markers.splice(j, 1)j--}}clusters.push(cluster)}// 创建自定义图标,本地的图片var myIcon new BMapGL.Icon(src/assets/img/biaoqian.png, new BMapGL.Size(23, 25), { anchor: new BMapGL.Size(10, 25), });// 在地图上显示聚合后的数据clusters.forEach(cluster {const center this.getClusterCenter(cluster)// 获取对一个的qingdanIdconst qingdanId this.getClusterQingdanId(cluster)const label new BMapGL.Label(cluster.length, {offset: new BMapGL.Size(15, -30)})//文本标注样式transform为X轴平移即文本居中显示label.setStyle({color: #fff,//backgroundColor: rgba(0, 0, 0, 0.5),backgroundColor: rgba(0, 0, 0, 0.3),borderRadius: 10px,padding: 0 10px,fontSize: 14px,lineHeight: 20px,border :0,transform:translateX(-50%)});const marker new BMapGL.Marker(center, {icon: myIcon})// 这里用于其它方法marker.qingdanId {qingdanId: qingdanId}// 主要用于清除数据根据id清除marker.myId shouyetubiao;marker.setLabel(label)this.map.addOverlay(marker)})},getClusterCenter(cluster) {let totalLng 0let totalLat 0cluster.forEach(marker {totalLng parseFloat(marker.lng)totalLat parseFloat(marker.lat)})const centerLng totalLng / cluster.lengthconst centerLat totalLat / cluster.lengthreturn new BMapGL.Point(centerLng, centerLat)},getClusterQingdanId(cluster) {let qingdanId null;cluster.forEach(marker {qingdanId marker.qingdanId})return qingdanId},getqingdanList(xiangsu) {// 根据名称移除指定覆盖物if (this.map ! null this.map.getOverlays() ! null this.map.getOverlays().length 0) {this.removeOverlayById(shouyetubiao)}this.$http({url: this.$http.adornUrl(/qingdan/list),method: get,}).then(({data}) {if (data.code 0) {this.qingdanList data.qingdanList}})this.pixelCluster(this.qingdanList, xiangsu) },// 根据id删除覆盖物removeOverlayById(id) {var overlays this.map.getOverlays();overlays.forEach(overlay {if(overlay.myId id) {this.map.removeOverlay(overlay)}});},} }
/script
