高德地图点击获取经纬度（vue）

最新推荐文章于 2025-05-27 17:03:00 发布

派大鑫的工作室

最新推荐文章于 2025-05-27 17:03:00 发布

阅读量304

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/Cc040909/article/details/147332615

import AMapLoader from "@amap/amap-jsapi-loader";
import { ref } from "vue";
let lng=ref("");
let lat=ref("");
let map = null;
  window._AMapSecurityConfig = {
    securityJsCode: "「」"//里面填写你的密钥
  };
  AMapLoader.load({
    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then(AMap => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [result, item.lat] // 初始化地图中心点位置
      });
      map.on("click", function (e) {
        // 获取点击位置的经纬度
        var lngLat = e.lnglat;
        lng.value = lngLat.lng;
        lat.value = lngLat.lat;
      });
    })
    .catch(e => {
      console.log(e);
    });
 
  map?.destroy();

#container {
  padding: 0px;
  margin: 0px;
  width: 70%;
  margin-left: 8%;
  margin-bottom: 2%;
  height: 160px;
  z-index: 500;
}

<div id="container"></div>

记得去高德地图API控制台去配置key密钥

高德开放平台 | 高德地图API