【vue.js】使用高德地图选择省市区后，再点击确认当前选择的位置

萌村村花杨小花

已于 2022-12-06 11:47:23 修改

阅读量1.7k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端

于 2022-11-25 10:19:26 首次发布

本文链接：https://blog.csdn.net/ysq0317/article/details/128032488

版权

本文介绍了如何在Vue.js项目中集成高德地图，通过申请Web端Key，配置安全秘钥，引入API插件，创建组件，实现在选择省市区后地图自动跳转到选定位置的功能。提供了详细的步骤和最终效果展示。

摘要由CSDN通过智能技术生成

成品展示

在这里插入图片描述

前期准备

先去高德开放平台申请一个web端的key。
管理平台
2022年后申请的key，必须和它生成的secret一起使用。
key和秘钥
可使用服务选择web端
使用设置

在vue项目中，可以通过直接引入js文件，也可以安装vue-amap等插件使用。

使用

安装官方的js API 插件

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

在index.html文件内，把安全秘钥（点击查看官方文档）给引用进去

<script>
  window._AMapSecurityConfig = {
     
    // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',  //安全写法，前面是服务器地址
    // securityJsCode: "xxxkey"  //测试时候的写法
  };
</script>

配置好基础的信息后，就可以开始使用了

使用，新建map.vue，设置成组件使用

<template>
  <div id="container"></div>
</template>
<script type="text/javascript">
</script>

<script>
import AMapLoader from "@amap/amap-jsapi-loader"; //医用文件
let district;
let geoCorder;
let marker;
export default {
   
  props: {
   
    data: {
   
      type: Object
    }
  },
  data() {
   
    return {
   
      map: null,
      polygons: []
    };
  },
  mounted() {
   
    this.initMap();
  },