使用
- 项目执行命令
npm i vue-baidu-map --save或者cnpm i vue-baidu-map --save - 全局注册（在main.js）
import BaiduMap from 'vue-baidu-map';```
Vue.use(BaiduMap, {
/* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
ak: 'YOUR_APP_KEY'
})
- 去百度API申请地图密钥（访问应用AK） http://api.map.baidu.com/lbsapi/
在vue组件里面如果就这么使用会报 BMap is not defined ， so...... 新建js文件
//map.js
export function MP(ak) {
return new Promise(function(resolve, reject) {
window.onload = function() {
resolve(BMap)
}
var script = document.createElement('script')
script.type = 'text/javascript'
script.src =
'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&callback=init'
script.onerror = reject
document.head.appendChild(script)
})
}
在自己创建的地图组建中进行引入
import { MP } from './../../map.js'
mounted () {
this.$nextTick(function () {
var _this = this;
//写入自己的ak
MP(_this.ak).then(BMap => {
//在此调用api
this.map()//这是我自定义的
})
})
},
methods：{
map(){
}
}
我把会用到的百度地图的方法罗列一下，方便大家可以快速运用百度地图
var map = new BMap.Map("BaiduMap") ; // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 10); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var point = new BMap.Point(117.333964, 39.9093); // 创建点坐标
var marker = new BMap.Marker(point); //创建标注
map.addOverlay(marker);// 将标注添加到地图中
map.clearOverlays(); //清除地图上所有覆盖物
效果图
实现 高亮选取区域 以及 简单搜索功能；
高亮选取区域：
data(){
return{
districtLoading :0,
bList : []
}
}
//获取行政区域边界
getBoundary(){
this.addDistrict(this.ruleForm.area)
},
//添加行政区域
addDistrict(districtName){
let _this = this;
//使用计数器来控制加载过程
this.districtLoading ++;//控制加载过程
var bdary = new BMap.Boundary();
bdary.get(districtName,function(rs){//获取行政区域
var count = rs.boundaries.length;//行政区域点的个数
for(let i =0;i然后就是搜索的实现（多条件）
点击查询，拿到搜索条件的value值，过滤坐标数组（无论是接口获取到的还是自己定义的）
//HTML
地址查询
{{item}}
{{ v }}
查询
甲级测绘资质单位
乙级测绘资质单位
丙级测绘资质单位
丁级测绘资质单位
//js
import { MP } from '../../js/map'
import jia from '../../assets/images/sga.png'//地图自定义标注图标
import yi from '../../assets/images/sgb.png'//地图自定义标注图标
import bing from '../../assets/images/sgc.png'//地图自定义标注图标
import ding from '../../assets/images/sgd.png'//地图自定义标注图标
export default {
name:"maps",
data(){
return{
jia,
yi,
bing,
ding,
map:null,
districtLoading:0,
bList:[],
dialogMap: true,
mapGetshow: true,
gradeList:["任意等级","甲级","乙级","丙级","丁级"],
areaList:["北京","河北","上海","新疆","广东","天津"],
ruleForm:{
name:'',
grade:'任意等级',
number:'',
area:'北京',
},
icon:'',
data: [
{ x: 116.3964, y: 39.9093, name: '甲', area:'北京',grade:'甲级', number:'1'},
{ x: 117.333964, y: 39.9093, name: '乙', area:'天津',grade:'乙级', number:'2'},
{ x: 116.321568, y: 39.88648, name: '乙',area:'北京',grade:'乙级', number:'3'},
{ x: 116.495243, y: 40.756839, name: '丙', area:'北京',grade:'丙级', number:'4'},
{ x: 116.484243, y: 39.746539, name: '丁', area:'北京',grade:'丁级', number:'5'}
] ,
newData:[]
}
},
mounted(){
this.$nextTick(function () {
var _this = this;
MP(_this.ak).then(BMap => {
this.map = new BMap.Map("BaiduMap");// 创建Map实例
var point = new BMap.Point(116.3964, 39.9093);// 初始化地图
this.map.centerAndZoom(point,10);//设置中心点坐标和地图级别
this.map.enableScrollWheelZoom();//开启鼠标滚轮缩放
this.drawMap(this.data)
this.getBoundary()
})
})
},
methods:{
handleChange(value){
this.ruleForm.grade = value;
},
handleChange2(value){
this.ruleForm.area= value;
},
onSubmit({ name, number, grade, area}){
console.log(name, number, grade, area)
let _this = this;
this.map.clearOverlays(); //清除地图上所有覆盖物
if(grade == '任意等级'){
this.newData = this.data.filter( item => {
let matchArea = true;
if(area){
matchArea = item.area== area
}
return matchArea
})
console.log(this.newData)
}
else{
this.newData = this.data.filter( item =>{
let matchName = true;
let matchNumber = true;
let matchGrade = true;
let matchArea = true;
if(name){
matchName = item.name == name
}
if(number){
matchNumber = item.number == number
}
if(grade){
matchGrade = item.grade == grade
}
if(area){
matchArea = item.area== area
}
console.log(matchName,matchNumber,matchGrade,matchArea)
return matchName && matchNumber && matchGrade && matchArea
})
console.log(this.newData)
}
this.getBoundary()
this.drawMap(this.newData)
},
drawMap(pointList){
let _this = this;
pointList.forEach((v,i)=>{
if(_this.ruleForm.area== v.area){
let pointNumber = new BMap.Point(v.x,v.y)//创建point
if(v.grade == '甲级'){
_this.icon = jia
}
if(v.grade == "乙级"){
_this.icon = yi
}
if(v.grade == "丙级"){
_this.icon = bing
}
if(v.grade == "丁级"){
_this.icon = ding
}
let content = `
单位名称：${ v.name }
资质等级：${ v.grade }
资质证号：${ v.number}
`
let infoWindow = new BMap.InfoWindow(content ,{//信息窗口
width:150,
// height:100,
title:"这是"+v.name//窗口标题
})
// var label = new BMap.Label(v.name,{//把data的name加入地图
// offset:new BMap.Size(25,5)
// })
var deviceSize = new BMap.Size(48,48)
var deviceIcon = new BMap.Icon(_this.icon,deviceSize,{
imageSize:deviceSize
})
markerFun(pointNumber, infoWindow, deviceIcon)//markerFun(pointNumber, infoWindow, label, deviceIcon)
}
});
function markerFun(points,infoWindow,deviceIcon){//function markerFun(points,infoWindow,label,deviceIcon){
let markers = new BMap.Marker(points,{icon:deviceIcon});// 创建标注
_this.map.addOverlay(markers);//把标注添加到地图中
// markers.setLabel(label);//把data中name添加到地图
markers.addEventListener('click',function(event){//标注点击事件
_this.map.openInfoWindow(infoWindow,points);//参数：窗口、点 根据点击的点出现对应的窗口
})
}
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMap.Marker(r.point);
_this.map.addOverlay(mk);
_this.map.panTo(r.point);
} else {
// alert('failed' + this.getStatus());
}
})
},
getBoundary(){//获取行政区域边界
this.addDistrict(this.ruleForm.area)
},
//行政区域
addDistrict(districtName){
let _this = this;
this.districtLoading ++;//控制加载过程
var bdary = new BMap.Boundary();
bdary.get(districtName,function(rs){//获取行政区域
var count = rs.boundaries.length;//行政区域个数
for(let i =0;i去掉百度地图logo：百度地图的Logo是使用css样式放上去的，我们可以使用css样式覆盖掉
``