vue 用百度地图实现链家找房的效果
生活随笔
收集整理的這篇文章主要介紹了
vue 用百度地图实现链家找房的效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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=allmapvar 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.結束
總結
以上是生活随笔為你收集整理的vue 用百度地图实现链家找房的效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 浅析调和平均数
- 下一篇： 如何在Win7安装U盘中加入USB3.0