當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue中集成高德地图API实现定位与自定义样式信息窗体

發布時間：2025/3/19 vue 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue中集成高德地图API实现定位与自定义样式信息窗体小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

場景

若依前后端分離版手把手教你本地搭建環境并運行項目：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

在上面將前后端項目搭建起來后，要集成高德地圖實現地圖顯示與定位功能的實現。

然后在地圖的基礎上實現根據坐標進行定位并自定義信息窗體，實現效果如下

然后關掉窗體還可以實現定位標記的圖片

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

登錄高德開放平臺，然后新建應用

https://developer.amap.com/

然后

然后為新建的應用新建key,這里的服務平臺選擇Web端，然后提交

然后就可以獲取到Key，下面代碼中會用到這個Key

然后在Vue項目中安裝高德地圖Amap相關依賴

npm install vue-amap

然后在main.js中引入，將上面的key填入

//引入高德地圖 import VueAMap from 'vue-amap' Vue.use(VueAMap) VueAMap.initAMapApiLoader({key: '你自己的高德地圖的key',plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'],v: '1.4.4',uiVersion: '1.0' })

添加位置

然后編寫地圖組件AMap.vue

<template lang="html"><div style="width:100%;height:800px;"><div class="container"><div class="search-box"><inputv-model="searchKey"type="search"id="search"><button @click="searchByHand">搜索</button><div class="tip-box" id="searchTip"></div><button @click="positionByHand">定位</button></div><el-amap class="amap-box":amap-manager="amapManager":vid="'amap-vue'":zoom="zoom":plugin="plugin":center="center":events="events"><el-amap-marker v-for="(marker, index) in carmarkers" :key="index" :position="marker.position" :vid="index" :content="marker.content" :events="marker.events"></el-amap-marker><el-amap-info-window:position="currentWindow.position":content="currentWindow.content":visible="currentWindow.visible":events="currentWindow.events"></el-amap-info-window></el-amap></div></div> </template><script> import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap' let amapManager = new AMapManager() export default {name:'AMap',data() {let self = thisreturn {carmarkers :[],currentWindow: {position: [116.396624,39.908167],content: '111',events: {},visible: false},address: null,searchKey: '',amapManager,markers: [],searchOption: {city: '全國',citylimit: true},center: [116.396624,39.908167],zoom: 17,lng: 0,lat: 0,loaded: false,events: {init() {lazyAMapApiLoaderInstance.load().then(() => {self.initSearch()})},// 點擊獲取地址的數據click(e) {self.markers = []let { lng, lat } = e.lnglatself.lng = lngself.lat = latself.center = [lng, lat]self.markers.push([lng, lat])// 這里通過高德 SDK 完成。let geocoder = new AMap.Geocoder({radius: 1000,extensions: 'all'})console.log(lng+","+lat) //控制臺打印坐標geocoder.getAddress([lng, lat], function(status, result) {if (status === 'complete' && result.info === 'OK') {if (result && result.regeocode) {console.log(result.regeocode.formattedAddress) //控制臺打印地址self.address = result.regeocode.formattedAddressself.searchKey = result.regeocode.formattedAddressself.$nextTick()}}})}},// 一些工具插件plugin: [{pName: 'Geocoder',events: {init (o) {//console.log("一些工具插件--地址"+o.getAddress())}}},{// 定位pName: 'Geolocation',events: {init(o) {// o是高德地圖定位插件實例o.getCurrentPosition((status, result) => {if (result && result.position) {// 設置經度self.lng = result.position.lng// 設置維度self.lat = result.position.lat// 設置坐標self.center = [self.lng, self.lat]self.markers.push([self.lng, self.lat])// loadself.loaded = true// 頁面渲染好后self.$nextTick()}})}}},{// 工具欄pName: 'ToolBar',events: {init(instance) {//console.log("工具欄:"+instance);}}},{// 鷹眼pName: 'OverView',events: {init(instance) {//console.log("鷹眼:"+instance);}}},{// 地圖類型pName: 'MapType',defaultType: 0,events: {init(instance) {//console.log("地圖類型:"+instance);}}},{// 搜索pName: 'PlaceSearch',events: {init(instance) {//console.log("搜索:"+instance)}}}]}},methods: {initSearch() {let vm = thislet map = this.amapManager.getMap()AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {var poiPicker = new PoiPicker({input: 'search',placeSearchOptions: {map: map,pageSize: 10},suggestContainer: 'searchTip',searchResultsContainer: 'searchTip'})vm.poiPicker = poiPicker// 監聽poi選中信息poiPicker.on('poiPicked', function(poiResult) {// console.log(poiResult)let source = poiResult.sourcelet poi = poiResult.itemif (source !== 'search') {poiPicker.searchByKeyword(poi.name)} else {poiPicker.clearSearchResults()vm.markers = []let lng = poi.location.lnglet lat = poi.location.latlet address = poi.cityname + poi.adname + poi.namevm.center = [lng, lat]vm.markers.push([lng, lat])vm.lng = lngvm.lat = latvm.address = addressvm.searchKey = address}})})},searchByHand() {if (this.searchKey !== '') {this.poiPicker.searchByKeyword(this.searchKey)}},positionByHand() {this.currentWindow = {position: [121.492439,31.233264],content: `<div style="color: #1c84c6;">公眾號:霸道的程序猿</div>`,events: {close: (e) => {this.currentWindow.visible = false}},visible: true }this.carmarkers = [{position:[121.492439,31.233264],content: `<div><img? width=50 height=50 src="https://images.cnblogs.com/cnblogs_com/badaoliumangqizhi/1539113/o_qrcode_for_gh_f76a8d7271eb_258.jpg" alt="汽車"></div>`,events: {click: (e) => {this.currentWindow = {position: this.center,content: `<div style="color: #1c84c6;">公眾號:霸道的程序猿 </div>`,events: {close: (e) => {this.currentWindow.visible = false}},visible: true }}}}]}} } </script><style lang="css"> .container {width: 100%;height: 100%;position: relative;left: 50%;top: 50%;transform: translate3d(-50%, -50%, 0);border: 1px solid #999; } .search-box {position: absolute;z-index: 5;width: 30%;left: 13%;top: 10px;height: 30px; } .search-box input {float: left;width: 80%;height: 100%;border: 1px solid #30ccc1;padding: 0 8px;outline: none; } .search-box button {float: left;width: 20%;height: 100%;background: #30ccc1;border: 1px solid #30ccc1;color: #fff;outline: none; } .tip-box {width: 100%;max-height: 260px;position: absolute;top: 30px;overflow-y: auto;background-color: #fff; } </style>

組件的位置

然后找到需要顯示地圖組件的頁面，這里是首頁，將沒有用的內容刪掉，然后

import AMap from '@/components/Amap/AMap' export default {name: "index",components: {AMap},

引入組件，然后在需要顯示地圖的地方

這樣就能看實現上面需求的功能了

注意其他功能的開發可以參考官方開發文檔

在地圖上點自定義標記，通過

<el-amap-marker v-for="(marker, index) in carmarkers" :key="index" :position="marker.position" :vid="index" :content="marker.content" :events="marker.events"></el-amap-marker>

標簽來實現

然后自定義窗體通過

??????? <el-amap-info-window:position="currentWindow.position":content="currentWindow.content":visible="currentWindow.visible":events="currentWindow.events"></el-amap-info-window>

然后在定位按鈕的點擊事件中

??? positionByHand() {this.currentWindow = {position: [121.492439,31.233264],content: `<div style="color: #1c84c6;">公眾號:霸道的程序猿</div>`,events: {close: (e) => {this.currentWindow.visible = false}},visible: true }this.carmarkers = [{position:[121.492439,31.233264],content: `<div><img? width=50 height=50 src="https://images.cnblogs.com/cnblogs_com/badaoliumangqizhi/1539113/o_qrcode_for_gh_f76a8d7271eb_258.jpg" alt="汽車"></div>`,events: {click: (e) => {this.currentWindow = {position: this.center,content: `<div style="color: #1c84c6;">公眾號:霸道的程序猿 </div>`,events: {close: (e) => {this.currentWindow.visible = false}},visible: true }}}}]}

首先設置自定義窗體的坐標和位置以及要顯示的窗體的內容，然后再設置點標記的圖片覆蓋，并且設置這個點標記圖片的點擊事件也是顯示上面的自定義信息窗體。

總結

以上是生活随笔為你收集整理的Vue中集成高德地图API实现定位与自定义样式信息窗体的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： SpringBoot+zxing+Vue
下一篇： Android+SpringBoot+V