高德地图API-鼠标点击地图获取经纬度坐标（关键操作）

高德地图API-鼠标点击地图获取经纬度坐标（关键操作）
效果图：

有了经纬度坐标，就可以得到城市的：adcode区域编码

html版本
```
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>根据ip定位</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> 
    <style type="text/css">
       html,body,#container{
           height:100%;
       }
    </style>
</head>
<body>
    <div id="container"></div>
    <div class="info" id="text">
        请用鼠标在地图上操作试试
    </div>
    <div class="input-card" style="width:16rem">
        <h4>地图点击相关事件</h4>
        <div>
          <div class="input-item">
            <button id="clickOn" class="btn" style="margin-right:1rem;">绑定事件</button>
            <button id="clickOff" class="btn">解绑事件</button>
          </div>
        </div>
    </div>
 
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=填入高德Web端key&plugin=AMap.CitySearch"></script>
<script type="text/javascript">
var map;
var marker;
var ilon = 114.468668;
var ilat = 38.03703;
 
    var map = new AMap.Map("container", {
        zoom: 13,
    });
  
// 实例化点标记
marker = new AMap.Marker({
     icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
     position: [ilon, ilat],
     offset: new AMap.Pixel(-25, -60)
 });
map.setZoomAndCenter(13, [ilon, ilat]);
map.add(marker)
   
function showInfoDbClick(e){
    var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置双击了地图！'
    document.querySelector("#text").innerText = text;
}
function showInfoMove(){
    var text = '您移动了您的鼠标！'
    document.querySelector("#text").innerText = text;
}
// 事件绑定
function clickOn(){
    console.log('绑定成功')  
    map.on('click', function (e) {
        map.clearMap();
        //console.log(e.lnglat);
        marker = new AMap.Marker({
            icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
            position: [e.lnglat.lng, e.lnglat.lat],
            offset: new AMap.Pixel(-25, -60)
        });
    var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置单击了地图！'
    document.querySelector("#text").innerText = text;
    console.log(text)
        map.add(marker);
 
    })
    map.on('dblclick', showInfoDbClick);
    map.on('mousemove', showInfoMove);
 
}
// 解绑事件
function clickOff(){
    log.success("解除事件绑定!"); 
    map.off('click', showInfoClick);
    map.off('dblclick', showInfoDbClick);
    map.off('mousemove', showInfoMove);
}
 
// 给按钮绑定事件
document.getElementById("clickOn").onclick = clickOn;
 
</script>
</body>
</html>
```
转化为vue版本：

使用的是web服务API

map.vue

main.js

这个的web端key是

import App from './App'
import uView from "@/uni_modules/uview-ui"
import AMapLoader from '@amap/amap-jsapi-loader'

Vue.use(uView)

AMapLoader.load({
"key": "",
"version": "2.0"
}).then(() => {
new Vue({
    render: h => h(App)
}).$mount('#app')
})
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
    app
}
}
// #endif
相关阅读:
微服务 | Springboot整合GateWay+Nacos实现动态路由
 金仓数据库KingbaseES安全指南--5.1. 数据库的传输安全
 华为认证网络工程师2022年最新学习路线整理
 MQ消息队列（二）——RabbitMQ进阶，保证消息的可靠性
 python版本3.10.12 pyinstaller打包exe程序出现错误，No module named_bootlocale?
Python之第六章内置容器 --- 字典（映射）
[ROC-RK3568-PC] [Firefly-Android] 10min带你了解PWM的使用
 高压功率放大器是什么东西
 STM32WB55开发(6)----FUS更新
 挖掘文本的奇妙力量：传统与深度方法探索匹配之道
原文地址：https://blog.csdn.net/weixin_73480865/article/details/137915949

效果图：

html版本

转化为vue版本：

map.vue

main.js