百度地图中bm-marker如何遍历渲染到地图,把原本一个点变为接口拿到100组坐标的点?vue
用axios获取到接口的marker坐标点后调用map.addOverlay循环添加就行。有帮助麻烦点个采纳【本回答右上角】,谢谢~~有其他问题可以继续交流~
<div id="app">
<div id="bdMAP" style="height:500px"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-------注意修改百度api的ak为你申请的百度地图ak------>
<script src="//api.map.baidu.com/api?v=2.0&ak=1offaO5cablVaW8XYuwtsrVb"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
mounted() {
var map = new BMap.Map(document.querySelector('#bdMAP'));
axios.get('data.json').then((res) => {
res.data.forEach((item,index) => {
var point = new BMap.Point(item[0], item[1]);
if (index === 0) map.centerAndZoom(point, 20);//第一个marker坐标作为地图中心点
var marker = new BMap.Marker(point, null);
map.addOverlay(marker);
})
})
}
})
</script>
data.json,注意格式,第一个为经度(longitude),第二项为维度(latitude),不是这种格式修改上面js对应的代码
[
[ 110.328466, 25.268812 ],
[ 110.328666, 25.268812 ],
[ 110.328866, 25.268812 ]
]