在线求解答，关于百度地图

Question

百度地图中bm-marker如何遍历渲染到地图，把原本一个点变为接口拿到100组坐标的点？vue

Answer 1

用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 ]
]