vue 用百度地圖實現鏈家找房的效果
效果如下：
點擊其中的一個區（裏面的數據是我自己造的，就幾條，不多）
1.安裝百度地圖依賴
npm install vue-baidu-map –save
2.申請百度地圖開放平臺申請百度地圖密鑰（鏈接http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey）按照官網的信息提示寫，申請好之後記住自己的ak（地圖api示例鏈接http://lbsyun.baidu.com/jsdemo.htm#c1_16）
3.在項目裏面的index.html裏面添加以下代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/getscript?
v=2.0&ak=這裏是你是自己的AK"></script>
<title>test</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
4.創建一個模板，添加以下代碼
<template>
<div id="app">
<div id="allmap"></div>
<!-- <div v-if="show==true" class="show">我是彈出層</div> -->
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
};
},
methods: {},
mounted: function() {
this.$nextTick(() => {
var map = new BMap.Map("allmap"); //初始化map, 綁定id=allmap
var point = new BMap.Point(121.445, 31.213); // 初始化point, 給定一個默認x,y值
map.centerAndZoom(point, 13); // 將point點放入map中，展示在頁面中心展示，10=縮放程度
map.enableScrollWheelZoom(); // 開啓滾動鼠標滑輪
// 如有多個point去展示，可根據後端接口傳入爲主
let data = [
{ x: 121.48, y: 31.23, name: "黃浦區<br/>118套房" },
{ x: 121.43, y: 31.18, name: "徐彙區<br/>118套房" },
{ x: 121.45, y: 31.23, name: "靜安區<br/>118套房" },
{ x: 121.5, y: 31.27, name: "虹口區<br/>118套房" },
{ x: 121.4, y: 31.25, name: "普陀區<br/>118套房" },
{ x: 121.48, y: 31.4, name: "寶山區<br/>118套房" },
{ x: 121.38, y: 31.12, name: "閔行區<br/>118套房" }
];
data.forEach((e, i) => {
// 創建point, 將x,y值傳入
let pointNumber = new BMap.Point(e.x, e.y);
// 創建信息窗口對象
// let detiail=new BMap.Point(e.x, e.y);
// let infoWindow = new BMap.InfoWindow("World", {
// width: 150, // 信息窗口寬度
// height: 100, // 信息窗口高度
// title: e.x+","+e.y // 信息窗口標題
// });
// 將data中的name加入地圖中
var label = new BMap.Label(e.name);
label.setStyle({
color: "black", //字體顏色
fontSize: "13px", //字體大小
padding: "18px 8px",
backgroundColor: "white", //文本標註背景顏色
borderRadius: "50px",
border: "0",
textAlign: "center",
fontWeight: "bold" //字體加粗
});
markerFun(pointNumber, label);
});
function markerFun(points, label) {
// let markers = new BMap.Marker(points);
var myIcon = new BMap.Icon("/static/one.jpg", new BMap.Size(1, 1));
var markers = new BMap.Marker(points, { icon: myIcon });
map.addOverlay(markers); // 將標註添加到地圖中
markers.setLabel(label); // 將data中的name添加到地圖中
// 標註的點擊事件
label.addEventListener("click", function(event) {
map.removeOverlay(markers);
// map.openInfoWindow( points);//參數：窗口、點 根據點擊的點出現對應的窗口
map.centerAndZoom(points, 16);
let ptdata = [
{ x: 121.4, y: 31.2456, name: "普陀一區<br/>102套" },
{ x: 121.4, y: 31.26, name: "普陀二區<br/>103套" },
{ x: 121.4, y: 31.2645, name: "普陀三區<br/>120套" },
{x: 121.43, y: 31.18, name: "徐匯一區<br/>120套"},
{x: 121.43, y: 31.19, name: "徐匯二區<br/>120套"},
];
ptdata.forEach((e, i) => {
// 創建point, 將x,y值傳入
let ptpointNumber = new BMap.Point(e.x, e.y);
// 將data中的name加入地圖中
var ptlabel = new BMap.Label(e.name);
ptlabel.setStyle({
color: "black", //字體顏色
fontSize: "13px", //字體大小
padding: "15px 8px",
backgroundColor: "white", //文本標註背景顏色
borderRadius: "50px",
border: "0",
textAlign: "center",
fontWeight: "bold" //字體加粗
});
ptmarkerFun(ptpointNumber, ptlabel);
});
function ptmarkerFun(ptpoints, ptlabel) {
var ptmyIcon = new BMap.Icon(
"/static/one.jpg",
new BMap.Size(1, 1)
);
var ptmarkers = new BMap.Marker(ptpoints, { icon: ptmyIcon });
// let ptmarkers = new BMap.Marker(ptpoints);
map.addOverlay(ptmarkers); // 將標註添加到地圖中
ptmarkers.setLabel(ptlabel); // 將data中的name添加到地圖中
}
});
}
// 獲取當前地理位置
// var geolocation = new BMap.Geolocation();
// geolocation.getCurrentPosition(function (r) {
// if (this.getStatus() == BMAP_STATUS_SUCCESS) {
// var mk = new BMap.Marker(r.point);
// map.addOverlay(mk);
// map.panTo(r.point);
// // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
// } else {
// // alert('failed' + this.getStatus());
// }
// });
});
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
#allmap {
height:800px;
overflow: hidden;
}
.show{
border: 1px solid black;
height: 200px;
position: absolute;
bottom: 0;
background-color: white;
left: 0;
width: 100%;
padding: 10px;
}
</style>
5.結束