文档章节

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

o
 osc_g8254g7s
发布于 2019/08/19 19:29
字数 976
阅读 28
收藏 0

精选30+云产品,助力企业轻松上云!>>>

[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就是你这个项目申请的地图密钥。

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Pycharm文件打开方式

Pycharm修改文件默认打开方式 新下载了一个Pycharm,建了个小demo,期间产生了一个sqlite3文件,由于是第一次打开,就弹出选择打开方式的对话框,手一块直接点了个Text,然后就乱码了: 那我...

osc_fi9eaftu
24分钟前
8
0
微信域名检测中反应速度的重要性

随着微信域名检测的普及,越来越多的人重视这方面有个客户是这样跟我说的,他现在用的那个检测有频率限制 最快只能一秒检测一个, 并发多的时候是不能边跳转边检测的, 只能写到计划任务里面...

mkapi01
25分钟前
18
0
状压dp大总结1 [洛谷]

前言 状态压缩是一种\(dp\)里的暴力,但是非常优秀,状态的转移,方程的转移和定义都是状压\(dp\)的难点,本人在次总结状压dp的几个题型和例题,便于自己以后理解分析状态和定义方式 状态压缩...

osc_s28jz759
26分钟前
17
0
aspnet core 2.1中使用jwt从原理到精通一

目录 原理; 根据原理使用C#语言,生成jwt; 自定义验证jwt; 使用aspnetcore 中自带的类生成jwt; 学有所得 了解jwt原理; 使用C#轻松实现jwt生成和验证 原理 jwt对所有语言都是通用的,只要...

osc_1ls4yaq1
27分钟前
6
0
github上DQN代码的环境搭建,及运行(Human-Level Control through Deep Reinforcement Learning)conda配置

最近师弟在做DQN的实验,由于是强化学习方面的东西,正好和我现在的研究方向一样于是我便帮忙跑了跑实验,于是就有了今天的这个内容。 首先在github上进行搜寻,如下图: 发现第一个星数最多...

osc_252iaxru
28分钟前
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部