Vue（vue-amap） 接入高德地图获取坐标与地址信息

如果您登入高德地图并已那到应用key，请跳过 首先 步骤

首先

注册登陆到高德地图控制台
进入控制台选择应用

选择创建应用

填写应用名称，并选择应用类型，点击确定创建新的应用

创建完成后，选择添加

然后按照要求填写内容，切记一定要选择web端(JS API),填写完后提交当前应用。

添加成功后，在你的引用下方会出现这样一个列表

然后

打开你的项目
npm install vue-amap --save
安装地图依赖

打开你项目中的mian.js文件

将下面复制进去，并替换为你自己应用的key

import VueAMap from 'vue-amap'

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: 'c4de786c74a450ac841ea096528c6ff1',
  plugin: ['AMap.Autocomplete','AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.AMapManager','AMap.Geolocation'],
  v: '1.4.4',
  uiVersion: '1.0.11'
});

新建一个Vuemap.vue组件

以下组件为单个maker，实现效果为点一下地图，获取点击位置坐标与地理位置信息，地图中只有一个定点图标
如果你想单独研究的话可以通过 文档超链接 去更新你的内容

<template>
    <div class="amap-page-container">
        <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult">el-amap-search-box>
      <el-amap ref="map" vid="amapDemo" :amap-manager="amapManager" :center="center" :zoom="12" :plugin="plugin" :events="events" class="amap-demo">
          <el-amap-marker v-if="!!marker" :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable">el-amap-marker>
      el-amap>
    div>
template>
<script>
import VueAMap from 'vue-amap'
const amapManager = new VueAMap.AMapManager();
let Geocoder;
export default {
    name:'amaps',
    data(){
        return{
            amapManager,
            searchOption: {
                city: '全国',
                citylimit: false
            },
            marker:{
              position: [121.329402, 31.228667],
              events: {
                click: (e) => {
                  console.log('点击maker',e)
                  this.marker = null
                },
                dragend: (e) => {
                  console.log('---event---: dragend',e)
                  this.marker.position = [e.lnglat.lng, e.lnglat.lat];
                }
              },
              visible: true,
              draggable: false,
              template: '1',
            },
            center: [121.59996, 31.197646],
            events: {
                init: (o) => {
                    o.getCity(result => {
                        console.log(result)
                    })
                },
                'click': (e) => {
                    console.log(e)
                    if(!!this.marker){
                        this.marker.position = [e.lnglat.lng, e.lnglat.lat]
                    }else{
                        this.marker={
                            position: [e.lnglat.lng, e.lnglat.lat],
                            events: {
                                click: (e) => {
                                    console.log('点击maker',e)
                                    this.marker = null
                                },
                                dragend: (e) => {
                                    console.log('---event---: dragend',e)
                                    this.marker.position = [e.lnglat.lng, e.lnglat.lat];
                                }
                            },
                            visible: true,
                            draggable: false,
                            template: '1',
                        }
                    }
                    Geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function (status, result) { //根据坐标获取位置
                        if (status === "complete" && result.info === "OK") {
                            document.querySelector(".search-box-wrapper input").value=result.regeocode.formattedAddress
                        }
                    });
                }
            },
            // 当前地图需要的拓展插件需在该内容下放置  Geocoder为通过坐标获取地址信息
            plugin: [{
                    pName: 'Geocoder',
                    events: {
                        init(o) {
                            Geocoder = o
                        }
                    },
                }
            ]
        }
    },
     methods: {
     //搜索地址 查询结果
        onSearchResult(pois) {
            console.log(pois)
            if(!!pois.length){
                this.marker.position=[pois[0].lng, pois[0].lat]
                this.center = [pois[0].lng, pois[0].lat]
            }
        }
      }
}
script>
<style>
.search-box{
    border: 1px solid #ccc;
    width: 100%;
}
.search-box-wrapper{
    width: 100%;
}
.amap-page-container{
    width: 500px;
    height: 500px;
    z-index: 999;
}
    .amap-demo {
      height: 300px;
      height: 300px;
    }
  style>

用户可以通过搜索选中地址,点击地图,获取经纬度与地址信息,点击确认按钮可操作传递你的经纬度与地址

内容已更新