文章目录

一、百度地图开放平台是什么？
二、创建百度地图
- 1.创建vue项目
- 2.引入百度地图API文件
- 3.创建容器
三、使用百度地图
- 1、基础操作
- - （1）事件
  - - ①点击事件
    - ②地图缩放结束事件
  - （2）创建覆盖物（点、线、面）
  - （3）添加信息窗口
  - （4）清除覆盖物
  - - ①清除所有
    - ②清除指定
  - （5）地址逆解析
- 2、控件
- - （1）城市控件
  - （2）地址检索
- 3、线路规划
- - （1）步行线路规划
  - （2）驾车路线规划
- 4、覆盖物
- - （1）轨迹运动——路书
- 5、工具库
- - （1）点聚合
  - - ①添加
    - ②清除
  - （2）热力图
  - - ①引入js
    - ②使用
四、其他
- （1）坐标转换

一、百度地图开放平台是什么？

百度地图开放平台是面向广大政府、企业、互联网等开发者开放地图服务的平台。百度地图开放平台。若想使用高德地图，请查看文章Vue+高德地图api。

二、创建百度地图

1.创建vue项目

推荐使用vue-element-admin作为模板，这一步骤就不多阐述。

2.引入百度地图API文件

在index.html中引入。
要注意版本，不同版本的方法会有所不同，这里使用v3.0。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的秘钥"></script>

config.js配置webpack，此操作是为了优化打包，减少体积。在externals中添加百度地图即可

3.创建容器

创建一个新的组件

<template><div><!-- 必须要设置div的高度 --><div id="map" style="height: 810px;" /></div>
</template>
<script>
// 引入百度地图
import BMap from 'BMap'
export default {name: '',data() {return {map: '',mapZoom: 14}},created() {this.$nextTick(() => {this.initMap()})},methods: {// 初始化initMap() {// 创建Map实例this.map = new BMap.Map('map')// 初始化地图,设置中心点坐标和地图级别this.map.centerAndZoom(new BMap.Point(104.072242, 30.663711), this.mapZoom)// 设置地图显示的城市 此项是必须设置的this.map.setCurrentCity('成都')// 启用滚轮放大缩小，默认禁用this.map.enableScrollWheelZoom(true)// 启用地图惯性拖拽，默认禁用this.map.enableContinuousZoom(true)}}
</script>
<style>
// 这个样式可以去除地图底部logo
.anchorBL{display:none;
}
</style>

这样简单的百度地图示例已经完成。

三、使用百度地图

1、基础操作

按照上述步骤已经对百度地图进行初始化，并把实例赋值给map，然后就可以使用this.map来调用百度地图的方法。

（1）事件

①点击事件

在初始化的方法中，加入事件即可。

this.map.addEventListener('click', (data) => {// point包含了经纬度console.log(data.point)
})

②地图缩放结束事件

this.map.addEventListener("zoomend", (type) => {})

（2）创建覆盖物（点、线、面）

// 创建一个自定义图片的点覆盖物
addMarker() {// 添加图片var myIcon = new BMap.Icon("图片地址", new BMap.Size(50, 50))// 创建点var ponit = new BMap.Point(104.072242, 30.663711)// 创建标记var marker = new BMap.Marker(ponit, {icon: myIcon})// 在地图上添加点标记this.map.addOverlay(marker)
}

// 创建线覆盖物
addPolygon() {const point = [new BMap.Point(116.387112, 39.920977),new BMap.Point(116.385243, 39.913063),new BMap.Point(116.394226, 39.917988),new BMap.Point(116.401772, 39.921364),new BMap.Point(116.41248, 39.927893)]var polyline = new BMap.Polyline(point, {// 颜色strokeColor: "blue",// 宽度strokeWeight: 2,// 透明度strokeOpacity: 0.5,});
}

效果图

（3）添加信息窗口

添加完点标记后，可以再设置一个信息窗口

// 接着上面代码
marker.addEventListener('click', () => {var opts = {width: 200,height: 150,title: '基本信息'}var html = `<div><p>单位名称：${item.name}</p><p>联系电话${item.contactInformation}</p><p>单位地址：${item.enterpriseAddressDetails}</p></div>`var infoWindow = new BMap.InfoWindow(html, opts)this.map.openInfoWindow(infoWindow, ponit)
})

（4）清除覆盖物

①清除所有

removeOverlay() {this.map.clearOverlays()
}

②清除指定

1.创建一个点，然后清除。removeOverlay方法的参数是一个覆盖物对象，想要清除多个时，需要用把覆盖物放在数组里，然后循环清除。注意new BMap.Marker()方法相当于每次创建了一个新的对象，所以并不能通过同一个坐标新建一个marker来删除之前的。

// 创建一个标记
var ponit = new BMap.Point(104.072242, 30.663711)
var marker = new BMap.Marker(ponit)
this.map.addOverlay(marker)
// 清除一个标记
this.map.removeOverlay(marker)

其他覆盖物同理，比如创建一个圆，然后清除

var circle = new BMap.Circle(point, 2000, {fillColor: "blue",strokeWeight: 1,fillOpacity: 0.2,strokeOpacity: 0.3,
})
this.map.addOverlay(circle)
this.map.removeOverlay(circle)

2.发现有一些覆盖物用上述方法并不能删除，如路书中的icon。

const moveMarker = new BMap.Icon(img,{ widht: 30, height: 36 },{ anchor: new BMap.Size(15, 36) }
);
// 创建路书
const lushu = new BMapLib.LuShu(this.centerMap, point, {defaultContent: "标题",icon: moveMarker,// 米/秒speed: 300,// 是否自动调整视野autoView: false,// 是否开启走路旋转enableRotation: false,landmarkPois: [],
});

使用this.map.addOverlay(moveMarker)发现没有删除。我们可以通过自己加一些自定义属性来删除。

const moveMarker = new BMap.Icon(img,{ widht: 30, height: 36 },{ anchor: new BMap.Size(15, 36) }
);
// 加入一个自定id并赋值
moveMarker.id = "123456";
// 创建路书
const lushu = new BMapLib.LuShu(this.centerMap, point, {defaultContent: "标题",icon: moveMarker,// 米/秒speed: 300,// 是否自动调整视野autoView: false,// 是否开启走路旋转enableRotation: false,landmarkPois: [],
});
// 获取当前地图上所有的覆盖物
const overlays = this.map.getOverlays();
overlays.forEach((item) => {// 循环寻找上面添加的指定id（属性较多，而且可能不一定是K这个变量，需要仔细找一下）if (item.K && item.K.Be && item.K.Be.id === "123456") {this.map.removeOverlay(item);}
});

（5）地址逆解析

const geoc = new BMap.Geocoder()
const ponit = new BMap.Point(104.072242, 30.663711)
geoc.getLocation(ponit, (res) => {console.log(res.address)
})

2、控件

（1）城市控件

通过搜索城市名称，然后定位所选城市

// 创建城市选择控件
const cityControl = new BMap.CityListControl({/* 控件的停靠位置（可选，默认左上角）BMAP_ANCHOR_TOP_RIGHT 右上角BMAP_ANCHOR_BOTTOM_LEFT 左下角BMAP_ANCHOR_BOTTOM_RIGHT 右下角*/anchor: BMAP_ANCHOR_TOP_LEFT,// 控件基于停靠位置的偏移量（可选）offset: new BMap.Size(10, 5)
})
// 将控件添加到地图上
this.map.addControl(cityControl)

效果如图

（2）地址检索

在地图初始化的时候添加一个地址检索

<!-- 地图容器 -->
<div id="caseMap" style="width: 100%; height: 370px" />
<!-- 检索地址容器 -->
<div id="r-result" style="float: left; margin-top: -370px"><el-inputstyle="width: 350px"size="mini"type="text"id="suggestId"v-model="city"><template slot="prepend">请输入：</template></el-input>
</div>

initMap() {const self = this// 创建Map实例this.map = new BMap.Map('map')// 初始化地图,设置中心点坐标和地图级别this.map.centerAndZoom(new BMap.Point(104.072242, 30.663711), this.mapZoom)// 设置地图显示的城市 此项是必须设置的this.map.setCurrentCity('成都')// 启用滚轮放大缩小，默认禁用this.map.enableScrollWheelZoom(true)// 启用地图惯性拖拽，默认禁用this.map.enableContinuousZoom(true)//建立一个自动完成的对象var ac = new BMap.Autocomplete({// 输入框的idinput: "suggestId",location: this.map,})ac.addEventListener("onhighlight", function (e) {//鼠标放在下拉列表上的事件})ac.addEventListener("onconfirm", function (e) {//鼠标点击下拉列表后的事件var _value = e.item.value;// 拼装的地址信息var myValue =_value.province +_value.city +_value.district +_value.street +_value.business;self.setPlace(myValue);})
}
setPlace(e) {const self = this;this.map.clearOverlays(); //清除地图上所有覆盖物// 创建一个检索对象var local = new BMap.LocalSearch(self.map, {//智能搜索onSearchComplete: function () {var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果// 获取的经纬度根据自己业务赋值// self.dataForm.address = e;// self.dataForm.longitude = pp.lng;// self.dataForm.latitude = pp.lat;self.map.centerAndZoom(pp, 18);self.map.addOverlay(new BMap.Marker(pp)); //添加标注},});local.search(e);
},

效果图

Tip如果是在<el-dialog />组件中使用搜索时，需要注意搜索提示会没有，这是因为被挡住了。我们通过F12是可以看到的。这时候就需要把提示框的z-index设置大一些就行了。

.tangram-suggestion-main {z-index: 9999;
}

3、线路规划

（1）步行线路规划

<!-- 放搜索结果 -->
<div id="r-result" style="position: fixed; top: 100px; right: 5px"></div>

var walking = new BMap.WalkingRoute(this.centerMap, { renderOptions: { map: this.centerMap,/* * 这里是百度地图的检索路线结果面板，在html中写一个div用于展示，panel的值为div的id。* 有些时候我们可能不需要过多的信息，这时可以用onSearchComplete方法自定义一个面板。*/panel: "r-result",// 是否选择第一个检索结果selectFirstResult: true,// 检索结束后是否自动调整地图视野autoViewport: true },// 检索完成后回调onSearchComplete: function(results){if (walking.getStatus() != BMAP_STATUS_SUCCESS){return}// 获取第一个路线var plan = results.getPlan(0)// 获取时间plan.getDuration(true)// 获取距离plan.getDistance(true)}
})
var start = new BMap.Point(116.310791, 40.003419)
var end = new BMap.Point(116.326419, 40.003519)
walking.search(start, end)

效果图

（2）驾车路线规划

代码跟步行类似，只需把new BMap.WalkingRoute()换成new BMap.DrivingRoute()即可。

4、覆盖物

（1）轨迹运动——路书

1.首先在index.html页面引入路书js文件

<script type="text/javascript" src="https://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>

2.创建路书

// 假设points是从后端请求的经纬度数据
const points = [{lng: 116.387112, lat: 39.920977},{lng: 116.385243, lat: 39.913063},.....
]
const point = []
points.forEach(item => {point.push(new BMap.Point(item.lng, item.lat))
}
// 添加线覆盖物当做路线
var polyline = new BMap.Polyline(point, {strokeColor: "blue",strokeWeight: 2,strokeOpacity: 0.5,
});
this.centerMap.addOverlay(polyline);
// this.centerMap 创建的地图实例
// point 坐标数组，必须是用new BMap.Point()创建的坐标数组
// opts 自定义设置
var lushu = new BMapLib.LuShu(this.centerMap, point, {// 标题defaultContent: "运动轨迹",// 图标icon: "",// 速度，单位米/秒speed: 300,// 是否自动调整视野autoView: true,// 是否开启走路旋转enableRotation: true,// 特殊点信息。如果没有特殊点直接放个空数组也可以，不设置参数貌似会报错landmarkPois: [],
});
lushu.start();

3.方法

// 启动运动
lushu.start();
// 暂停运动
lushu.pause();
// 结束运动
lushu.stop();

效果图

5、工具库

（1）点聚合

①添加

当点的数量过多时，会造成浏览器卡顿，使用点聚合可以有效解决该问题。点聚合的使用也很简单，首先在index页面引入点聚合工具开源库的文件

<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

使用

// 模拟一些点
const markers = [new BMap.Marker(new BMap.Point(116.387112, 39.920977)),new BMap.Marker(new BMap.Point(116.385243, 39.913063)),new BMap.Marker(new BMap.Point(116.394226, 39.917988)),new BMap.Marker(new BMap.Point(116.401772, 39.921364)),new BMap.Marker(new BMap.Point(116.41248, 39.927893)),
]
// markerClusterer是点聚合工具的对象，全局使用。this.map是地图对象
this.markerClusterer = new BMapLib.MarkerClusterer(this.map, {markers: markers,
});

效果

放大后可展示具体点位

②清除

// 清除所有
this.markerClusterer.clearMarkers()
// 清除一个marker
this.markerClusterer.removeMarker(marker)
// 清除多个，这时候参数为marker数组
this.markerClusterer.removeMarkers(markers)

（2）热力图

①引入js

<script type="text/javascript" src="//api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

②使用

this.heatmapOverlay = new BMapLib.HeatmapOverlay({radius: 20,
});
this.map.addOverlay(this.heatmapOverlay);
// point数据格式，lat纬度，lng经度，count热力值，就算为1好像页面上也会自动显示热力层级
// 假设从后端取回数据result
result.forEach(item => {point.push({lat: item.latitude,lng: item.longitude,count: 1,});
})
this.heatmapOverlay.setDataSet({// 热力值的最大值max: 5,// 热力图的详细数据data: point,
});
this.heatmapOverlay.show();
// 隐藏
this.heatmapOverlay.hiden();
// 删除
this.map.removeOverlay.(this.heatmapOverlay);

四、其他

（1）坐标转换

（1）使用百度地图自带的方法进行转换坐标转换文档

var x = 116.32715863448607
var y = 39.990912172420714
var convertor = new BMap.Convertor()
var pointArr = []
var ggPoint = new BMap.Point(x,y)
pointArr.push(ggPoint)
convertor.translate(pointArr, 3, 5, function(data) {if(data.status === 0) {// 业务代码}
})

translate方法的第一个参数为Point类型的数组，第二个参数是源坐标类型，第三个参数是目标坐标类型，第四个是回调函数（坐标类型在文档中有详细说明）。

需要注意的是方法在批量转换坐标时是有上限的，这里推荐使用coordtransform模块，用法很简单。
先用npm安装npm install coordtransform，创建一个js工具类，引入coordtransform就可以使用了。

import coordtransform from 'coordtransform'// 火星坐标转百度经纬度坐标
export function gcj02tobd09(x, y) {return coordtransform.gcj02tobd09(x, y)
}

Vue+百度地图api相关推荐

Vue 百度地图API实现定位用户位置功能
一.进入百度地图百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com) 1.1注册登录 1.2进入控制台应用管理->我的应用->创建应用 1.3创建应用填 ...
vue百度地图api 获取小区边界值
<div id="getMap" ></div>  this.$nextTick(function() {// 初始化百 ...
vue百度地图API、获取当前经纬度以及地理位置
百度API的使用一.创建MAP实例 var self = thiswindow.map = new BMap.Map(this.$refs.allmap); // 创建Map实例window.geo ...
Vue+高德地图api
文章目录前言一.准备工作 1.申请应用 2.引入 3.创建地图二.使用高德地图 1.覆盖物 (1) 点标记 (2) 海量点标记 (3) 轨迹回放 2.矢量图形 (1) 多边形 3.图层 (1) ...
vue调用百度地图API输入提示示例下拉列表一直被触发问题
2019独角兽企业重金招聘Python工程师标准>>> 先看图然后点确定,居然下拉框又被触发了,而且在添加页面各种输入框只要一输入文字就会触发地图下拉框展示,很恶心的一个bug,不 ...
Vue引用百度地图API
Vue引用百度地图API 一. 通过官网申请ak 1. 打开百度地图官网,在开发文档中找到JavaScript API 2.点击账号和获取密钥 3.按照页面步骤操作即可二. 通过模块化引入 1. 安 ...
Vue项目使用百度地图api
目录 1.百度开发者认证 2.创建应用 3.引用百度地图API文件 4.展示地图 1.百度开发者认证进入百度地图开放平台官网,(认证需要身份证号码,人脸识别,手机百度APP,邮箱地址) 注册登录完 ...
基于vue+springboot的校园疫情健康打卡和离校审批系统的设计（百度地图API对接）
这个系统是本人近期的一个项目,开发周期大约是5天,是近年来非常有代表性的一个项目系统简介开发背景:在疫情防控的背景下,提升校园对于各类人员的健康管理,可以实时获取最新的疫情信息,并且对学生和教职工 ...
Vue+Echarts+百度地图API
Vue+Echarts+百度地图API 不容易啊,又注册了一个地图账户使用npm安装方式去百度地图官网申请key,也就是地图API密钥AK 在vue项目的public文件夹中的index.html ...
vue调用百度地图API实现点击相应位置切换地图定位
vue调用百度地图API实现点击相应位置切换地图定位 1.需求分析在页面显示地图,初始状态显示上海市,地图上有特定地点的标注. 左侧为建筑(地点)列表,点击某个地点右侧地图定位到其地理位置并显示具体 ...

Vue+百度地图api