vuecli3.0项⽬使⽤百度地图实现infobox信息框和省市区搜索功能偶尔记录⼀下免得以后如果还⽤还得翻⽂档资料之类的
⾸先过下需求点：
1 ，实现客户多点定位，
2，可以根据省市区的名称进⾏查询，在地图上显⽰当前搜索的位置，进⾏数据更新
3，点击定位图标，弹出对应的详细信息并进⾏下⼀步的操作
下⾯上基础的信息⾸先你得注册百度第⼀的账号才能使⽤地图的相关API
然后就可以在页⾯上使⽤了
//地图初始化看需要添加或者删减⾃⼰需要的功能该函数应在请求到经纬度信息后调⽤或者看⾃⼰需求
BaiduMap() {
/**地图初始化 */
let that = this;
var map = new BMap.Map("allmap"); // 创建Map实例
// 初始化地图，设置中⼼点坐标和地图级别 // 添加地图类型控件
// 地图卫星
// map.addControl(
// new BMap.MapTypeControl({
// mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]
// })
/
/ );
//地图样式（要进⼊到百度开发者⾥⾯⾃⼰去配置，详细有兴趣可以⾃⼰搜索很简单）
map.setMapStyleV2({
styleJson: figJson
});
//街道⽐例尺
// map.addControl(new BMap.NavigationControl());
map.setCurrentCity("江阴"); // 设置地图显⽰的城市此项是必须设置的
//获取当前城市信息
/
/ var geolocation = new BMap.Geolocation();
// CurrentPosition(
// function getinfo(position) {
// if (position.address.city) {
// that.currentCity = position.address.city; //获取城市信息
// }
// },
// function(e) {
// alert("获取百度定位位置信息失败");
// },
svg图// { provider: "baidu" }
/
/ );
//设置定位图标
this.picPosition(map);
},
// 图标定位
picPosition(map) {
let that = this; // 改变this指向避免有些函数内部⽆法使⽤
//this.mapPoints 页⾯进来时获取到的经纬度和⼀些客户信息
for (let i = 0; i < this.mapPoints.length; i++) {
if (this.mapPoints[i].imgNames == "null") {
this.mapPoints[i].imgNames = require("../../assets/images/close.svg");//设置默认图⽚
} else {
this.mapPoints[i].imgNames =
configImg.baseUrl +
"customer/electricCustomer/showImg?path=" +
this.mapPoints[i].imgNames;
}
var points = new window.BMap.Point(
this.mapPoints[i].longitude,
this.mapPoints[i].latitude
);
//点击图标发请求的操作
/
/ var _marker = createMark(points, this.mapPoints[i].id);
// map.addOverlay(_marker);
//点击图标不发请求，直接展⽰信息的操作如果如要此功能（markerFun(points, label, infoBox); //不发起请求显⽰infobox)此⾏以上代码可以不要
var label = new BMap.Label(this.mapPoints[i].name, {
offset: new BMap.Size(25, 5)
});
var html = `<div class="mapinfo">
<div class="logobox">
<img class="logo" src='${this.mapPoints[i].imgNames}'></img>
</div>
<div class="companyinfo">
<p>企业名称:${this.mapPoints[i].userName}</p>
<p>企业电话:${this.mapPoints[i].contactPhone}</p>
</div>
<div class="warnbox"><span>10</span><span>10</span></div>
<div class="sydl">1212</div>
<div class="aqday">1212</div>
<div class="gobox">
<div class="gobox1" id='gobox1'></div>
<div class="gobox2" id='gobox2'></div>
<div class="gobox3" id='gobox3'></div>
</div>
<input id='inp' type=hidden value="${this.mapPoints[i].id}" ></input>
<input id='iname' type=hidden value="${this.mapPoints[i].userName}" ></input> <input id='code' type=hidden value="${this.mapPoints[i].userNo}" ></input>
</div>`;
//设置关闭按钮
var infoBox = new BMapLib.InfoBox(map, html, {
closeIconUrl: require("../../assets/images/close.svg"),
closeIconMargin: "16px 15px 4px 4px",
enableAutoPan: true,
align: INFOBOX_AT_TOP
});
markerFun(points, label, infoBox); //不发起请求显⽰infobox
}
// 需要点击定位图标请求接⼝渲染infobox的函数
function createMark(poi, x) {
var content = "";
var myIcon = new BMap.Icon(
require("./../../assets/images/zb2.svg"),
new BMap.Size(25, 33)
);
var marker = new BMap.Marker(poi, { icon: myIcon }); //创建marker对象
marker.addEventListener("click", function() {
console.log(x, "222");
var html = `<div class="mapinfo">
<div class="logobox">
<img class="logo" src=''></img>
</div>
<div class="companyinfo">
<p>企业名称:</p>
<p>企业电话:</p>
</div>
<div class="warnbox"><span>10</span><span>10</span></div>
<div class="sydl">1212</div>
<div class="aqday">1212</div>
<div class="gobox">
<div class="gobox1" id='gobox1'></div>
<div class="gobox2" id='gobox2'></div>
<div class="gobox3" id='gobox3'></div>
</div>
<input id='inp' type=hidden value="" ></input>
<input id='iname' type=hidden value="" ></input>
<input id='code' type=hidden value="" ></input>
</div>`;
var infoBox = new BMapLib.InfoBox(map, html, {
closeIconUrl: require("../../assets/images/close.svg"),
closeIconMargin: "16px 15px 4px 4px",
enableAutoPan: true,
align: INFOBOX_AT_TOP
});
infoBox.open(marker);
});
return marker;
}
// 已经渲染好infobox 点击对应突变就会弹出的函数
function markerFun(points, label, infoBox) {
// 设置不同的图标
/
/ if (t.indexOf("xx") != -1) {
// var myIcon = new BMap.Icon(
// require("./../../assets/images/zb2.svg"),
// new BMap.Size(20, 28)
// );
// }else{
// var myIcon = new BMap.Icon(
// require("./../../assets/images/zb1.svg"),
// new BMap.Size(20, 28)
// );
// }
var myIcon = new BMap.Icon(
require("./../../assets/images/zb2.svg"),
new BMap.Size(25, 33)
);
var markers = new BMap.Marker(points, { icon: myIcon });
map.addOverlay(markers);
//点击图标事件
markers.addEventListener("click", function(event) {
//信息窗⼝
infoBox.open(markers);
let btn = ElementById("gobox1");
btn.addEventListener("click", function(event) {
let value = ElementById("inp").value;
let name = ElementById("iname").value;
let code = ElementById("code").value;
that.$router.push({
path: "/xxx",
query: { id: code }
});
});
});
}
/
/ map.addOverlay(marker);
},
queryComNameId(item) {
this.mapShow = true;
if (!item) {
if (!this.cityName) {
this.$message({
message: "请输⼊城市"
});
return false;
}
} else {
if (item == "港澳") {
this.$message({
message: "请选择正确的省份"
});
return false;
} else {
this.cityName = item;
}
}
var map = new BMap.Map("allmap");
map.setMapStyleV2({
styleJson: figJson
});
var alarmsFlag = false;
var addInfo = "";
let that = this;
var bdary = new BMap.Boundary();
<(this.cityName, function(rs) {
/
/获取⾏政区域
map.clearOverlays(); //清除地图覆盖物
//添加地图节点
var count = rs.boundaries.length; //⾏政区域的点有多少个
if (count === 0) {
alarmsFlag = true;
return;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {
strokeWeight: 2,
strokeColor: "blue"
}); //建⽴多边形覆盖物
ply.setFillOpacity(0.1);
//添加覆盖物
pointArray = Path());
}
map.setViewport(pointArray); //调整视野
that.picPosition(map);//调⽤图标定位的函数
});
},
关键性的代码就这么些，有⼀些的⽂件的配置或者交互之类的看个⼈需要这⾥并不⼀⼀列出来了，最后上张效果图仅供参考
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论