vue使用百度地图api（原生js同样适用）

在之前的一个小项目中，用到的显示当地的地图功能，因为之前有了解过百度地图的开放平台，所以选择了百度地图作为的api作为示例，高德地图也类似。此文以百度为例，讲讲如何在vue或者原生js中使用这个强大的api！

• 背景说明，我用的是js的api，不同的类型有不同的api，百度地图开放平台-js-api；
• 第一步，注册，申请密匙，按照步骤去填写相关的资料。

• 然后创建应用（这里面选择使用的场景和功能）

• 完成后，你便有了所谓的 AK （这是你能请求到数据的关键）

没有以外的话，你会看到这些，红框的内容为 AK

• 到此为止，准备工作完成了，下面是在vue里面使用此api

百度的开发文档说的也很好，好评！（大家如果有耐心好好研究下，真的收获很多）

• 然后在你需要的地方调用。

在生命周期函数中设置你的地图组件（具体的一些功能请参考百度的官方文档）

mounted(){
        var sContent =
            "
富平县
" + 
            "" + 
            "
富平县隶属于陕西省渭南市，位于陕西省中部，关中平原和陕北高原的过渡地带。因取“富庶太平”之意而得名，是华夏文明重要发祥地之一...
" + 
            "

"; var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(109.181265,34.756785);//当地百度地图坐标，可以在工具里面查找 // 创建点坐标 map.centerAndZoom(point, 12); map.addControl(new BMap.GeolocationControl()); map.addControl(new BMap.NavigationControl()); // map.addControl(new BMap.CopyrightControl()); // map.addControl(new BMap.GeolocationControl()); map.enableScrollWheelZoom(true); var marker = new BMap.Marker(point); var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象 map.centerAndZoom(point, 12); map.addOverlay(marker); marker.addEventListener("click", function(){ this.openInfoWindow(infoWindow); //图片加载完毕重绘infowindow document.getElementById('imgDemo').onload = function (){ infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏 } }); // console.log(1); },

然后这是显示效果

 

• 可能说的比较笼统，但没想到内容如此之多，各种点超过了我的想象，总之还是要多看看官方文档，收获才能更多！

原生js好像比较简洁一点：

END