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

不念不忘少年蓝@ 2022-01-22 01:03 382阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 1][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 2][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 3][]

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

![20190604175916394.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 4][]

![20190604181111101.png][]

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

mounted(){
            var sContent =
                "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>富平县</h4>" + 
                "<img style='float:right;margin:4px' id='imgDemo' src='http://zliang.top:88/appimage/fupinhis.jpg' width='139' height='104' title='富平县'/>" + 
                "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>富平县隶属于陕西省渭南市，位于陕西省中部，关中平原和陕北高原的过渡地带。因取“富庶太平”之意而得名，是华夏文明重要发祥地之一...</p>" + 
                "</div>";
                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);
                
        },

然后这是显示效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 6][]

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

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

<!DOCTYPE html>  
    <html>
    <head>  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Hello, World</title>  
    <style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #container{height:100%}  
    </style>  
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=b9YID8RFXrOirf5841u5s8G78ndmhWA2">
    //v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
    </script>
    </head>  
     
    <body>  
    <div id="container"></div> 
    <script type="text/javascript"> 
    var map = new BMap.Map("container");
    // 创建地图实例  
    var point = new BMap.Point(116.404, 39.915);
    // 创建点坐标  
    map.centerAndZoom(point, 15);
    // 初始化地图，设置中心点坐标和地图级别  
    </script>  
    </body>  
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 7][]

END

[-js-api]: http://lbsyun.baidu.com/index.php?title=jspopular
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70]: /images/20220122/7f03364809dc4a5b9e6063f3bf9c1b46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 1]: /images/20220122/787957011f934c1b98805ace78e9e77b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 2]: /images/20220122/945ceda4876b430fabf2839e007b0e9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 3]: /images/20220122/84b90ccf0ba440349de413d9b9d0c854.png
[Link 1]: http://lbsyun.baidu.com/index.php?title=jspopular/guide/helloworld
[20190604175916394.png]: /images/20220122/043bd5bb88da4187bf4296914df24834.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 4]: /images/20220122/d33fb39182a241a2b3052a5dfcb5dec1.png
[20190604181111101.png]: /images/20220122/523a5dd05d694900bda1bc232917f144.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 5]: /images/20220122/c9bc54b6072849f5a10f7807c5a7508b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 6]: /images/20220122/4450f1aca31b47fa8605cc144760d17c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 7]: /images/20220122/a94fcba3aee747a9bb846d4c0fc0bc96.png