vue对高德地图的使用和打点标记

最新推荐文章于 2025-05-28 15:18:26 发布
原创 最新推荐文章于 2025-05-28 15:18:26 发布 · 1.6k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #arcgis #前端

该文章介绍了如何在Vue应用程序中集成高德地图API，包括注册账号创建应用、下载并初始化地图包、实现地图点击添加标记、进行地址逆解析以及设置搜索提示功能。代码示例详细展示了从地图加载到交互功能的实现过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

第一步：进入高德开放平台，跟着步骤注册账号，创建应用

创建时服务平台要选择【web端（JS API）】

第二步：用npm下载包，初始化地图

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

<template>
  <div id="container" class="container"></div>
</template>
 
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  // 安全密钥
  securityJsCode: "95869xxxxxxxxxxxxxxxxx53df87dfb",
};
export default {
  name: "TestIndex",
  methods: {
    initMap() {
      AMapLoader.load({
        // 你申请的Key
        key: "c31bea684xxxxxxxxxxxxxxxxxbbd92442",
        version: "2.0",
        // 需要用到的插件
        plugins: ["AMap.Geocoder", "AMap.AutoComplete"],
      })
        .then((AMap) => {})
        .catch((err) => {
          // 错误
          console.log(err);
        });
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>
 
<style>
.container {
  width: 500px;
  height: 300px;
}
</style>

第三步：实现点击地图添加标记

<template>
  <div id="container" class="container"></div>
</template>
 
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  // 安全密钥
  securityJsCode: "95869abfxxxxxxxxxxxxxxxx53df87dfb",
};
export default {
  name: "TestIndex",
  data() {
    return {
      // 地图实例
      map: null,
      // 标记点
      marker: "",
      // 位置信息
      form: {
        lng: "",
        lat: "",
        address: "",
        //地区编码
        adcode: "",
      },
    };
  },
  methods: {
    initMap() {
      AMapLoader.load({
        // 你申请的Key
        key: "c31bea68xxxxxxxxxxxxxxxxd92442",
        version: "2.0",
        // 需要用到的插件
        plugins: ["AMap.Geocoder", "AMap.AutoComplete"],
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            viewMode: "3D", //是否为3D地图模式
            zoom: 5, //初始化地图级别
            center: [105.602725, 37.076636], //初始化地图中心点位置
          });
          //点击获取经纬度;
          this.map.on("click", (e) => {
            // 获取经纬度
            this.form.lng = e.lnglat.lng;
            this.form.lat = e.lnglat.lat;
            // 清除点
            this.removeMarker();
            // 标记点
            this.setMapMarker();
          });
        })
        .catch((err) => {
          // 错误
          console.log(err);
        });
    },
    // 标记点
    setMapMarker() {
      // 自动适应显示想显示的范围区域
      this.map.setFitView();
      this.marker = new AMap.Marker({
        map: this.map,
        position: [this.form.lng, this.form.lat],
      });
      this.map.setFitView();
      this.map.add(this.marker);
    },
    // 清除点
    removeMarker() {
      if (this.marker) {
        this.map.remove(this.marker);
      }
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>
 
<style>
.container {
  width: 500px;
  height: 300px;
}
</style>
第四步：点击获取详细地址

在初始化地图的时候，实例化逆地理解析的插件：

 //地址逆解析;
          this.geoCoder = new AMap.Geocoder({
            city: "010", //城市设为北京，默认：“全国”
            radius: 1000, //范围，默认：500
          });

 在methods中直接定义一个函数：

// 逆解析地址
    toGeoCoder() {
      let lnglat = [this.form.lng, this.form.lat];
      this.geoCoder.getAddress(lnglat, (status, result) => {
        if (status === "complete" && result.regeocode) {
          this.form.address = result.regeocode.formattedAddress;
        }
      });
    },

第五步：搜索获取相关地区提示

全国需要换成搜索的城市例如'石家庄'

this.AutoComplete = new AMap.AutoComplete({ city: "全国" });

第六步：全部代码

<template>
  <div style="display: flex">
    <div>
      <div>
        <el-select
            v-model="keywords"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
            :clearable="true"
            size="mini"
            @change="currentSelect"
            style="width: 500px"
        >
          <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item"
              class="one-text"
          >
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.district
              }}</span>
          </el-option>
        </el-select>
      </div>
      <div id="container" class="container"></div>
    </div>
    <div class="info-box">
      纬度：{{ form.lat }}
      <br />
      经度：{{ form.lng }}
      <p>详细地址：{{ form.address }}</p>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  // 安全密钥
  securityJsCode: "你申请的密钥",
};
export default {
  name: "TestIndex",
  data() {
    return {
      val:{
        location:{
          lat:'38.017837',
          lng:'114.44082',
        }
      },

      // 地图实例
      map: null,
      // 标记点
      marker: "",
      // 地址逆解析
      geoCoder: null,
      // 搜索提示
      AutoComplete: null,
      // 搜索关键字
      keywords: "",
      // 位置信息
      form: {
        lng: "",
        lat: "",
        address: "",
        adcode: "", //地区编码
      },
      // 搜索节流阀
      loading: false,
      // 搜索提示信息
      options: [],
    };
  },
  mounted() {
    this.initMap();
    this.currentSelect(this.val)
  },
  methods: {
    initMap() {
      AMapLoader.load({
        // 你申请的Key
        key: "你申请的Key",
        version: "2.0",
        // 需要用到的插件
        plugins: ["AMap.Geocoder", "AMap.AutoComplete"],
      })
          .then((AMap) => {
            this.map = new AMap.Map("container", {
              viewMode: "2D", //是否为3D地图模式
              zoom: 5, //初始化地图级别
              center: [105.602725, 37.076636], //初始化地图中心点位置
            });
            //地址逆解析插件
            this.geoCoder = new AMap.Geocoder({
              city: "010", //城市设为北京，默认：“全国”
              radius: 1000, //范围，默认：500
            });
            // 搜索提示插件
            this.AutoComplete = new AMap.AutoComplete({ city: "石家庄" });
            //点击获取经纬度;
            this.map.on("click", (e) => {
              // 获取经纬度
              this.form.lng = e.lnglat.lng;
              this.form.lat = e.lnglat.lat;
              // 清除点
              this.removeMarker();
              // 标记点
              this.setMapMarker(AMap);
            });
          })
          .catch((err) => {
            // 错误
            console.log(err);
          });
    },
    // 标记点
    setMapMarker(AMap) {
      console.log(AMap)
      // 自动适应显示想显示的范围区域
      this.map.setFitView();
      this.marker = new AMap.Marker({
        map: this.map,
        position: [this.form.lng, this.form.lat],
      });
      // 逆解析地址
      this.toGeoCoder();
      this.map.setFitView();
      this.map.add(this.marker);
    },
    // 清除点
    removeMarker() {
      if (this.marker) {
        this.map.remove(this.marker);
      }
    },
    // 逆解析地址
    toGeoCoder() {
      let lnglat = [this.form.lng, this.form.lat];
      this.geoCoder.getAddress(lnglat, (status, result) => {
        if (status === "complete" && result.regeocode) {
          this.form.address = result.regeocode.formattedAddress;
          this.keywords = result.regeocode.formattedAddress
        }
      });
    },
    // 搜索
    remoteMethod(query) {
      console.log(query);
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.AutoComplete.search(query, (status, result) => {
            this.options = result.tips;
            console.log(this.options)
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    // 选中提示
    currentSelect(val) {
      console.log(val)
      // 清空时不执行后面代码
      if (!val) {
        return;
      }
      this.keywords = val.name
      this.form = {
        lng: val.location.lng,
        lat: val.location.lat,
        // address: val.district + val.address,
        // adcode: val.adcode,
      };
      AMapLoader.load({
        // 你申请的Key
        key: "你申请的Key",
        version: "2.0",
        // 需要用到的插件
        plugins: ["AMap.Geocoder", "AMap.AutoComplete"],
      })
          .then((AMap) => {
              this.removeMarker();
              // 标记点
              this.setMapMarker(AMap);
          })
          .catch((err) => {
            // 错误
            console.log(err);
          });
    },
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
}
</style>

纯属记录自己新学的知识以防自己忘记了好查看，觉悟抄袭质疑，如有冒犯请多体谅，感谢！！！

vue2/3 - 实现高德地图海量标记点绘制，高德地图加载海量点，vue使用高德地图给海量点标记，高德地图海量撒点 +快速可视化渲染保证不卡速度快，渲染性能优化解决缓慢问题（丝滑不卡顿方案及示例源码）
高级前端工程师
04-01 7113
vue2，vue3，高德地图，vue高德地图，绘制标记点，标记点非常多如何不卡顿，高德地图api点标记、海量点标记、点聚合，vue中添加高德地图的海量点标记，高德地图通过图层layer实现对海量点的可视化渲染，高德地图几千条数据，点标记Marker转海量标注LabelMarker，海量标点加信息窗体，高德海量点MassMarks，高德地图API之海量标注，PointSimplifier针对海量点展示场景组件，高德地图JS添加海量点，动态新增标记点，地图上非常多标记点很卡怎么办，高德地图海量点上千条同时加载很
vue2 - 实现高德地图标记点位置并绘制圆圈雷达扩散并标注半径值效果，在地图上选中地址点位置后周围画圆形类似水波纹雷达图，vue高德地图上圈选定位并标记半径范围（高德地图圆形围栏，详细示例代码运行）
高级前端工程师
04-02 6607
vue，高德地图画圆动态绘制显示圆半径，高德地图怎么半径画圆，地图画圆测距定位，高德地图绘制弧线 高德地图画圆形区域，高德地图标记范围圆圈，VUE高德地图显示圆形区域并在区域边上标注半径，vue高德地图怎么半径画圆，在地图上圈选标记半径范围，地图绘制圆形以及显示半径地图上画圈显示半径，VUE2实现高德地图绘制自定义区域，动态绘制显示圆半径地图上画圈显示半径，动态显示隐藏圆，地图画圆并且获取圆心坐标和半径，打标记并圈出范围，vue2高德地图如何在地图上画一个圆圈，展示标记位置周边，绘制自定义区域，高德地图画圆
在vue中使用高德地图点击打点，搜索打点，高德地图组件封装
葫芦娃y的博客
01-12 1010
在vue中使用高德地图点击打点，搜索打点，高德地图组件封装
基于百度地图的详细地图打点系统实现
最新发布
weixin_35835018的博客
05-28 1088
地图打点是地理信息系统（GIS）中的基本功能之一，它允许开发者在地图上放置一个或多个标记点，以显示特定地理位置或事件发生的地点。在Web应用中，地图打点广泛应用于地理位置展示、路线规划、房产展示、实时交通监控等多种场景。百度地图API是一组用于Web开发者在网页上嵌入地图和提供相关地理信息服务的编程接口。通过调用API，开发者可以实现地图展示、路径规划、地理编码等多种功能。API的基本结构包括：：用于在网页中嵌入地图。Web服务API：用于获取地图数据，如地理编码和路径规划等。
vue使用高德地图，点标记+轨迹
m0_52769924的博客
09-25 1420
【代码】vue使用高德地图，点标记+轨迹。
vue高德地图打点
Danelxiong的博客
11-10 2116
vue引用高德地图并实现打点获取经纬度
Vue加载高德地图[打点]
qq_46641049的博客
03-10 1289
地图打点
vue 高德地图打点，聚合点
ziyun_zeng的博客
03-28 838
安装：npm install @amap/amap-jsapi-loader。// 将 Marker 实例添加到 MarkerClusterer 中。map.setZoomAndCenter(层级，[经度，纬度])// 创建地图和 MarkerClusterer 实例。map.setCenter([经度, 纬度]);map.setCenter([经度，纬度])map.panTo([经度, 纬度]);map.panTo([经度，纬度])想要平滑过渡到中心点。
vue2使用高德地图实现标记点和窗体
weixin_44283589的博客
12-18 674
封装地图组件 <template> <!-- 标点map --> <div class="initMaped"> <div id="screenMap" class="screenMap"></div> </div> </template> <script> export default { name: "initMarkerMap", props: { iconList:
vue使用高德地图点标记及复杂操作
qq_43528934的博客
02-12 3169
不知道怎么引用的 可以在看下 https://blog.csdn.net/xy19950125/article/details/83213220 上面呢 只是简单的一个点标记 并没有涉及到复杂的操作 而今天要介绍的这个 可以动态切换 动态打点标记 以及其他操作 先看看原型图张什么样 需求1：标记打点 2：点击图标显示详情 3：点击右下角 是进行筛选 4：点击机构名称 弹...
vue3高德地图JS API展示地图中心点 点标记 文字标记 接收参数的点标记群组 新增按钮功能 调用高德路线规划组件
克里斯蒂亚诺更新的博客
11-20 897
【代码】vue3高德地图JS API展示地图中心点 点标记 文字标记 接收参数的点标记群组 新增按钮功能 调用高德路线规划组件。
Vue 使用高德地图，添加点标记 + 点击地图获取坐标 + 带搜索（即地理编码 + 逆地理编码） - 附完整示例
m0_48968874的博客
07-10 8557
与真实世界联通 - 高德开放平台为开发者赋能，将地图精致地呈现在您的应用中无论基于哪种平台，都可以通过高德开放平台API和SDK，轻松地完成地图的构建工作地图 | 高德地图API地图，地图sdk，地图JS API，地图定制，自定义地图，地图覆盖物，地图绘制，路线规划，坐标转换，距离/面积计算，距离测量，室内地图，地图显示，地图个性化，地图开发，室内定位。
vue2/3 高德地图 添加单个固定标点或多个固定标点 点击标点 打开信息窗
小菜鸡，努力中~~
04-16 1672
效果图。
Vue 高德地图点标记
明耀的博客
02-21 1156
/ 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15。// 申请好的Web端开发者Key，首次调用 load 时必填。// 需要使用的的插件列表，如比例尺'AMap.Scale'等。//给每一个点位增加点击事件。//给标记点添加点击事件。//初始化地图中心点位置。//设置地图容器id。
使用高德地图（点标记）完成vue2项目
HQ\(^o^)/的博客
10-02 1951
由于项目 中有要使用高德地图的需求， 我就 傲娇的说，我会使用百度地图，可以改为百度地图不，最终的结果就是要用高德地图，后端小哥哥还特别好的安慰我说，高德地图的用法跟百度地图的用法一样，多看些视频就会了。这话一说，嗯，心放下一半了，但是当我在vue2项目中，真正的使用时，我发现，我啥也不会，(灬ꈍ ꈍ灬)
vue + 高德地图 + 标记点
qq_39417037的博客
04-08 3921
高德地图引入及使用 可参考：vue + 高德地图 + 图例 增加标记点： // 绘制地图 this.map = new AMap.Map('map', { resizeEnable: true, center: [120, 35], // 经纬度 zoom: 12 // 远近 }) // 绘制标记点点 var markerPoint = new AMap.Marker({ position: [120, 35], // 经纬度 offset: ne
vue 高德地图上添加点标记和信息框
m0_65394648的博客
06-30 3059
给高德地图上添加点标记和信息弹出框 将信息展示出来 只是片面仅供参考
vue2使用高德地图api+标记多个标记点、绘制折线（小白总结版
Jdanne的博客
09-02 1245
vue2使用高德地图api+标记多个标记点、绘制折线（小白总结版
vue中实现高德地图上打点，并添加点击事件，
weixin_48076840的博客
12-24 5299
1、在地图上打点，并定义 click 事件 /** * 地图上打点，并定义click事件 * @param map map对象 * @param imgUrl 图像的url地址 * @param data 数据信息 * @param onclick 回调函数 * @returns {AMap.Marker} 返回一个marker对象 */ export function createTrafficEventMarker(map, imgUrl, data, onclick) { le
vue3 高德地图打点
03-31
要在 Vue3 项目中使用高德地图 API 实现地图打点功能，可以按照以下方法完成配置和开发。 #### 1. 引入高德地图 JavaScript API 在项目的 `public/index.html` 文件中引入高德地图的官方脚本。通过指定版本号以及...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值