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

2019/08/19 19:29
阅读数 168

[TOC]

前言

最近做项目,项目要求某个网页中嵌入一个地图控件,对这个控件的要求是能动态获取后台数据传来的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就是你这个项目申请的地图密钥。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部