vue cli3.0项目使用百度地图实现 infobox 信息框和省市区搜索功能

本文转载自查看原文 2020-04-26 17:56 1510

偶尔记录一下免得以后如果还用还得翻文档资料之类的

首先过下需求点：

1 ，实现客户多点定位，

2，可以根据省市区的名称进行查询，在地图上显示当前搜索的位置，进行数据更新

3，点击定位图标，弹出对应的详细信息并进行下一步的操作

下面上基础的信息首先你得注册百度第一的账号才能使用地图的相关API

然后就可以在页面上使用了

//地图初始化看需要添加或者删减自己需要的功能该函数应在请求到经纬度信息后调用或者看自己需求

BaiduMap() {

/**地图初始化 */

let that = this;

var map = new BMap.Map("allmap"); // 创建Map实例

// 初始化地图,设置中心点坐标和地图级别 // 添加地图类型控件

map.centerAndZoom(new BMap.Point(120.302029, 31.922903), 12);

// 地图卫星

// map.addControl(

// new BMap.MapTypeControl({

// mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]

// })

// );

//地图样式（要进入到百度开发者里面自己去配置，详细有兴趣可以自己搜索很简单）

map.setMapStyleV2({

styleJson: this.configJson

});

//街道比例尺

// map.addControl(new BMap.NavigationControl());

map.setCurrentCity("江阴"); // 设置地图显示的城市此项是必须设置的

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

map.enableAutoResize();

　　　 //获取当前城市信息

// var geolocation = new BMap.Geolocation();

// geolocation.getCurrentPosition(

// function getinfo(position) {

// if (position.address.city) {

// that.currentCity = position.address.city; //获取城市信息

// }

// },

// function(e) {

// alert("获取百度定位位置信息失败");

// },

// { 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>

<p>企业名称:${this.mapPoints[i].userName}</p>

<p>企业电话:${this.mapPoints[i].contactPhone}</p>

</div>

</div>

</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>

</div>

</div>

</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 (label.content.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 = document.getElementById("gobox1");

btn.addEventListener("click", function(event) {

let value = document.getElementById("inp").value;

let name = document.getElementById("iname").value;

let code = document.getElementById("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;

}

this.getCustomerList();//根据城市名调用地图所需信息

var map = new BMap.Map("allmap");

map.enableScrollWheelZoom(true);

map.centerAndZoom(new BMap.Point(120.302029, 31.922903), 12);

map.setMapStyleV2({

styleJson: this.configJson

});

var alarmsFlag = false;

var addInfo = "";

let that = this;

var bdary = new BMap.Boundary();

bdary.get(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 = pointArray.concat(ply.getPath());

}

map.setViewport(pointArray); //调整视野

that.picPosition(map);//调用图标定位的函数

});

关键性的代码就这么些，有一些的文件的配置或者交互之类的看个人需要这里并不一一列出来了，最后上张效果图仅供参考

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 百度地图定位，获取省市区 C#通过地址获取省市区（基于百度地图API） html5获取经纬度结合百度地图获取省市区百度api根据ip获取省市区 echarts百度接口实现省市区县数据下钻 Vue CLI 3 使用百度地图 Vue 使用百度地图实现搜索定位百度地图 infoBox的用法利用百度地图实现搜索定位功能如何在Vue项目中使用百度地图