?

1.首先如果沒有key的話需要在高德開發(fā)平臺申請key。
2.安裝

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

3.容器：

<template>
  <div>
    <div class="info">
      <h4>獲取地圖級別與中心點坐標</h4>
      <p>當前級別：<span id="map-zoom">11</span></p>
      <p>當前中心點：<span id="map-center">121.498586,31.239637</span></p>
    </div>
    <div class="input-card">
      <h4>鼠標左鍵獲取經緯度：</h4>
      <div class="input-item">
        <input type="text" readonly="true" id="lnglat" />
      </div>
    </div>

    <div id="map"></div>
  </div>
</template> 

4.容器樣式：

#map {
  margin: 50px auto;
  width: 800px;
  height: 500px;
}

5.在組件中引入所需的?API。

import AMapLoader from '@amap/amap-jsapi-loader'; // 使用加載器加載JSAPI，可以避免異步加載、重復加載等常見錯誤加載錯誤
import { shallowRef } from '@vue/reactivity';
import { onMounted } from '@vue/runtime-core';

6.創(chuàng)建一個 Marker 實例。

let markerPoint = new AMap.Marker({
    position: [121.939253, 29.905078], // 基點坐標
    offset: new AMap.Pixel(-12, -32), // //標記點相對偏移量，可以固定其地址，不隨著地圖縮放而偏移
    draggable: false, //點標記對象是否可拖拽移動
    defaultCursor: 'pointer'
 });
 map.add(markerPoint); // 地圖添加標記

7.定義樣式：

// 方法一
var startIcon = new AMap.Icon({
	size: new AMap.Size(25, 34),// 圖標尺寸
    image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',// 圖標的取圖地址
    imageSize: new AMap.Size(135, 40),// 圖標所用圖片大小
    imageOffset: new AMap.Pixel(-9, -3)// 圖標取圖偏移量
});
// 將 icon 傳入 marker
var startMarker = new AMap.Marker({
	position: new AMap.LngLat(116.35,39.89),
    icon: startIcon,
    offset: new AMap.Pixel(-13, -30)
});
startMarker.setMap(map);//設置地圖標記

// 方法二
let marker = new AMap.Marker({
	// icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
    position: [116.406315, 39.908775],
    offset: new AMap.Pixel(-13, -30),//標記點相對偏移量，可以固定其地址，不隨著地圖縮放而偏移
    icon: new AMap.Icon({
    	size: new AMap.Size(40, 50),  //圖標的大小
        image: "https://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png",
        imageOffset: new AMap.Pixel(0, -60)
	})
});
map.add(marker);

?顯示地圖層級與中心點信息：

function logMapinfo(){
	let zoom = map.getZoom(); //獲取當前地圖級別
	let center = map.getCenter(); //獲取當前地圖中心位置
    document.querySelector("#map-zoom").innerText = zoom;
    document.querySelector("#map-center").innerText = center.toString();
};
//綁定地圖移動與縮放事件
map.on('moveend', logMapinfo);
map.on('zoomend', logMapinfo);

獲取經緯度坐標:
?

//為地圖注冊click事件獲取鼠標點擊出的經緯度坐標
map.on('click', function(e) {
	document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
});

整體代碼：
?文章來源地址http://www.zghlxwxcb.cn/news/detail-509918.html

<template>
  <div>
    <div class="info">
      <h4>獲取地圖級別與中心點坐標</h4>
      <p>當前級別：<span id="map-zoom">11</span></p>
      <p>當前中心點：<span id="map-center">121.498586,31.239637</span></p>
    </div>
    <div class="input-card">
      <h4>鼠標左鍵獲取經緯度：</h4>
      <div class="input-item">
        <input type="text" readonly="true" id="lnglat" />
      </div>
    </div>

    <div id="map"></div>
  </div>
</template> 

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'; // 使用加載器加載JSAPI，可以避免異步加載、重復加載等常見錯誤加載錯誤
import { shallowRef } from '@vue/reactivity';
import { onMounted } from '@vue/runtime-core';

const map = shallowRef(null); // 初始化地圖
function initMap() {
  AMapLoader.load({
    key: 'e6cf30fd79d7b556ee881ddd0281e8d0', // 申請好的Web端開發(fā)者Key，首次調用 load 時必填
    version: '2.0', // 指定要加載的 JSAPI 的版本，缺省時默認為 1.4.15
    plugins: [
      'AMap.Scale', //工具條，控制地圖的縮放、平移等
      'AMap.ToolBar', //比例尺，顯示當前地圖中心的比例尺
      'AMap.Geolocation', //定位，提供了獲取用戶當前準確位置、所在城市的方法
      'AMap.HawkEye', //鷹眼，顯示縮略圖
    ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      let map = new AMap.Map('map', {
        //設置地圖容器id
        zoom: 15, //初始化地圖層級
        viewMode: '3D', //是否為3D地圖模式

        center: [113.98331263696, 35.288301920621], //初始化地圖中心點位置
        dragEnable: true, //禁止鼠標拖拽
        scrollWheel: true, //鼠標滾輪放大縮小
        doubleClickZoom: true, //雙擊放大縮小
        keyboardEnable: true, //鍵盤控制放大縮小移動旋轉
      });
      map.setDefaultCursor('pointer'); //使用CSS默認樣式定義地圖上的鼠標樣式（default/pointer/move/crosshair）
      map.addControl(new AMap.Scale()); //異步同時加載多個插件
      map.addControl(new AMap.ToolBar());
      map.addControl(new AMap.Geolocation());
      let HawkEye = new AMap.HawkEye({
        position: 'LT', //控件?？课恢茫↙T/RT/LB/RB）
      });
      map.addControl(HawkEye);
      map.add(
        new AMap.Marker({
          position: map.getCenter(),
        })
      );
      // map.add(marker); // 地圖添加標記
      AMapLoader.load({
        //可多次調用load
        plugins: ['AMap.MapType'],
      })
        .then((AMap) => {
          map.addControl(new AMap.MapType());
        })
        .catch((e) => {
          console.error(e);
        });
      // 顯示地圖層級與中心點信息
      function logMapinfo() {
        let zoom = map.getZoom(); //獲取當前地圖級別
        let center = map.getCenter(); //獲取當前地圖中心位置
      }
      //綁定地圖移動與縮放事件
      map.on('moveend', logMapinfo);
      map.on('zoomend', logMapinfo);
      //為地圖注冊click事件獲取鼠標點擊出的經緯度坐標
      map.on('click', function (e) {
        document.getElementById('lnglat').value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
      });
      let infoWindow = new AMap.InfoWindow({
        //創(chuàng)建信息窗體
        isCustom: false, //使用自定義窗體
        anchor: 'top-right', //信息窗體的三角所在位置
        content: `<h4>信息窗體</h4>`, //信息窗體的內容可以是任意html片段
        offset: new AMap.Pixel(16, -45),
      });
      infoWindow.open(map, [121.939253, 29.905078]); //填寫想要窗體信息指示的坐標
    })
    .catch((e) => {
      console.log(e);
    });
}

// 調用地圖初始化函數：onMounted 函數會在 DOM 初始化完成后調用，建議在 mounted 函數中調用地圖初始化方法
onMounted(() => {
  initMap();
});
</script>

<style>
#map {
  margin: 50px auto;
  width: 100%;
  height: 500px;
}
</style>

到了這里，關于vue3高德地圖點擊標點的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！