“

大家好，我是雄雄，歡迎關注微信公眾號：雄雄的小課堂。

”

前言

昨天分享了下vue中v-for的一些特殊用法，料想標題給寫成了vi-for…太粗心了。文章連接在這里：

vue中如何使用v-for限制遍歷的條數？只查詢前三條、查詢4-6條怎么實現？

在項目中，難免會遇到這樣的需求，在項目中加入地圖組件，然后在地圖上對某些地點進行標注，那么這樣的功能應該怎么實現呢？

引入百度地圖

1.執行以下命令，安裝：

$?npm?install?vue-baidu-map?--save

2.全局注冊或者局部注冊：

import?Vue?from?'vue' import?BaiduMap?from?'vue-baidu-map'Vue.use(BaiduMap,?{//?YOUR_APP_KEY?是在百度地圖開發者平臺申請的密鑰?*/ak:?'YOUR_APP_KEY' })

3.在頁面中引入地圖組件：

<template><baidu-map class="ditu"> </baidu-map> </template><style> .ditu {width: 100%;height: 300px; } </style>

效果圖：

地圖效果

以上為最基礎的寫法，下面是我在項目中的寫法：

<baidu-mapclass="bmView":scroll-wheel-zoom="true":center="location":zoom="zoom"ak="YOUR_APP_KEY"><!-- 顯示地圖框 --><bm-view style="width: 75%; height:450px; flex: 1;float: left"> </bm-view></baidu-map>

:center表示當前地圖的中心。

:zoom表示顯示的地圖級別。

下面是data中的代碼

location:?{lng:?113.10424,lat:?34.925694}, zoom:?12.8,???//也可以是6

4.在地圖中怎么標注點的位置呢？

首先標注點時需要知道經緯度，一般經緯度信息都從數據庫中取出來了，只需要遍歷標注點的組件即可，下面是代碼：

<bm-marker v-for="m in markers":position="{lng:m.fieldLongitude, lat: m.fieldLatitude}":dragging="true"animation="BMAP_ANIMATION_BOUNCE"></bm-marker>

js部分的data中聲明：

markers:?{fieldLongitude:0,fieldLatitude:0,},

methods中的方法：

/*根據城市查詢器材信息*/getSysEquipmentFieldByCity(){equipmentFieldByCity(this.queryParams).then(response?=>?{this.fieldListByCity?=?response.data;//在地圖上標注出來this.markers?=?this.fieldListByCity;//將當前地圖拉到該省份去if(response.data.length>0){this.location.lng?=?this.fieldListByCity[0].fieldLongitude;this.location.lat?=?this.fieldListByCity[0].fieldLatitude;}});},

5.如何實現點擊右邊的地址，地圖就定位到當前點擊的地方呢？

地圖效果

vue部分代碼：

<!-- 按照省市查詢出來的器材信息 --><div class="equipment_count" ><a><div class="equipment_count_item"v-for="(item,i) in fieldListByCity" @click="getLocationByCity(item)"><span class="shuzi">{{i+1}}</span><span class="xinxi">{{item.fieldName}}<br/>{{item.fieldAddress==null?'暫無詳細地址':item.fieldProvince+item.fieldCity+item.fieldAddress}}</span></div></a></div>

js部分的代碼（點擊事件）：

/*點擊場館，把地圖拉到當前位置*/getLocationByCity(item){/*地圖上顯示的當前位置*/this.location.lat?=?item.fieldLatitude;this.location.lng?=?item.fieldLongitude;this.fieldListByCity?=?item;this.markers?=??this.fieldListByCity;console.log("信息",?this.markers);},

至此，效果就實現了。

點擊地址實現跳轉地圖

總結

以上是生活随笔為你收集整理的vue中如何在地图中标点…的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。