vue+element中引入百度地图

❤️❤️❤️ 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));//设置地图标记点的位置（坐标）、iconvar 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中引入高德地图

vue+element中引入百度地图相关推荐

百度地图的使用方法，如何在Vue项目中使用百度地图
关于百度地图的解释百度地图又称LBS:LocationBussinessServer,是基于定义位置的商业服务,现在常用的地图有百度地图和高德地图居多官网入口 https://lbsyun.bai ...
vue项目中使用百度地图轨迹动画
在上篇博客中,介绍了如何在vue项目中集成百度地图,这篇博客主要是说如何在vue项目中使用轨迹动画在项目开发过程中,比如你需要实时的观察一个人的行走路线,行走过程. 这个时候我们就需要在地图上使用 ...
浏览器中引入百度地图，并带有导航功能
在浏览器中引入百度地图,并带有导航功能 1.去百度地图API官网申请一个密钥,然后引入百度地图API <script type="text/ ...
vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）
需求描述: 在vue项目中,有时候,我们需要自定义百度地图的一些功能.譬如,现在的需求,就是需要自定义搜索内容和结果展示. 类似如下页面的功能: 首先在vue项目中,我们可以使用 vue-baidu- ...
Vue项目中使用百度地图+mapv
1.安装依赖 npm install vue-baidu-map --save npm install mapv --save 2.main.js import BaiduMap from " ...
vue项目中使用百度地图
安装首先在vue项目中,我们可以使用 vue-baidu-map 插件来替代直接引入百度地图js sdk. 官方文档 JavaScript API v2.0类参考 npm install --sav ...
Vue使用v-charts引入百度地图实现数据可视化
上一篇文章给大家介绍了vue-echarts引入百度地图的过程, 今天给大家介绍通过v-charts来写一个简单的地图,相比之下过程更为简单,下面一起来看看具体步骤介绍 v-charts 是饿了么团 ...
react项目中引入百度地图
项目目录如下: 在此index.html中加入如下代码即可: <!DOCTYPE html> <html lang="en"><head>< ...
前端学习（2466）：在前端页面中引入百度地图
1.配置你需要的地图效果百度地图生成器可选配置:位置.宽高.缩放.标注样式 2.导出导入地图代码点击获取代码,将代码引入到你的html.js.vue等文件中 ps:标注不显示的解决方法:将图标链接换 ...

vue+element中引入百度地图

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

vue+element中引入百度地图相关推荐

最新文章

热门文章