用Vue3管理后台项目实现高德地图的选点丨本际云推荐

用Vue3管理后台项目实现高德地图的选点

介绍

你好，我是本际云服务器推荐网的小编小本本。最近客户有一个项目需求：添加门店的地址和经纬度。目前最好的方式就是让用户在地图上搜索或者直接点击获取点的经纬度等详细信息。接下来我将为大家介绍具体的实现方法。

用Vue3管理后台项目实现高德地图的选点

实现方法

登录高德开放平台

首先，我们需要登录高德开放平台，创建应用，添加Key，并选择Web端(JSAPI)，生成Key和安全密钥。

引入地图JSAPI

项目中使用了官方推荐的JSAPILoader来加载地图，并安装官方npm包@amap/amap-jsapi-loader，并配置安全密钥。

  <script setup>
  import AMapLoader from '@amap/amap-jsapi-loader';
  window._AMapSecurityConfig = {
  securityJsCode: '你申请的安全密钥',
  };
  </script>

初始化地图

创建一个id为mapContainer的div元素，调用initMap方法初始化相关地图插件。

  <script setup>
  const map = shallowRef(null);
  let AMapObj;
  function initMap() {
  AMapLoader.load({
  key: '你申请的Key',
  version: '2.0',
  }).then(AMap => {
  AMapObj = AMap;
  map.value = new AMap.Map('mapContainer');
  })
  }
  </script>

地图选点

现在我们有两种选点方法：搜索选点和直接点击。

搜索选点

使用element-plus的autocomplete组件结合地图搜索服务实现下拉选择地点。

点击选点

借助地图点击事件获取地点的经纬度信息，然后使用地图逆地理编码api解析出地址信息选择地点之后同步绘制marker标记，同时将marker移动到地图中心点并设置缩放比例。

组件化使用

将上述流程全部封装到一个组件中，通过v-model绑定所选地点的详细信息，方便选择地点之后将信息同步到父组件。

  <template>

  <div class="map-wrapper">

  <div id="mapcontainer"></div>

  <div class="search-box">

  <el-autocomplete

  v-model="keyword"

  :fetch-suggestions="handleSearch"

  :trigger-on-focus="false"

  clearable

  placeholder="输入城市+关键字搜索"

  @select="handleSelect"

  style="width: 300px"

  />

  <el-input

  v-model="location.longitude"

  placeholder="点击地图选择经度"

  maxlength="15"

  readonly

  style="width: 150px; margin: 0 5px"

  ></el-input>

  &
                                                        原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7272.html

用Vue3管理后台项目实现高德地图的选点

介绍

实现方法

登录高德开放平台

引入地图JSAPI

初始化地图

地图选点

搜索选点

点击选点

组件化使用

相关推荐