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獲取用戶瀏覽器所在省市區百度api根據ip獲取省市區 Vue項目引用百度地圖並實現搜索定位等功能 Vue項目引用百度地圖並實現搜索定位等功能 echarts百度接口實現省市區縣數據下鑽使用Vue Baidu Map對百度地圖實現輸入框搜索定位