vue+element中引入百度地图

原创已于 2022-06-28 17:31:03 修改 · 1.3w 阅读

47 ·

CC 4.0 BY-SA版权

未经csdn博主（前端-尔嵘）允许不得转载，转载请注明转载路径及说明！

文章标签：

#百度地图在VUE引用

于 2019-08-28 16:23:10 首次发布

Vue2 专栏收录该内容

86 篇文章

订阅专栏

❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️

前言：您好，我是csdn-尔嵘，如果您需要雨伞，可以去TaoBao搜：华，诚，荣，邦，百，货谢谢您的支持！

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密匙申请：送你直达

例如：

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中添加方法：

可参考百度地图API：请点击

//创建地图实例
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());
                    //设置标记点的icon图标、大小
                    var icon = new BMap.Icon("https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg",new BMap.Size(100,100));
                    //设置地图标记点的位置（坐标）、icon
                    var marker = new BMap.Marker(new BMap.Point(result.point.lng, result.point.lat),{icon:icon});
                    //把标注添加到地图上
                    map.addOverlay(marker);
                    //给标记点添加鼠标移入浮窗浮窗和内容
                    var content = "<ul style='list-style-type: none; padding: 10px; background: rgba(20, 30, 40, 0.75); font-size: 14px; color: #fff;'><li style='display: flex; justify-content: space-between;'>站点名称: <span>" +华侨城壹号院 +
"</span></li>"+"<li style='display: flex; justify-content: space-between;'>站点状态: <span>" + 正在运行 +"</span></li>" +"<li style='display: flex; justify-content: space-between;'>设备总数: <span>" +200 +"</span></li>" +"<li style='display: flex; justify-content: space-between;'>告警数: <span>"+0+"</span></li>" +"<li style='display: flex; justify-content: space-between;'>电话: <span>" +178866668086 +"</span></li></ul>";
                    var infowindow = new BMap.InfoWindow(content);
                    // 图标点击的时候显示标注
                    marker.addEventListener("click",function(){
                        map.openInfoWindow(infoWindow, new BMap.Point(result.point.lng, result.point.lat)); //开启信息窗口
                    });

                    //同理，可设置监听鼠标移入事件-图标鼠标移入显示标注onmouseover 
                }
            });
        }
    });
}

（4）在生命周期函数mounted中（与methods同级）

mounted() {
    this.createMap();
}

（5）最后给地图宽高：

#map {
      margin-top: 20px;
      height: 700px;
}

（6）效果图：

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