當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

vue 用百度地图实现链家找房的效果

發(fā)布時(shí)間：2023/12/14 vue 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue 用百度地图实现链家找房的效果小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

vue 用百度地圖實(shí)現(xiàn)鏈家找房的效果

效果如下：

點(diǎn)擊其中的一個(gè)區(qū)（里面的數(shù)據(jù)是我自己造的，就幾條，不多）

1.安裝百度地圖依賴(lài)

npm install vue-baidu-map –save

2.申請(qǐng)百度地圖開(kāi)放平臺(tái)申請(qǐng)百度地圖密鑰（鏈接http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey）按照官網(wǎng)的信息提示寫(xiě)，申請(qǐng)好之后記住自己的ak（地圖api示例鏈接http://lbsyun.baidu.com/jsdemo.htm#c1_16）

3.在項(xiàng)目里面的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></body> </html>

4.創(chuàng)建一個(gè)模板，添加以下代碼

<template><div id="app"><div id="allmap"></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, 給定一個(gè)默認(rèn)x,y值map.centerAndZoom(point, 13); // 將point點(diǎn)放入map中，展示在頁(yè)面中心展示，10=縮放程度map.enableScrollWheelZoom(); // 開(kāi)啟滾動(dòng)鼠標(biāo)滑輪// 如有多個(gè)point去展示，可根據(jù)后端接口傳入為主let data = [{ x: 121.48, y: 31.23, name: "黃浦區(qū)<br/>118套房" },{ x: 121.43, y: 31.18, name: "徐匯區(qū)<br/>118套房" },{ x: 121.45, y: 31.23, name: "靜安區(qū)<br/>118套房" },{ x: 121.5, y: 31.27, name: "虹口區(qū)<br/>118套房" },{ x: 121.4, y: 31.25, name: "普陀區(qū)<br/>118套房" },{ x: 121.48, y: 31.4, name: "寶山區(qū)<br/>118套房" },{ x: 121.38, y: 31.12, name: "閔行區(qū)<br/>118套房" }];data.forEach((e, i) => {// 創(chuàng)建point, 將x,y值傳入let pointNumber = new BMap.Point(e.x, e.y);// 創(chuàng)建信息窗口對(duì)象// let detiail=new BMap.Point(e.x, e.y);// let infoWindow = new BMap.InfoWindow("World", {// width: 150, // 信息窗口寬度// height: 100, // 信息窗口高度// title: e.x+","+e.y // 信息窗口標(biāo)題// });// 將data中的name加入地圖中var label = new BMap.Label(e.name);label.setStyle({color: "black", //字體顏色fontSize: "13px", //字體大小padding: "18px 8px",backgroundColor: "white", //文本標(biāo)注背景顏色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); // 將標(biāo)注添加到地圖中markers.setLabel(label); // 將data中的name添加到地圖中// 標(biāo)注的點(diǎn)擊事件label.addEventListener("click", function(event) {map.removeOverlay(markers);// map.openInfoWindow( points);//參數(shù)：窗口、點(diǎn) 根據(jù)點(diǎn)擊的點(diǎn)出現(xiàn)對(duì)應(yīng)的窗口map.centerAndZoom(points, 16);let ptdata = [{ x: 121.4, y: 31.2456, name: "普陀一區(qū)<br/>102套" },{ x: 121.4, y: 31.26, name: "普陀二區(qū)<br/>103套" },{ x: 121.4, y: 31.2645, name: "普陀三區(qū)<br/>120套" },{x: 121.43, y: 31.18, name: "徐匯一區(qū)<br/>120套"},{x: 121.43, y: 31.19, name: "徐匯二區(qū)<br/>120套"},];ptdata.forEach((e, i) => {// 創(chuàng)建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", //文本標(biāo)注背景顏色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); // 將標(biāo)注添加到地圖中ptmarkers.setLabel(ptlabel); // 將data中的name添加到地圖中}});}// 獲取當(dāng)前地理位置// 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.結(jié)束

總結(jié)

以上是生活随笔為你收集整理的vue 用百度地图实现链家找房的效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。