如何在前端展现高德地图（定位，搜索框，等功能）

原创已于 2023-05-04 15:24:02 修改 · 3.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#地图

于 2022-07-16 10:22:14 首次发布

本文详细介绍了如何在Vue项目中配置和使用高德地图API，包括在高德控制台获取开发者Key，引入vue-amap插件，初始化地图组件，设置定位和搜索功能，以及响应地图点击事件来更新位置信息。

第一步：

你得要在高德地图开发者社区申请一个秘钥（包括key以及安全秘钥）为下面开发做准备：

我的应用 | 高德控制台高德开放平台官网控制台提供了高德开发者Key管理，Key可视化分析等功能。https://console.amap.com/dev/key/app 第二步：

写代码：

①在main.js文件中引入amap，秘钥，安全密钥以及所需要的包文件：

        import AMap from 'vue-amap';

        window._AMapSecurityConfig = {
          securityJsCode:'af38748ce1f62fbd663586a4a790528b',
        }
        Vue.use(AMap);
        // 初始化vue-amap
        AMap.initAMapApiLoader({
          // 高德key
          key: 'c808b6f78842725debf439da734393c0',
          // 插件集合 （插件按需引入）
          plugin: [ 'AMap.Autocomplete','AMap.Geolocation', 'AMap.Geocode',         'AMap.ToolBar', 'AMap.PlaceSearch'],

          v: '1.4.4'

        });

② 在vue展示界面写入组件

<el-form-item label-width="150px" label="设置位置：">
  <div class="amap-page-container">
    <div :style="{width:'80%',height:'300px'}">
      <el-amap-search-box
        class="search-box"
        :search-option="searchOption"
        :on-search-result="onSearchResult"
      ></el-amap-search-box>
      <el-amap :amap-manager="amapManager" vid="amap" :plugin="plugin" ref="amap" :events="events" class="amap-demo" :center="center">
        <el-amap-marker  :position="center"></el-amap-marker>
      </el-amap>
      <a>{{ this.input }}</a>
    </div>
  </div>
  <el-button type="primary" icon="el-icon-search" size="medium"  :events="plugin.events"> 位置 </el-button>
</el-form-item>

import{ AMapManager }from"vue-amap";
let amapManager =new AMapManager();
let Geocoder = null;

③，在初始化变量中写入

//初始化定位
searchOption:{
  city:"合肥",
  citylimit:false,
},
center:[120.19,30.26],

// 显示搜索条件
showSearch: true,
name: undefined,
plugin: [
  {
    pName: 'Geocoder',
    events:{
      init(o) {
        Geocoder=o
        // o 是高德地图定位插件实例
        o.getAddress(self.center, function (status, result) {
          if (status === "complete" && result.info === "OK") {
            //result.regeocode.formattedAddress就是具体位置
            self.input = result.regeocode.formattedAddress;
            //对搜索组件的input进行赋值
            self.$refs.searchBox.keyword = self.input;

          }
        });
      },
    },
  },
  {
    showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
    pName: "Geolocation", // AMap-Geolocation 定位插件
    events: {
      init(o) {
        //getCurrentPosition 获取当前位置的方法
        //注意 虽然进页面就会调用这个方法，但是data()中center要有默认值，不然会报错
        o.getCurrentPosition((status, result) => {
          if (result && result.position) {
            let lng = result.position.lng;
            let lat = result.position.lat;
            self.center = [lng, lat];
            self.loaded = true;
            self.zoom = 14;
            self.$nextTick();
          }
        });
      },
    },
  },
],
events:{
  click:(e)=> {
    self.center = [e.lnglat.lng, e.lnglat.lat];
    self.BusinessForm.center = self.center
    Geocoder.getAddress(self.center, function (status, result) { //根据坐标获取位置
      if (status === "complete" && result.info === "OK") {
        self.$refs.searchBox.keyword = self.input;
      }
    });
  }
},