vue使用高德地圖實(shí)現(xiàn)添加點(diǎn)標(biāo)記和獲取點(diǎn)擊位置信息的示例代碼
更新時(shí)間：2024年01月23日 15:07:12 作者：浮橋
這篇文章主要介紹了vue使用高德地圖實(shí)現(xiàn)添加點(diǎn)標(biāo)記和獲取點(diǎn)擊位置信息的示例代碼,文中補(bǔ)充介紹了高德vue-amap使用（一）標(biāo)記點(diǎn)位獲取地址及經(jīng)緯度,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
vue項(xiàng)目中使用高德地圖實(shí)現(xiàn)添加點(diǎn)標(biāo)記和獲取點(diǎn)擊位置信息
<template>
<div class="container">
<div id="map-container">地圖</div>
</div>
</template>
<script>
export default {
name: '',
components: {},
data () {
return {
map: null,
markers: [],
markersPosition: [],
geoCoder: null
}
},
mounted () {
this.mapInit()
},
methods: {
mapInit () {
// eslint-disable-next-line no-undef
this.map = new AMap.Map('map-container', {
zoom: 11, // 級別
// center: [116.397428, 39.90923], // 中心點(diǎn)坐標(biāo)
// layers: [ // 使用多個(gè)圖層
// // 衛(wèi)星
// new AMap.TileLayer.Satellite(),
// // 路網(wǎng)
// new AMap.TileLayer.RoadNet()
// ],
resizeEnable: true
// viewMode: '3D'// 使用3D視圖
})
// eslint-disable-next-line no-undef
this.geoCoder = new AMap.Geocoder()
this.handlerMapClick()
},
handlerMapClick () {
this.map.on('click', (e) => {
// 點(diǎn)擊坐標(biāo)
this.markersPosition = [e.lnglat.lng, e.lnglat.lat]
this.removeMarker()
// 設(shè)置新的標(biāo)記
this.setMapMarker()
// eslint-disable-next-line no-undef
// 根據(jù)坐標(biāo)獲取位置信息
this.geoCoder.getAddress(this.markersPosition, (status, result) => {
if (status === 'complete' && result.regeocode) {
this.address = result.regeocode.formattedAddress
console.log('點(diǎn)擊位置信息：', result.regeocode.formattedAddress)
// id
let adcode = result.regeocode.addressComponent.adcode
// let reg = /.+?(省|市|自治區(qū)|自治州|縣|區(qū))/g
let provinceId = parseInt(adcode.substr(0, 2) + '0000')
let cityId = parseInt(adcode.substr(0, 4) + '00')
let areaId = adcode
console.log('點(diǎn)擊位置的省市區(qū)id：', provinceId, cityId, areaId)
}
})
})
},
// 設(shè)置點(diǎn)擊位置的標(biāo)記
setMapMarker () {
let marker = new AMap.Marker({
map: this.map,
position: this.markersPosition
})
// 將 markers 添加到地圖
this.markers.push(marker)
},
// 添加標(biāo)記
addMarker () {
// 經(jīng)度 緯度
let lng = Math.random() * 135.05 + 73.3
let lat = Math.random() * 53.33 + 3.51
console.log('添加標(biāo)記', [lng, lat])
// 添加標(biāo)記
this.map.setFitView()
let marker = new AMap.Marker({
map: this.map,
position: [lng, lat]
// content: markerContent
// eslint-disable-next-line
// offset: new AMap.Pixel(-13, -30)
})
// 將 markers 添加到地圖
this.markers.push(marker)
this.map.setFitView()`在這里插入代碼片`
// 鼠標(biāo)點(diǎn)擊marker彈出自定義的信息窗體
// eslint-disable-next-line no-undef
AMap.event.addListener(marker, 'click', function (e) {
console.log('點(diǎn)擊marker', e)
})
},
// 刪除之前后的標(biāo)記點(diǎn)
removeMarker () {
if (this.markers) {
this.map.remove(this.markers)
}
}
}
}
</script>
<style scoped lang="scss">
#map-container {
width: 70vw;
height: 70vh;
}
</style>高德vue-amap使用（一）標(biāo)記點(diǎn)位獲取地址及經(jīng)緯度
圖片示例
準(zhǔn)備工作
高德開放平臺：https://lbs.amap.com/
注冊登錄后進(jìn)入控制臺，在應(yīng)用管理下我的應(yīng)用里創(chuàng)建應(yīng)用添加key，就可以看到你的安全密鑰了
安裝與配置
npm安裝
npm install vue-amap --save
main.js配置
import VueAMap from 'vue-amap'; //引入高德地圖
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: '14efe7b9c0a51017c1ee7c641758ba69',
plugin: [ // 這里根據(jù)自己項(xiàng)目按需引入插件
'AMap.Autocomplete',
'AMap.PlaceSearch',
'AMap.Scale',
'AMap.OverView',
'AMap.ToolBar',
'AMap.MapType',
'AMap.PolyEditor',
'AMap.CircleEditor',// 圓形編輯器插件
"AMap.Geolocation", // 定位控件，用來獲取和展示用戶主機(jī)所在的經(jīng)緯度位置
"AMap.Geocoder", // 地理編碼與逆地理編碼服務(wù)，用于地址描述與坐標(biāo)間的相互轉(zhuǎn)換
"AMap.CitySearch",
]
});
window._AMapSecurityConfig = {
securityJsCode:'你的安全密鑰',
}
// 解決高德地圖刷新顯示不出來
const amapKeys = Object.keys(localStorage).filter(key => key.match(/^_AMap_/))
amapKeys.forEach(key => { localStorage.removeItem(key) })使用
父組件
1.html部分
<el-form-item label="設(shè)備位置">
<el-button class="dev-product" @click="openMap()">
<span class="text" :class="mapInfo.lat?'active':''">{{addressTip}}</span><i class="el-icon-more"></i>
</el-button>
<div v-if="mapInfo.lat&&mapInfo.lng">經(jīng)度：{{mapInfo.lng}}，緯度：{{mapInfo.lat}}</div>
</el-form-item><el-dialog title="設(shè)備位置" :visible.sync="map" width="900px" id="map">
<amap @mapDing="getCoordinate" :Nowlnglat="Nowlnglat"></amap>
<div slot="footer" class="dialog-footer">
<el-button @click="map = false" class="button-minwidth">{{$t('Base.cancels')}}</el-button>
<el-button type="primary" @click="submitMap" class="button-minwidth">{{$t('Base.confirms')}}</el-button>
</div>
</el-dialog>2.js部分
<script>
import amap from "../map.vue"
export default {
components: {amap},
data() {
return {
addressTip:'請選擇設(shè)備位置',
map:false,
mapInfo:{},
Nowlnglat:[],//經(jīng)緯度傳值
lng:113.03,
lat:28.13
}
},
methods: {
openMap(){
this.map=true
if(this.lng&&this.lat){
this.mapInfo={
lng:this.lng,
lat:this.lat
}
this.Nowlnglat=[this.lng,this.lat]
}
},
getCoordinate(map){
this.mapInfo=map
},
submitMap(){
this.map=false
this.addressTip=this.mapInfo.address
}
}
</script>3.css部分
<style lang="scss" scoped>
.dev-product{
width: 300px;
height: 32px;
padding: 0 8px;
display: flex;
align-items: center;
::v-deep span{
width: 100%;
overflow: hidden;
display: flex;
justify-content: space-between;
padding-left: 5px;
.text{
width: 92%;
color: #c0c4cc;
}.active{
width: 92%;
color: #303133 ;
}
i{
color:#D8D8D8
}
}
}
</style> 子組件
1.html部分
<template>
<div class="map-container">
<div class="amap-page-container">
<div class="input-search">
<el-input class="inpu" placeholder="請輸入檢索地址" v-model="address">
<template #suffix>
<el-button icon="el-icon-search" @click="searchMap()"></el-button>
</template>
</el-input>
</div>
<el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center" :zoom="zoom" :events='events'>
<!-- 點(diǎn)擊顯示標(biāo)記 -->
<el-amap-marker v-for="(marker, index) in markers" :key="marker.index" :position="marker.position"
:icon="marker.icon" :title="marker.title" :events="marker.events" :visible="marker.visible"
:draggable="marker.draggable" :vid="index"></el-amap-marker>
</el-amap>
<div class="map-address">詳細(xì)地址：{{address}}</div>
<div class="map-mark">
<div class="mark-item">
<span>經(jīng)度</span>
<el-input placeholder="請輸入經(jīng)度" v-model="lng" maxlength="20"></el-input>
</div>
<div class="mark-item">
<span>緯度</span>
<el-input placeholder="請輸入緯度" v-model="lat" maxlength="20"></el-input>
</div>
<el-button class="mark" @click="handelQuery">查詢</el-button>
</div>
</div>
</div>
</template>2.js部分
<script>
export default {
name: "v-map",
props: ["Nowlnglat"],
data() {
let self = this;
return {
map:{
address:'',
lng:'',
lat:''
},
tishi: '',
//地圖相關(guān)
address: '', //獲取的位置
zoom: 13, // 地圖縮放
center: [122.59996, 26.197646], // 初始中心
lng: 0, //經(jīng)緯度
lat: 0,
loaded: false,
markers: [],// 點(diǎn)擊顯示的標(biāo)記默認(rèn)的定位
// 自動(dòng)定位到當(dāng)前位置
plugin: [
{
timeout: 1000, //超過10秒后停止定位
panToLocation: true, //定位成功后將定位到的位置作為地圖中心點(diǎn)
zoomToAccuracy: true, //定位成功后調(diào)整地圖視野范圍使定位位置及精度范圍視野內(nèi)可見
pName: 'Geolocation',
events: {
init(o) {
// o 是高德地圖定位插件實(shí)例
o.getCurrentPosition((status, result) => {
if (result && result.position) {
self.address = result.formattedAddress;
self.lng = result.position.lng;
self.lat = result.position.lat;
self.map.address= self.address
self.map.lng=self.lng
self.map.lat=self.lat
if(self.Nowlnglat[0] != null && self.Nowlnglat[1] != null){
let Clnglat =self.Nowlnglat
self.center = Clnglat
self.markers = [{position: Clnglat,}]
let geocoder = new AMap.Geocoder({radius: 1000});
//根據(jù)坐標(biāo)獲取位置 將經(jīng)緯度 轉(zhuǎn)換后成 地址信息 放在 輸入框展示
geocoder.getAddress(Clnglat,function (status, result) {
if (status === "complete" && result.info === "OK") {
self.address=result.regeocode.formattedAddress
self.lng=self.Nowlnglat[0]
self.lat=self.Nowlnglat[1]
self.map.address= self.address
self.map.lng=self.lng
self.map.lat=self.lat
}
});
}else{
self.center = [self.lng, self.lat];
self.markers = [{position: self.center}]
}
self.loaded = true;
self.$nextTick();
} else {
o.getCityInfo((status, result) => {
if (result && result.center) {
self.address = result.province+result.city;
self.lng = result.center[0];
self.lat = result.center[1];
self.map.address= self.address
self.map.lng=self.lng
self.map.lat=self.lat
if(self.Nowlnglat[0] != null && self.Nowlnglat[1] != null){
let Clnglat =self.Nowlnglat
self.center = Clnglat
self.markers = [{position: Clnglat,}]
let geocoder = new AMap.Geocoder({radius: 1000});
//根據(jù)坐標(biāo)獲取位置 將經(jīng)緯度 轉(zhuǎn)換后成 地址信息 放在 輸入框展示
geocoder.getAddress(Clnglat,function (status, result) {
if (status === "complete" && result.info === "OK") {
self.address=result.regeocode.formattedAddress
self.lng=self.Nowlnglat[0]
self.lat=self.Nowlnglat[1]
self.map.address= self.address
self.map.lng=self.lng
self.map.lat=self.lat
}
});
}else{
self.center = result.center;
self.markers = [{position: self.center,}]
}
self.loaded = true;
self.$nextTick();
}
});
}
});
}
}
}
],
// 點(diǎn)擊地圖獲取當(dāng)前位置并顯示標(biāo)記
events: {
click(e) {
self.chaadd(e.lnglat)
}
}
}
},
created() {
this.$emit('mapDing', this.map);
},
methods: {
searchMap() {
let that = this;
let address = this.address;
that.map.address=that.address
var geocoder = new AMap.Geocoder({
city: "", //城市設(shè)為北京，默認(rèn)：“全國”
});
geocoder.getLocation(address, function(status, result) {
if (status === 'complete' && result.geocodes.length) {
var lnglat = result.geocodes[0].location;
that.center = [lnglat.lng, lnglat.lat]
that.lng = lnglat.lng;
that.lat = lnglat.lat;
that.markers = [{
position: that.center,
}]
that.map.lng=that.lng
that.map.lat=that.lat
} else {
that.address=undefined
that.lng=undefined
that.lat=undefined
that.$message({
type: "error",
message: "根據(jù)地址查詢位置失敗",
});
}
});
that.$emit('mapDing', that.map);
},
chaadd(e) {
let self = this;
let { lng, lat} = e;
self.lng = lng;
self.lat = lat;
self.map.lng=self.lng
self.map.lat=self.lat
self.center = [self.lng, self.lat];
self.loaded = true;
self.markers = [{position: self.center,}]
var geocoder = new AMap.Geocoder({
radius: 1000 //范圍，默認(rèn)：500
});
var marker = new AMap.Marker();
function regeoCode() {
var lnglat = [lng, lat]
geocoder.getAddress(lnglat, function(status, result) {
if (status === 'complete' && result.regeocode) {
self.address = result.regeocode.formattedAddress;
self.map.address=self.address
} else {
self.address=undefined
self.lng=undefined
self.lat=undefined
self.$message({
type: "error",
message: "根據(jù)經(jīng)緯度查詢地址失敗",
});
}
});
}
regeoCode();
self.$emit('mapDing', self.map);
},
handelQuery(){
let self =this
self.map.lng=parseFloat(self.lng)
self.map.lat=parseFloat(self.lat)
self.center = [parseFloat(self.lng), parseFloat(self.lat)];
self.loaded = true;
self.markers = [{
position: self.center,
}]
var geocoder = new AMap.Geocoder({
radius: 1000 //范圍，默認(rèn)：500
});
// var marker = new AMap.Marker();
function regeoCode() {
var lnglat = [parseFloat(self.lng), parseFloat(self.lat)]
geocoder.getAddress(lnglat, function(status, result) {
if (status === 'complete' && result.regeocode) {
self.address = result.regeocode.formattedAddress;
self.map.address=self.address
} else {
self.address=undefined
self.lng=undefined
self.lat=undefined
self.$message({
type: "error",
message: "根據(jù)經(jīng)緯度查詢地址失敗",
});
}
});
}
regeoCode();
self.$emit('mapDing', self.map);
}
}
}
</script>3.css部分
<style lang="scss" scoped>
.map-container{
height: 526px;
width: 100%;
padding: 20px;
display: flex;
justify-content: center;
.amap-page-container {
height: 400px;
width: 100%;
position: relative;
.input-search {
position: absolute;
top: 10px;
right: 0px;
z-index: 5;
width: 400px;
::v-deep .el-input__inner{
width: 271px !important;
padding: 0 10px;
}
.inpu {
width: calc(100% - 10px);
}
::v-deep .el-input__suffix{
position: absolute;
height: 100%;
right: 0 !important;
top: 0;
}
.el-button--medium{
height: 32px;
width: 120px;
background: #f2f6fc;
display: flex;
padding: 0;
align-items: center;
justify-content: center;
}
}
}
.map-address{
margin-top: 15px;
margin-bottom: 15px;
}
.map-mark{
display: flex;
flex-direction: row;
.mark-item{
width: 248px;
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 20px;
span{
white-space: nowrap;
margin-right: 20px;
}
::v-deep .el-input__inner{
width: 200px !important;
}
::v-deep .el-input-number__decrease{
display: none;
}
::v-deep .el-input-number__increase{
display: none;
}
}
.mark{
width: 80px;
height: 32px;
background: #087CF2;
color: #ffffff;
border: 1px solid #087cf2;
padding: 0;
}
}
}
</style> 到此這篇關(guān)于vue項(xiàng)目中使用高德地圖實(shí)現(xiàn)添加點(diǎn)標(biāo)記和獲取點(diǎn)擊位置信息的文章就介紹到這了,更多相關(guān)vue高德地圖獲取點(diǎn)擊位置信息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購物車加減，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
vue異步組件與組件懶加載問題(import不能導(dǎo)入變量字符串路徑)
這篇文章主要介紹了vue異步組件與組件懶加載問題(import不能導(dǎo)入變量字符串路徑)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在Vue中進(jìn)行數(shù)據(jù)分頁的實(shí)現(xiàn)方法
在前端開發(fā)中,數(shù)據(jù)分頁是一個(gè)常見的需求,特別是當(dāng)處理大量數(shù)據(jù)時(shí),Vue作為一款流行的JavaScript框架,提供了強(qiáng)大的工具和生態(tài)系統(tǒng)來實(shí)現(xiàn)數(shù)據(jù)分頁,本文將介紹如何在Vue中進(jìn)行數(shù)據(jù)分頁,以及如何設(shè)計(jì)一個(gè)通用的分頁組件,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue-cli項(xiàng)目中使用Mockjs詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Vue注冊模塊與登錄狀態(tài)的持久化實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Vue注冊模塊與登錄狀態(tài)的持久化實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了解決vue單頁面 回退頁面 keeplive 緩存問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
關(guān)于element-ui的隱藏組件el-scrollbar的使用
這篇文章主要介紹了關(guān)于element-ui的隱藏組件el-scrollbar的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
vue vuex vue-rouert后臺項(xiàng)目——權(quán)限路由（適合初學(xué)）
這篇文章主要介紹了vue vuex vue-rouert后臺項(xiàng)目——權(quán)限路由，通過本文可以很清除的捋清楚vue+vuex+vue-router的關(guān)系，本版本非常簡單，適合初學(xué)者,需要的朋友可以參考下2017-12-12
VUE在for循環(huán)里面根據(jù)內(nèi)容值動(dòng)態(tài)的加入class值的方法
這篇文章主要介紹了VUE在for循環(huán)里面根據(jù)內(nèi)容值動(dòng)態(tài)的加入class值的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
Vue3+TS實(shí)現(xiàn)動(dòng)態(tài)路由權(quán)限的示例詳解
當(dāng)我們在開發(fā)一個(gè)大型的前端應(yīng)用時(shí),動(dòng)態(tài)路由權(quán)限是一個(gè)必不可少的功能,本文將介紹如何使用Vue 3和TypeScript來實(shí)現(xiàn)動(dòng)態(tài)路由權(quán)限,希望對大家有所幫助2024-01-01