Vue引用原生高德地图标注

Vue引用原生高德地图标注

---

一、引用高德？

首先在vue项目中的pubic下的index.html的head中引用。

二、在你的模板中设置一个div你的地图容器

<template>
  <div>
    <div id="GaodeMap" style="width: 50%; height: 550px"></div>
  </div>
</template>

三、script中

<script setup>
import { onMounted, reactive } from "vue";

const lnglats = reactive([
  [
    [108.909074, 34.254225],
    [108.910766, 34.254348],
    [108.910495, 34.253531],
    [108.909502, 34.253571],
  ],
]);
onMounted(() => {
  carGPSIP();
});
const carGPSIP = () => {
  console.log(lnglats);
  var map = new AMap.Map("GaodeMap", { resizeEnable: true }); //初始化地图
  //信息窗口实例
  var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
  //遍历生成多个标记点
  for (var i = 0, marker; i < lnglats.length; i++) {
    var marker = new AMap.Marker({
      position: lnglats[i], //不同标记点的经纬度
      map: map,
    });
    marker.content = "我是第" + (i + 1) + "个Marker";
    marker.on("click", markerClick);
    marker.emit("click", { target: marker }); //默认初始化不出现信息窗体,打开初始化就出现信息窗体
  }
  function markerClick(e) {
    infoWindow.setContent(e.target.content);
    infoWindow.open(map, e.target.getPosition());
  }
  map.setFitView();
};
</script>