百度地图 【vue-baidu-map-3x】-支持vue3/vue2 + BmlMarkerClusterer 聚合点
https://map.heifahaizei.com/doc/begin/install.html - npm install vue-baidu-map-3x --save
import { ref } from 'vue';
//https://lbs.baidu.com/apiconsole/custommap
//https://lbs.baidu.com/customv2/editor/26e6ad36dabc2cefc9961cb7a870da9d/chuxing
const mapStyle = ref({
styleJson:[]
});
//钩子函数
onBeforeMount(() => {
})
.content, .bm-view {
width: 100%;
height: 300px;
}
/*
去除百度地图版权
去除右上角[地图、卫星、三维]控件
去除百度地图右上角平移缩放控件的市县区文字
*/
::v-deep .anchorBL,
::v-deep .anchorTR,
::v-deep .BMap_zlHolder {
display: none;
visibility: hidden;
}
运行结果截图
步骤4: BmlMarkerClusterer 聚合点 参考https://blog.csdn.net/wuli_youhouli/article/details/128974050
import {BmlMarkerClusterer} from 'vue-baidu-map'
export default {
data() {
return {
BMap: null,
map: null,
markers:[],
}
},
components: {
BmlMarkerClusterer
},
methods:{
ready({ BMap, map }) {
this.BMap=BMap
this.map=map
this.point = new BMap.Point(113.27, 23.13);
map.centerAndZoom(this.point, 2);
// 添加聚合点
for (var i=0; i<100; i++) {
var point = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21)
this.markers.push({
lat: point.lat,
lng: point.lng
})
}
}
}
}
.bm-view {
width: 300px;
height: 300px;
}
其他版本:npm install vue2-baidu-map
vue2中百度地图 【vue2-baidu-map】
https://map.heifahaizei.com/doc/index.html
npm install vue2-baidu-map --save
代码
import Vue from "vue";
import BaiduMap from 'vue2-baidu-map';
Vue.use(BaiduMap, {
ak: 'oukWFWRKCGktlhX25uFBpEt0nV4xxxxx', //个人手机号私人使用-July_zhengfj oukWFWRKCGktlhX25uFBpEt0nV4xxxxx
type: 'WebGL' // ||API 默认API ('WebGL'使用此模式 BMap=BMapGL)
});
export default {
name: 'sub-map002',
data: () => {
return {
centerLagLat: {lng: 119, lat:29},
};
},
computed: {
},
mounted() {
},
created() {},
};
html,body,.sub-map002 {
margin: 0; padding: 0;
width: 100% ;
height: 100%;
position: relative;
.bm-view {
width: 100%;
height: 100%;
position: relative;
}
}
vue-bmap-gl:百度地图WebGL版本的地图组件封装
vue-bmap-gl@next是一套基于Vue3 和百度GL的地图组件。 该版本对原组件进行升级,主要适配Vue3,同时调整事件绑定形式,调整为使用v-on进行事件绑定。 支持全量导入、按需导入和自动导入vue2请使用0.x版本,对应分支vue2
https://www.npmjs.com/package/vue-bmap-gl
百度地图WebGL模式(Vue3)
https://map.heifahaizei.com/doc/begin/install.html