vue使用高德地图实现搜索功能和获取经纬度

要想实现高德地图的相关操作，需要注册并登录高德地图开发平台申请密钥，然后安装高德地图
步骤1：注册并登录高德地图开发平台（由于我之前注册了，一些操作之前就完成了，这里就不在创建了）


步骤2：安装高德地图加载器

npm  i  @amap/amap-jsapi-loader -S

一、高德地图实现搜索功能
1、效果图如下：

2、代码如下：

<template>
  <div class="container">
    <div ref="mapContainer" class="map-container"></div>
    <div class="search">
      <div>请输入关键字</div>
      <input id="tipinput" placeholder="请输入" />
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  securityJsCode: '你的安全密钥'
}
export default {
  data() {
    return {}
  },
  mounted() {
    this.initMap()
  },
  methods: {
  	initMap() {
      AMapLoader.load({
        key: '你的key值',
        version: '2.0', // 指定要加载的JSAPI的版本，缺省时默认为 1.4.15
        plugins: ['AMap.AutoComplete', 'AMap.PlaceSearch'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 初始化地图
          var map = new AMap.Map(this.$refs.mapContainer, {
            viewMode: '2D', //  是否为3D地图模式
            zoom: 13, // 初始化地图级别
            center: [103.834228, 36.060798], // 中心点坐标
            resizeEnable: true
          })

          // 搜索
          var autoOptions = {
            input: 'tipinput'
          }
          AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {
            var auto = new AMap.AutoComplete(autoOptions)
            var placeSearch = new AMap.PlaceSearch({
              map: map
            })
            // 构造地点查询类
            auto.on('select', select) // 注册监听，当选中某条记录时会触发
            function select(e) {
              placeSearch.setCity(e.poi.adcode)
              placeSearch.search(e.poi.name) // 关键字查询查询
            }
          })
        })
        .catch((e) => {
          console.log(e)
        })
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 9;
  .map-container {
    width: 100%;
    height: 100%;
  }
  .search {
    position: absolute;
    top: 2%;
    left: 2%;
    z-index: 99;
  }
}
</style>

二、高德地图获取经纬度

1、效果图如下：

<template>
  <div class="container">
    <div ref="mapContainer" class="map-container"></div>
    <div class="latAndLong">
      <div>获取经纬度</div>
      <input id="lnglat" type="text" value="103.834228, 36.060798" />
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  securityJsCode: '你的安全密钥'
}
export default {
  data() {
    return {}
  },
  mounted() {
    this.initMap()
  },
  methods:{
  	initMap() {
      AMapLoader.load({
        key: '你的key值',
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.AutoComplete', 'AMap.PlaceSearch'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 初始化地图
          var map = new AMap.Map(this.$refs.mapContainer, {
            viewMode: '2D', //  是否为3D地图模式
            zoom: 13, // 初始化地图级别
            center: [103.834228, 36.060798], // 中心点坐标
            resizeEnable: true
          })

          // 获取经纬度
          var $ = function (elementId) {
            return document.getElementById(elementId)
          }
          var lnglatInput = $('lnglat')
          map.on('click', function (e) {
            lnglatInput.value = e.lnglat.toString()
          })
        })
        .catch((e) => {
          console.log(e)
        })
    },
  }
}