百度地图添加打点、鼠标浮动等操作
2021-12-01 本文已影响0人
小岛wink
后台返回查询企业数据，需要在左侧百度地图上进行企业打点，鼠标浮动展示企业名称。因为已经完成企业数据根据距离封装和列表展示，所以在此基础上循环数据，实现：
1、在地图上进行打点
2、以中心点分别在20、50、100、100外画圆
3、鼠标浮动显示企业名称
首先引入百度地图：新增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 '@/api/map.js'
let map = null,
geoc = null;
export default {
name: 'TestBaiDu',
data() {
return {
ak:'你的AK',
}
};
mounted(){
this.$nextTick(() => {
const _this = this
MP(_this.ak).then(BMap => {
_this.mapBuild()
})
})
},
created() {
this.mapBuild()
},
methods: {
mapBuild() {
let that = this;
this.dialogMap = !this.dialogMap;
setTimeout(function() {
if (that.mapGetshow) {
map = new BMap.Map("container");
geoc = new BMap.Geocoder();
let point = new BMap.Point(116.46, 39.92);
map.centerAndZoom(point, 10);
map.enableScrollWheelZoom();
var scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
// var zoomCtrl = new BMap.ZoomControl(); // 添加比例尺控件
// map.addControl(zoomCtrl);
var geolocation = new BMap.Geolocation();
//定位
geolocation.getCurrentPosition(
r => {
console.log(r);
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
geoc.getLocation(r.point, function(rs) {
var addComp = rs.addressComponents;
console.log(addComp);
that.mapPointName =
addComp.province +
addComp.city +
addComp.district +
addComp.street +
addComp.streetNumber;
that.loading = false;
that.mapGetshow = false;
});
},
{ enableHighAccuracy: true }
);
//鼠标点击
map.addEventListener("click", function(e) {console.log(that.listQuery)
//必选条件都选择选项后传参
// if(that.listQuery.incident == "" ||that.listQuery.large == "" ||that.listQuery.medium == "" ||that.listQuery.small == "" ){
// alert("请选择查询条件！")
// }else{
console.log(e);
var pt = e.point;
var marker = new BMap.Marker(pt); // 创建标注
map.clearOverlays();
map.addOverlay(marker);
// 绘制圆
var circle = new BMap.Circle(e.point, 20000, { //半径为20公里圆
strokeColor: "blue",
strokeWeight: 2,
strokeOpacity: 0.5,
fillOpacity: 0,
fillColor:"",
});
var circle1 = new BMap.Circle(e.point, 50000, { //半径为5-公里圆
strokeColor: "red", //颜色
strokeWeight: 2,
strokeOpacity: 0.5,
fillOpacity: 0,
fillColor:"",
});
var circle2 = new BMap.Circle(e.point, 100000, { //半径为100公里圆
strokeColor: "#00aeee", //颜色
strokeWeight: 2,
strokeOpacity: 0.5,
fillOpacity: 0,
fillColor:"",
});
map.addOverlay(circle);
map.addOverlay(circle1);
map.addOverlay(circle2);
geoc.getLocation(pt, function(rs) {
var addComp = rs.addressComponents;
that.street = addComp.street
console.log(addComp);
that.mapPointName =
addComp.province +
addComp.city +
addComp.district +
addComp.street +
addComp.streetNumber;
that.dispatch.lon = e.point.lat
that.dispatch.lat = e.point.lng
findTableInfo(that.dispatch).then(response => {console.log(response.data)
that.companyList.company20 = response.data[0];
that.companyList.company50 = response.data[1];
that.companyList.company100 = response.data[2];
that.companyList.company200 = response.data[3];
that.num = [response.data[0].length,response.data[1].length,response.data[2].length,response.data[3].length]
if(response.data[0].length !== 0){
let inNum1=0;
response.data[0].forEach(e =>{
inNum1 += e.demandCapacity
//map打点
let myIcon = new BMap.Icon(
require("../../assets/image/pointBlue.png"),
new BMap.Size(20, 20)
);
myIcon.setImageSize(new BMap.Size(20,20));//设置图标大小
var pt = new BMap.Point(e.lat, e.lon);
var marker = new BMap.Marker(pt, { icon: myIcon }); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
//设置弹出框
var opts = {
// position : pt,
width : 280, // 信息窗口宽度
height: 60, // 信息窗口高度
title : '<span style="font-size:18px;color:#00aeee;font-weight: 600">企业名称</span>' , // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow('<div style="line-height:2em;font-size:16px;">'+e.name+'</div>', opts); // 创建信息窗口对象
marker.addEventListener("mouseover", function(){
map.openInfoWindow(infoWindow,pt); //开启信息窗口
});
marker.addEventListener("mouseout", function() {
map.closeInfoWindow(infoWindow, pt); //开启信息窗口
});
})
that.inSum[0] = inNum1
}else{
that.inSum[0] = 0
}
if(response.data[1].length !== 0){
let inNum2=0;
response.data[1].forEach(e =>{
inNum2 +=e.demandCapacity
//map打点
let myIcon = new BMap.Icon(
require("../../assets/image/pointBlue.png"),
new BMap.Size(20, 20)
);
myIcon.setImageSize(new BMap.Size(20,20));//设置图标大小
var pt = new BMap.Point(e.lat, e.lon);
var marker = new BMap.Marker(pt, { icon: myIcon }); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
//设置弹出框
var opts = {
position : pt,
width : 280, // 信息窗口宽度
height: 60, // 信息窗口高度
title : '<span style="font-size:18px;color:#00aeee;font-weight: 600">企业名称</span>' , // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow('<div style="line-height:1.8em;font-size:16px;">'+e.name+'</div>', opts); // 创建信息窗口对象
marker.addEventListener("mouseover", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
marker.addEventListener("mouseout", function() {
map.closeInfoWindow(infoWindow, point); //开启信息窗口
});
})
that.inSum[1] = inNum2
}else{
that.inSum[1] = 0
}
if(response.data[2].length !== 0){
let inNum3=0;
response.data[2].forEach(e =>{
inNum3 +=e.demandCapacity
//map打点
let myIcon = new BMap.Icon(
require("../../assets/image/pointBlue.png"),
new BMap.Size(20, 20)
);
myIcon.setImageSize(new BMap.Size(20,20));//设置图标大小
var pt = new BMap.Point(e.lat, e.lon);
var marker = new BMap.Marker(pt, { icon: myIcon }); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
//设置弹出框
var opts = {
position : pt,
width : 280, // 信息窗口宽度
height: 60, // 信息窗口高度
title : '<span style="font-size:18px;color:#00aeee;font-weight: 600">企业名称</span>' , // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow('<div style="line-height:1.8em;font-size:16px;">'+e.name+'</div>', opts); // 创建信息窗口对象
var infoWindow = new BMap.InfoWindow(e.name, opts); // 创建信息窗口对象
marker.addEventListener("mouseover", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
marker.addEventListener("mouseout", function() {
map.closeInfoWindow(infoWindow, point); //开启信息窗口
});
})
that.inSum[2] = inNum3
}else{
that.inSum[2] = 0
}
if(response.data[3].length !== 0){
let inNum4=0;
response.data[3].forEach(e =>{
inNum4 +=e.demandCapacity
//map打点
let myIcon = new BMap.Icon(
require("../../assets/image/pointBlue.png"),
new BMap.Size(20, 20)
);
myIcon.setImageSize(new BMap.Size(20,20));//设置图标大小
var pt = new BMap.Point(e.lat, e.lon);
var marker = new BMap.Marker(pt, { icon: myIcon }); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
//设置弹出框
var opts = {
position : pt,
width : 280, // 信息窗口宽度
height: 60, // 信息窗口高度
title : '<span style="font-size:18px;color:#00aeee;font-weight: 600">企业名称</span>' , // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow('<div style="line-height:1.8em;font-size:16px;">'+e.name+'</div>', opts); // 创建信息窗口对象
marker.addEventListener("mouseover", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
marker.addEventListener("mouseout", function() {
map.closeInfoWindow(infoWindow, point); //开启信息窗口
});
})
that.inSum[3] = inNum4
}else{
that.inSum[3] = 0
}
})
});
// }
});
}
}, 1000);
}
}
},
response.data[0].forEach(e =>{
//map打点
let myIcon = new BMap.Icon(//打点图标
require("../../assets/image/pointBlue.png"),
new BMap.Size(100, 100)
);
myIcon.setImageSize(new BMap.Size(20,20));//设置图标大小
var pt = new BMap.Point(e.lat, e.lon);
var marker = new BMap.Marker(pt, { icon: myIcon }); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
//设置弹出框
var opts = {
width : 280, // 信息窗口宽度
height: 60, // 信息窗口高度
title : '<span style="font-size:18px;color:#00aeee;font-weight: 600">企业名称</span>' , // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow('<div style="line-height:2em;font-size:16px;">'+e.name+'</div>', opts); // 创建信息窗口对象
marker.addEventListener("mouseover", function(){
map.openInfoWindow(infoWindow,pt); //开启信息窗口
});
marker.addEventListener("mouseout", function() {
map.closeInfoWindow(infoWindow, pt); //开启信息窗口
});
})
实现效果：
image.png
