vue+element中引入百度地图

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

可参考百度地图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+element中引入百度地图

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

秒客网

vue+element中引入百度地图

相关文章