vue3+高德地图，market事件绑定不生效问题解决方案

从0到零

已于 2024-08-07 11:01:52 修改

阅读量290

点赞数 4

文章标签：前端 javascript 开发语言

于 2024-07-31 11:00:11 首次发布

本文链接：https://blog.csdn.net/HX973661758/article/details/140817174

版权

引言：一切以官方文档为主

准备工作：准备-地图 JS API 2.0|高德地图API (amap.com)

快速上手：快速上手-地图 JS API 2.0|高德地图API (amap.com)

那些害人的帖主不知道在哪学的 position: absolute;

会导致canvas层级覆盖，进而导致内部dom无法交互

所以千万别给容器盒子用position: absolute; 改成固定高或者指定比例高即可

以下是一个demo代码，vue3的

<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, onUnmounted,ref  } from "vue";

let map: any = null;
const userLocation = ref<[number, number]>([116.397428, 39.90923]);

onMounted(() => {
  getUserLocation()
    .then(() => {
      AMapLoader.load({
        key: "XXXXXXXXXXXXX", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
         let map = new AMap.Map("container", {
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: userLocation.value, // 初始化地图中心点位置
          });
          
          let marker = new AMap.Marker({
            position: userLocation.value, //位置
            title: '当前位置',
            // draggable: true,
            zIndex:100
          }); 
          let onMarkerClick = function (e:any) {
            //e.target就是被点击的Marker
            console.log(111);
          }; 
          
          map.add(marker); //添加到地图
          marker.on("click", onMarkerClick); //绑定click事件
          console.log(marker);
        })
        .catch((e) => {
          console.log(e);
        });
    });
});

const getUserLocation = () =>
  new Promise<void>((resolve, reject) => {
    if (!navigator.geolocation) {
      reject(new Error("Geolocation is not supported by this browser."));
    } else {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          userLocation.value = [ 
            position.coords.longitude,
            position.coords.latitude,
          ];
          resolve();
        },
        (error) => {
          reject(error);
        }
      );
    }
  });
 
onUnmounted(() => {
  map?.destroy();
})
</script>

<template>
  <div class="home_div">
    <div id="container"></div>
    </div>
</template>

<style scope>
    .home_div{
    }
    #container{
      width: 100vw;
      height: 100vh;
    }
</style>