如何在Vue项目中使用百度地图

前言

最近做项目，项目要求某个网页中嵌入一个地图控件，对这个控件的要求是能动态获取后台数据传来的json数据中的位置信息。

经过一番筛选（尝试了好几种地图），我最后在众多地图中选择了百度地图。

地图选好了 ，那么我们怎么把地图控件放入网页中使用呢？

前置操作

以下是前置操作，一共四步：

• 第一步：下载百度地图包 vue-baidu-map

  npm i vue-baidu-map --save

• 第二步：在对应网页的main.js中引用百度地图

    import BaiduMap from 'vue-baidu-map';
    Vue.use(BaiduMap, {
          /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
          ak: 'YOUR_APP_KEY'
    })

• 第三步：去百度API申请地图密钥（访问应用AK）
  • 上一步添加的代码的注释中为申请地图密钥的网址：点我去申请密钥网址
  • 百度地图需要用户创建应用，然后会给这个应用申请一个密钥（访问应用AK），有了这个AK才能在项目中引用地图。申请密钥的流程图示写在后面了。
• 第四步：填写地图AK
  • 在第二步main.js文件中添加的代码的ak:后面输入你申请好的地图AK。
  • 在你的html页面添加如下代码，ak后面添加你申请好的地图AK。

  <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的AK"></script>

  Vue组件内的操作

  创建一个map.vue组件，以下是在Vue组件中的操作：
• 第一步：在template中创建一个div，我们的地图组件就创建在这个div中。
  • 注意：这个div一定要定宽定高，不然地图组件无法显示。

    <template>
        <div id="map" style="width:200px;height:200px;"></div>
    </template>

• 第二步：使用API功能创建Map实例。代码如下，直接放进mounted就可以，这时我们的地图就可以显示了：

            // 百度地图API功能
            var map = new BMap.Map("map");    // 创建Map实例
            map.centerAndZoom(new BMap.Point(121.551257,38.890002), 11);  // 初始化地图,设置中心点坐标和地图级别
            //添加地图类型控件
            map.addControl(new BMap.MapTypeControl({
                mapTypes:[
                    BMAP_NORMAL_MAP,
                    BMAP_HYBRID_MAP
                ]}));
            map.setCurrentCity("大连");          // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

给地图添加标注

更多详细请见 百度地图API
代码如下，添加的标注样式是
marker.setTitle的作用是添加标签，样式如下：

                    var point = new BMap.Point(location1,location2);         
                    map.centerAndZoom(point, 10);
                    var marker = new BMap.Marker(point);        // 创建标注
                    marker.setTitle("我是标题");
                    map.addOverlay(marker);                     // 将标注添加到地图中
                    // 设置标注动画效果。如果参数为null，则取消动画效果。该方法需要在addOverlay方法后设置
                    marker.setAnimation(Animation);

最后我使用JSON解析后的坐标地址添加完的标注：

去掉百度地图的Logo

百度地图的Logo是使用css样式放上去的，我们可以使用css样式覆盖掉：

        .BMap_cpyCtrl {
            display: none;
        }
        .anchorBL {
            display: none;
        }

申请地图密钥（访问应用AK）

创建应用实例流程图示：
申请密钥页面：（点这个蓝色的创建应用）

填写应用名称：（自己的项目名称）

选择自己的应用类型：（服务端、微信小程序、Android、iOS、浏览器端五选一）
我自己是网页端的项目，就选择网页端了。

选择启用的服务：
选择应用类型之后，下面的启用服务列表会根据你的选择变化，根据你的需求选择启用服务。

填写Referer白名单：
根据输入框下面的提示，输入您的域名。如果不知道怎么填的话，可以直接打一个英文半角星号上去。

创建成功之后就会跳到原来的应用列表页面，列表中的访问应用AK就是你这个项目申请的地图密钥。

转载于:https://www.cnblogs.com/lzb1234/p/11379139.html