写点什么

vue+element 中引入百度地图

用户头像
尔嵘
关注
发布于: 2021 年 03 月 30 日

1.首先你需要下载 npm 模块,个人推荐:cnpm install vue-baidu-map –save 这样你的 package.json 文件就有了配置信息;

2.然后在 index.html 文件中直接引用:

 <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=密钥"></script>
复制代码


ak 密匙申请:送你直达

例如:

<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=自己申请的密钥"></script>

3.去除左下角没有百度地图的 logo 和版本信息,可以在 index.html 的样式中引入:

.BMap_cpyCtrl, .anchorBL {      display: none;}
复制代码


4.开始进入你需要引入百度地图的组件:

(1)首先引入百度地图:

import BMap from 'BMap'
复制代码


注意:vue 2.0 和 3.0 的差异本来就很大,import BMap from 'BMap'  是 2.0 用的,当然在 3.0 也可以用,而

externals: {    "BMap": "BMap"}
复制代码


是 3.0 用的,方式不一样。

(2)组件的 template 中:

   <div id="map"></div>
复制代码


(3)在 methods 中添加方法:

//创建地图实例createMap() {    // 创建Map实例    var map = new BMap.Map("map");    var geolocation = new BMap.Geolocation();    //调用百度地图api 中的获取当前位置接口    geolocation.getCurrentPosition(function (r) {        if (this.getStatus() == BMAP_STATUS_SUCCESS) {            //获取当前位置经纬度            let myGeo = new BMap.Geocoder();            myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function (result) {                if (result) {                    console.log(result);                    // 初始化地图,设置中心点坐标和地图级别                    map.centerAndZoom(new BMap.Point(result.point.lng, result.point.lat), 11);//设置中心点                    map.setCurrentCity("北京");        //由于有3D图,需要设置城市哦                    //开启鼠标滚轮缩放,默认关闭                    map.enableScrollWheelZoom(false)                    //添加缩略图控件                    map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));                    //添加缩放平移控件                    map.addControl(new BMap.NavigationControl());                    //添加比例尺控件                    map.addControl(new BMap.ScaleControl());                    //添加地图类型控件                    map.addControl(new BMap.MapTypeControl());                    var marker = new BMap.Marker(new BMap.Point(result.point.lng, result.point.lat));                    //把标注添加到地图上                    map.addOverlay(marker);                }            });        }    });}
复制代码


(4)在生命周期函数 mounted 中(与 methods 同级)

mounted() {    this.createMap();}
复制代码


(5)最后给地图宽高:

#map {      margin-top: 20px;      height: 700px;}
复制代码


(6)效果图:


那么,vue 中怎么使用高德地图呢?==》》vue中引入高德地图


用户头像

尔嵘

关注

还未添加个人签名 2021.03.27 加入

愿你阳光下做个孩子,风雨里做个大人!

评论

发布
暂无评论
vue+element中引入百度地图