vue 腾讯地图 -- 海量点文字显示(Label)
不多说直接上代码
首先在 index.html 引用脚本文件
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
把下面代码粘贴到vue页面:
<template>
<div>
<!-- 定义地图显示容器 -->
<div id="allMap"></div>
<div>
</template>
<script>
export default {
data(){
return {
map:{}
}
},
mounted() {
this.createMap();
this.getDatalist()
},
methods: {
createMap(){
this.map = new qq.maps.Map(document.getElementById("allMap"), {
center: new qq.maps.LatLng(24.492304,118.137935),
zoom: 12,
mapStyleId: 'style2',
zoomControl: false,
scaleControl: false,
panControl: false,
mapTypeControl: false,
noClear: true
});
},
getDatalist(){
getData("接口地址").then(res => {
let data = res.data.data;
let css={color:"#666",fontSize:"14px",fontWeight:"normal",border:'1px solid #fdaa03',background:'#FFCC00',borderRadius:'8px'};
for (let i=0;i<data.length;i++){
let content = new qq.maps.Label(data[i].name, new qq.maps.Point(0, -5));
let marker= new qq.maps.Label({
map: this.map,
position:new qq.maps.LatLng(data[i].lat, data[i].lng), //点标记坐标位置
content:data[i].name,
})
marker.setTitle(data[i].name);
marker.setStyle(css);
}
})
}
},
computed: {}
}
</script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步