技术学习分享_CKX技术 技术资讯 vue+element中引入百度地图

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中引入高德地图​

———————————————— 版权声明:本文为CSDN博主「尔嵘」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:​​https://blog.csdn.net/XU441520/article/details/100121183​

本文来自网络,不代表技术学习分享_CKX技术立场,转载请注明出处。

作者: CKX技术

上一篇
下一篇
广告位

发表回复

返回顶部