element使用vueamap 高德地图定位并回显经纬度

element使用高德地图定位并回显经纬度

一、安装vue-amap

cnpm install vue-amap --save

二、安装完成后，main.js文件中引入

import VueAMap from "vue-amap";
Vue.use(VueAMap);

初始化高德地图，此处需要有一个KEY，可以到高德地图平台上去申请。初始化高德地图的key与插件

注册登陆高德地图开发平台 申请key  https://id.amap.com/ ，

VueAMap.initAMapApiLoader({
  key: "e1dedc6bdd765d46693986ff7ff969f4",
  plugin: [
    "AMap.Autocomplete", //输入提示插件
    "AMap.PlaceSearch", //POI搜索插件
    "AMap.Scale", //右下角缩略图插件 比例尺
    "AMap.OverView", //地图鹰眼插件
    "AMap.ToolBar", //地图工具条
    "AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    "AMap.PolyEditor", //编辑 折线多，边形
    "AMap.CircleEditor", //圆形编辑器插件
    "AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置
  ],
  uiVersion: "1.0"
});

三、 使用

下面开始正式运用此组件库
注：后续所用到的配置并非全面配置，若有不懂或想详细了解，
请移步vue-amap文档:vue-amap文档
文档介绍比较简单，建议到高德官方查看参考手册对照使用

高德参考手册：参考手册

<div class="amap-wrapper">
      <el-amap class="amap-box" vid="map" 
        :zoom="zoom"
        :center="center">
      </el-amap>
    </div>

下边是具体的页面实现，可以直接使用：

<template>
  <el-dialog title="选择坐标" fullscreen
             :modal-append-to-body="false" :append-to-body="true"
    :close-on-click-modal="false"
    @close="closeHandle"
    :visible.sync="dialogVisible">
    <el-row>
      <div class="amap-page-container">
        <el-amap-search-box class="search-box"
                            :search-option="searchOption"
                            :on-search-result="onSearchResult"
                            :center="center"></el-amap-search-box>
        <el-amap :vid="'amap-vue'"
                 :zoom="zoom"
                 :center="center"
                 :events="events">
          <el-amap-marker :position="marker.position"
                          :events="marker.events"
                          :visible="marker.visible"
                          :draggable="marker.draggable"></el-amap-marker>
        </el-amap>
      </div>
    </el-row>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary"
                 @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
  export default {
    data () {
      return {
        q: '',
        zoom: 14,
        center: [116.602489, 40.080734],
        marker: {
          position: [216.602489, 40.080734],
          visible: true,
          draggable: false
        },
        searchOption: {
          city: '全国',
          citylimit: true
        },
        events: {
          click: (e) => {
            this.marker.position = [e.lnglat.lng, e.lnglat.lat]
          }
        },
        dialogVisible: false
      }
    },
    methods: {
      open (lng, lat) {
        if (lng && lat) {
          this.center = [lng, lat]
          this.marker.position = [lng, lat]
        }
        this.dialogVisible = true
      },
      onSearchResult (pois) {
        let latSum = 0
        let lngSum = 0
        pois.forEach(poi => {
          lngSum += poi.lng
          latSum += poi.lat
        })
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        }
        this.center = [center.lng, center.lat]
      },
      submit () {
        this.$emit('callback', this.marker.position)
        this.dialogVisible = false
      },
      // 弹窗关闭时
      closeHandle () {
      }
    }
  }
</script>
 
<style>
  .amap-page-container {
    margin-top: -50px;
    width: 100%;
    height: 450px;
  }
 
  .search-box {
    margin-top: 0px;
    position: relative;
    top: 65px;
    left: 20px;
  }
</style>