Vue接入高德地圖的完整實例
前言
Vue 使用高德地圖，實現(xiàn)縮放，鼠標繪制，測距、測面積、行政區(qū)域范圍繪制、關鍵詞查詢等操作。
參考資料
高德地圖API官網：https://lbs.amap.com/
高德地圖2.0參考手冊：https://lbs.amap.com/api/jsapi-v2/documentation#pixel
高德地圖2.0示例代碼：https://lbs.amap.com/demo/list/jsapi-v2
Vue接入高德地圖
引用
首相要在index.html文件中引入高德地圖。
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申請的key值&plugin=AMap.ToolBar"></script>
使用
在需要寫地圖的頁面中添加一個div用來展示地圖，記得為這個div設置高度和寬度，不然顯示不出來。
<div id="mapDiv"></div>
然后寫 TS 代碼把地圖顯示出來。
// 加載地圖
initMap() {
map = new AMap.Map('mapDiv', {
zoom: 11,//級別
center: [116.34703902, 40.48188],//中心點坐標
viewMode: '3D'//使用3D視圖
});
},
然后地圖就出現(xiàn)了。
實現(xiàn)點擊按鈕縮放功能
首先寫兩個靜態(tài)按鈕，縮放也很簡單，就兩行代碼就可以了。
地圖放大
map.zoomIn()
地圖縮小
map.zoomOut()
測量距離
測量距離稍微麻煩點，但是也還好其實。
首先我們要在初始化地圖完成之后，創(chuàng)建一個鼠標繪制工具。
// 測距、測面積使用
mouseTool = new AMap.MouseTool(map);
MouseTool 這個插件需要在index.html文件的script中引入一下，就是plugin參數(shù)后邊加就可以，用英文的逗號隔開。
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申請的key值&plugin=AMap.ToolBar,AMap.MouseTool"></script>
然后寫一個按鈕“測距”，點擊的時候就執(zhí)行測距方法。
// 開始測距
start() {
mouseTool.rule({
startMarkerOptions: {//可缺省
icon: new AMap.Icon({
size: new AMap.Size(19, 31),//圖標大小
imageSize: new AMap.Size(19, 31),
image: "http://webapi.amap.com/theme/v1.3/markers/b/start.png"
}),
offset: new AMap.Pixel(-9, -31)
},
endMarkerOptions: {//可缺省
icon: new AMap.Icon({
size: new AMap.Size(19, 31),//圖標大小
imageSize: new AMap.Size(19, 31),
image: "http://webapi.amap.com/theme/v1.3/markers/b/end.png"
}),
offset: new AMap.Pixel(-9, -31)
},
midMarkerOptions: {//可缺省
icon: new AMap.Icon({
size: new AMap.Size(19, 31),//圖標大小
imageSize: new AMap.Size(19, 31),
image: "http://webapi.amap.com/theme/v1.3/markers/b/mid.png"
}),
offset: new AMap.Pixel(-9, -31)
},
lineOptions: {//可缺省
strokeStyle: "solid",
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 2
}
//同 RangingTool 的 自定義 設置，缺省為默認樣式
});
}
// 停止測距
stop() {
mouseTool.close(true)//關閉，并清除覆蓋物
}
測量面積
測量面積和測距類似。
// 開始測面積
start() {
mouseTool.measureArea({
strokeColor: '#80d8ff',
fillColor: '#80d8ff',
fillOpacity: 0.3
});
}
// 停止測面積
stop() {
mouseTool.close(true)//關閉，并清除覆蓋物
}
很簡單吧！
行政區(qū)劃查詢渲染
這個也很簡單哈寶寶們！
首先也是走接口去獲取行政區(qū)劃的范圍啊。
需要用到這個插件AMap.DistrictSearch，和測距一樣在index.html中引入一下。
然后在初始化地圖完成的時候實例化一下。
// 搜索行政區(qū) district = new AMap.DistrictSearch(opts);
首先寫一個輸入框，用來輸入查詢的行政區(qū)劃的名稱，比如輸入“北京”，然后點擊按鈕走下面的方法來查詢北京行政區(qū)劃的范圍信息。
// 行政區(qū)劃搜索
seachArea() {
if (this.areaInput === "") {
map.remove(areaPolygons)//清除上次結果
return;
}
district.search(this.areaInput, (status, result) => {
map.remove(areaPolygons)//清除上次結果
areaPolygons = [];
var bounds = result.districtList[0].boundaries;
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
//生成行政區(qū)劃polygon
var polygon = new AMap.Polygon({
strokeWeight: 3,
path: bounds[i],
fillOpacity: 0,
fillColor: '#80d8ff',
strokeColor: 'red'
});
areaPolygons.push(polygon);
}
}
map.add(areaPolygons)
map.setFitView(areaPolygons);//視口自適應
});
},
關鍵字搜索
這個其實和行政區(qū)劃查詢差不多。
首先呢，需要在地圖初始化完成之后呢，創(chuàng)建一個關鍵字查詢的實例。
// 關鍵字搜索
AMap.plugin(["AMap.PlaceSearch"], () => {
//構造地點查詢類
placeSearch = new AMap.PlaceSearch({
pageSize: 50, // 單頁顯示結果條數(shù)
pageIndex: 1, // 頁碼
autoFitView: false // 是否自動調整地圖視野使繪制的 Marker點都處于視口的可見范圍
});
});
這個還有其他的參數(shù)，可根據(jù)官方文檔自己判斷挑選使用呀！
有一個輸入框，輸入要查詢的關鍵字，然后一個按鈕來走接口查詢相關的關鍵字。然后會返回給你一個列表包含著關鍵字搜索回來的數(shù)據(jù)。
searchKeyWord() {
placeSearch.search("北京", (state, data) => {
this.total = 0
let dataList = data
switch (dataList.info) {
case 'OK':
console.log("-------->", dataList.poiList.pois)
break;
case 'TIP_CITIES':
console.log("-------->", dataList.cityList)
break;
}
});
}
上邊 如果 info 為 OK，標識返回的是地點列表，如果是 TIP_CITIES，標識返回的是在下面這些城市里面有關于搜索關鍵字的相關數(shù)據(jù)。
比如搜索北京，返回地點列表。
比如搜索“動物園”，返回相關城市列表。
鼠標繪制區(qū)域
這個簡單，就是點擊一個按鈕開始繪制多邊形。
// 繪制區(qū)域
startPolygon() {
polyTool = new AMap.MouseTool(map);
polyTool.polygon({
strokeColor: "#1791fc",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#1791fc',
fillOpacity: 0.4,
strokeStyle: "solid",
extData: {
id: '123'
}
})
polyTool.on('draw', (event) => {
let poly = event.obj // 繪制完多邊形實力對象
console.log('繪制圖形頂點信息列表--------> ', poly.getOptions())
console.log('繪制圖形的自定義屬性--------> ', poly.getOptions().path)
polyTool.close()
polyTool = null
})
},
完成了兄弟們！
總結
到此這篇關于Vue接入高德地圖的文章就介紹到這了,更多相關Vue接入高德地圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue中如何使用方法、計算屬性或觀察者的相關知識，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
當針對不同客戶需要提供不同的圖標時,頁面其他圖標好替換,但是網頁圖標就不太一樣了,下面這篇文章主要給大家介紹了關于vue中修改瀏覽器圖標和名字的幾種方式,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue實現(xiàn)移動端頁面切換效果,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了記一次vue-webpack項目優(yōu)化實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
本篇文章主要介紹了VUE開發(fā)一個圖片輪播的組件示例代碼，對圖片輪播效果感興趣的小伙伴們可以參考一下。2017-03-03
process.env?是?Node.js?中的一個環(huán)境對象，其中保存著系統(tǒng)的環(huán)境的變量信息，可使用?Node.js?命令行工具直接進行查看，這篇文章主要介紹了Vue中配置process.env詳解,需要的朋友可以參考下2023-03-03
使用el-upload組件實現(xiàn)遞歸多文件上傳的全過程
el-upload組件文件上傳都是每個文件請求一次接口,本次實現(xiàn)一次請求上傳多個文件,下面這篇文章主要給大家介紹了關于使用el-upload組件實現(xiàn)遞歸多文件上傳的相關資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue條件渲染與列表渲染，條件渲染包括v-if、v-show等內容，文章對條件渲染及列表渲染介紹詳細，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
Vue 提供了createElement 來創(chuàng)建虛擬dom，方便我們來函數(shù)化的方式來定義復雜的組件結構，這篇文章主要介紹了Vue 中 createElement 使用詳解,需要的朋友可以參考下2022-10-10
Vue3.3?+?TS4構建實現(xiàn)ElementPlus功能的組件庫示例
Vue.js?是目前最盛行的前端框架之一,而?TypeScript?則是一種靜態(tài)類型言語,它能夠讓開發(fā)人員在編寫代碼時愈加平安和高效,本文將引見如何運用?Vue.js?3.3?和?TypeScript?4?構建一個自主打造媲美?ElementPlus?的組件庫2023-10-10