devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue 使用高德地图，添加点标记 + 点击地图获取坐标 + 带搜索（即地理编码 + 逆地理编码） - 附完整示例_vue3 高德地图搜索定位

作者：不正经 | 2024-02-18 19:04:11

赞

踩

vue3 高德地图搜索定位

高德地图：

与真实世界联通 - 高德开放平台为开发者赋能，将地图精致地呈现在您的应用中

无论基于哪种平台，都可以通过高德开放平台API和SDK，轻松地完成地图的构建工作

目录

 效果

一、介绍

1、官方文档：地图 | 高德地图API

二、准备工作

1、注册/登录账号

2、点击控制台

3、创建应用

4、获取key和密钥，如上图所示

三、安装依赖包

1、安装命令

 2、这是我的版本 

四、使用步骤

1、在index.html文件中引入密钥

2、在vue文件中引入依赖包

3、申明变量并初始化调用

五、完整示例

 效果

一、介绍

1、官方文档：地图 | 高德地图API

地图 | 高德地图API地图，地图sdk，地图JS API，地图定制，自定义地图，地图覆盖物，地图绘制，路线规划，坐标转换，距离/面积计算，距离测量，室内地图，地图显示，地图个性化，地图开发，室内定位icon-default.png?t=N7T8https://lbs.amap.com/product/map#/

二、准备工作

1、注册/登录账号

2、点击控制台

3、创建应用

4、获取key和密钥，如上图所示

注：使用web服务API，如下图所示

三、安装依赖包

1、安装命令

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

 2、这是我的版本 

"@amap/amap-jsapi-loader": "^1.0.1",

四、使用步骤

1、在index.html文件中引入密钥

代码如下（示例）：

  1. <script type="text/javascript">
  2.     window._AMapSecurityConfig = {
  3.       securityJsCode: '', // 你的密钥
  4.     }
  5.   </script>

2、在vue文件中引入依赖包

代码如下（示例）：

import AMapLoader from "@amap/amap-jsapi-loader"

3、申明变量并初始化调用

代码如下（示例）：

  1.  
  2. import { shallowRef, defineEmits, ref, onBeforeUnmount } from 'vue';
  3.  
  4. const map = shallowRef(null);
  5. let AMapObj, placeSearch, marker, geocoder;
  6.  
  7. function initMap(){
  8.   AMapLoader.load({
  9.     key:'',  //设置您的key
  10.     version:"2.0",
  11.     plugins:['AMap.ToolBar','AMap.Driving'],
  12.     AMapUI:{
  13.       version:"1.1",
  14.       plugins:[],
  15.  
  16.     },
  17.     Loca:{
  18.       version:"2.0.0"
  19.     },
  20.   }).then((AMap)=>{
  21.     // console.log(AMap);
  22.     AMapObj = AMap;
  23.     map.value = new AMap.Map("map-box",{
  24.       viewMode:"3D",
  25.       zoom:10,
  26.       zooms:[2,22],
  27.       center: [105.602725,37.076636],
  28.     });
  29.     map.value.on('click', onMapClick);
  30.     AMap.plugin(
  31.       ['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch',
  32.         'AMap.Geocoder','AMap.AutoComplete'],
  33.       () => {
  34.         // 缩放条
  35.         const toolbar = new AMap.ToolBar();
  36.         // 比例尺
  37.         const scale = new AMap.Scale();
  38.         // 定位
  39.         const geolocation = new AMap.Geolocation({
  40.           enableHighAccuracy: true, //是否使用高精度定位，默认:true
  41.           timeout: 10000, //超过10秒后停止定位，默认：5s
  42.           position: 'RT', //定位按钮的停靠位置
  43.           buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
  44.           zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
  45.         });
  46.         geocoder = new AMap.Geocoder({
  47.           city: '全国',
  48.         });
  49.         map.value.addControl(geolocation);
  50.         map.value.addControl(toolbar);
  51.         map.value.addControl(scale);
  52.         placeSearch = new AMap.PlaceSearch({
  53.           // map: map.value,
  54.           city: '全国',
  55.           pageSize: 10, // 单页显示结果条数
  56.           pageIndex: 1, // 页码
  57.           citylimit: false, // 是否强制限制在设置的城市内搜索
  58.           autoFitView: true,
  59.         });
  60.       });
  61.   }).catch(e=>{
  62.     console.log(e);
  63.   })
  64. }
  65.  
  66. initMap();

五、完整示例

Index.html

  1. <!DOCTYPE html>
  2. <html lang="zh_CN" id="htmlRoot">
  3.  
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  7.   <meta name="renderer" content="webkit" />
  8.   <meta name="viewport"
  9.     content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  10.  
  11.   <title>
  12.     <%= title %>
  13.   </title>
  14.   <script type="text/javascript">
  15.     window._AMapSecurityConfig = {
  16.       securityJsCode: '', // 你的密钥
  17.     }
  18.   </script>
  19.   
  20. </head>
  21.  
  22. <body>
  23.   <div id="app">
  24.   </div>
  25. </body>
  26.  
  27. </html>

Map.vue

  1. <template>
  2.   <div class="home">
  3.     <div id="map-box"></div>
  4.     <div class="info-box">
  5.       <a-select
  6.         v-model:value="keyword"
  7.         show-search
  8.         placeholder="输入关键字搜索"
  9.         style="width: 300px"
  10.         :default-active-first-option="false"
  11.         :show-arrow="false"
  12.         :filter-option="false"
  13.         :not-found-content="null"
  14.         @search="handleSearch"
  15.       >
  16.         <a-select-option v-for="item in data" :key="item.id" :value="item.id" @click="handleSelect(item)">
  17.           <div class="d-flex flex-column">
  18.             <span>{{item.name}}</span>
  19.             <span style="font-size: '10px'; color: #999999">{{item.address}}</span>
  20.           </div>
  21.         </a-select-option>
  22.       </a-select>
  23.       <a-tooltip>
  24.         <template #title v-if="coord">点击复制</template>
  25.         <span style="margin: 5px 8px;">
  26.           经纬度：<span class="copy" style="cursor: pointer;" :data-clipboard-text="coord">{{coord}}</span>
  27.         </span>
  28.       </a-tooltip>
  29.     </div>
  30.   </div>
  31. </template>
  32.  
  33. <script lang="ts" setup>
  34. import { shallowRef, ref, onBeforeUnmount } from 'vue';
  35. import AMapLoader from "@amap/amap-jsapi-loader";
  36. import { message } from 'ant-design-vue';
  37. import ClipboardJS from 'clipboard';
  38.    
  39. const clipboard = new ClipboardJS('.copy');
  40.  
  41. clipboard.on('success', function(e) {
  42.   console.log(e);
  43.   console.info('Text:', e.text);
  44.   message.info('复制成功');
  45.   e.clearSelection();
  46. });
  47.  
  48. clipboard.on('error', function(e) {
  49.   if(!e.text) message.error('暂无可复制的内容')
  50. });
  51.  
  52. onBeforeUnmount(() => {
  53.   clipboard.destroy();
  54. })
  55.  
  56. const map = shallowRef(null);
  57. const keyword = ref(null);
  58. const data = ref([]);
  59. const coord = ref('');
  60. let AMapObj, placeSearch, marker, geocoder;
  61.  
  62. function initMap(){
  63.   AMapLoader.load({
  64.     key: '',  //设置您的key
  65.     version: "2.0",
  66.     plugins: ['AMap.ToolBar','AMap.Driving'],
  67.     AMapUI: {
  68.       version: "1.1",
  69.       plugins: [],
  70.  
  71.     },
  72.     Loca:{
  73.       version: "2.0.0"
  74.     },
  75.   }).then((AMap)=>{
  76.     // console.log(AMap);
  77.     AMapObj = AMap;
  78.     map.value = new AMap.Map("map-box",{
  79.       viewMode:"3D",
  80.       zoom:10,
  81.       zooms:[2,22],
  82.       center: [105.602725,37.076636],
  83.     });
  84.     map.value.on('click', onMapClick);
  85.     AMap.plugin(
  86.       ['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch',
  87.         'AMap.Geocoder','AMap.AutoComplete'],
  88.       () => {
  89.         // 缩放条
  90.         const toolbar = new AMap.ToolBar();
  91.         // 比例尺
  92.         const scale = new AMap.Scale();
  93.         // 定位
  94.         const geolocation = new AMap.Geolocation({
  95.           enableHighAccuracy: true, // 是否使用高精度定位，默认:true
  96.           timeout: 10000, // 超过10秒后停止定位，默认：5s
  97.           position: 'RT', // 定位按钮的停靠位置
  98.           buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
  99.           zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点
  100.         });
  101.         geocoder = new AMap.Geocoder({
  102.           city: '全国',
  103.         });
  104.         map.value.addControl(geolocation);
  105.         map.value.addControl(toolbar);
  106.         map.value.addControl(scale);
  107.         placeSearch = new AMap.PlaceSearch({
  108.           city: '全国',
  109.           pageSize: 10, // 单页显示结果条数
  110.           pageIndex: 1, // 页码
  111.           citylimit: false, // 是否强制限制在设置的城市内搜索
  112.           autoFitView: true,
  113.         });
  114.       });
  115.   }).catch(e=>{
  116.     console.log(e);
  117.   })
  118. }
  119.  
  120. // 搜索地图
  121. function handleSearch(str) {
  122.   placeSearch.search(str, (status, result) => {
  123.     console.log(result);
  124.     if (result && typeof result === 'object' && result.poiList) {
  125.       const list = result.poiList.pois;
  126.       list.forEach(item => {
  127.         item.value = item.name;
  128.         item.label = item.name;
  129.       });
  130.       data.value = list
  131.     }
  132.   });
  133. }
  134. // 点击地图
  135. function onMapClick(e) {
  136.   coord.value = e.lnglat.lng + ',' + e.lnglat.lat
  137.   geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function(status, result) {
  138.     if (status === 'complete' && result.info === 'OK') {
  139.       // result为对应的地理位置详细信息
  140.       keyword.value = result.regeocode.formattedAddress
  141.     }
  142.   })
  143.   drawMarker(e.lnglat)
  144. }
  145. // 点击搜索项
  146. function handleSelect(item) {
  147.   console.log(item);
  148.   drawMarker(item.location)
  149.   if (item.location != null) {
  150.     coord.value = item.location.lng + ',' + item.location.lat
  151.   }
  152. }
  153. // 绘制地点marker
  154. function drawMarker(location) {
  155.   if (location == null) return
  156.   let longitude = location.lng, latitude = location.lat
  157.   if (marker) {
  158.     marker.setMap(null);
  159.   }
  160.   marker = new AMapObj.Marker({
  161.     position: new AMapObj.LngLat(longitude, latitude),
  162.     anchor: 'bottom-center',
  163.   });
  164.   marker.on('click', () => {
  165.     coord.value = location;
  166.   })
  167.   map.value.add(marker);
  168.   map.value.setZoomAndCenter(16, [longitude, latitude]);
  169. }
  170.  
  171. initMap();
  172.  
  173. </script>
  174.  
  175. <style lang="less" scoped>
  176. .home{
  177.   height: 500px;
  178.   width: 100%;
  179.   padding: 0px;
  180.   margin: 0px;
  181.   position: relative;
  182.  
  183.   .info-box {
  184.     position: absolute;
  185.     top: 8px;
  186.     right: 8px;
  187.     width: 300px;
  188.     background-color: #1f1f1f;
  189.     display: flex;
  190.     flex-direction: column;
  191.   }
  192. }
  193. #map-box{
  194.   height: 100%;
  195.   width: 100%;
  196.   padding: 0px;
  197.   margin: 0px;
  198. }
  199. </style>
  200.  
  201. <style scoped>
  202. :deep() .amap-logo {
  203.   display: none !important;
  204. }
  205. :deep() .amap-copyright {
  206.   display: none !important;
  207. }
  208. </style>

注：clipboard一键复制的详细使用方法参考地址

https://mp.csdn.net/mp_blog/creation/editor/131308740

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号