高德地图API-定位以及地址标点使用（vue）

最新推荐文章于 2024-10-15 09:21:05 发布

pany_k

最新推荐文章于 2024-10-15 09:21:05 发布

阅读量2.1k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_49431999/article/details/109791704

版权

nuxt项目中使用的地点定位

以下代码封装成了一个组件，传入数据即可生效
效果图：
在这里插入图片描述

```css
<template>
  <div class="container_wrapper">
    <div id="container" class="icon"></div>
  </div>
</template>

<script>
export default {
  props: ["hotelList"],
  data() {
    return {
      zIndex: 100, // 海量点图层叠加的顺序
      map: null, //高德地图
      cityName:this.$route.query.cityName //获取路由上的定位地点
    };
  },
  watch: {
    hotelList() {
      this.showDot();
    },
  },
  mounted() {
    // 高德地图
    // 优化判断，如果已经存在地图，就不再生成，否则创建一个
    if (!window.AMap) {
      window.onLoad = () => {
        this.mapInit();
        this.showDot();
      };
      // api 地址
      var url =
        "https://webapi.amap.com/maps?v=1.4.15&key=93931147e105d92dbe0c2d9486668381&callback=onLoad";
      // 创建一个 script dom 元素
      var jsapi = document.createElement("script");
      // 设定 script 标签属性
      jsapi.charset = "utf-8";
      jsapi.src = url;
      // 将api文件引入到页面中, 加载完毕以后就会调用回调函数 onLoad
      document.head.appendChild(jsapi);
    } else {
      this.mapInit();
      this.showDot();
    }
  },
  methods: {
    // 封装显示标点
    showDot() {
      // 创建显示标点
      // 先判断是否存在地图
      if (this.map && this.hotelList) {
        this.map.clearMap();
        //遍历数据
        const markers = this.hotelList.map((v, index) => {
          const position = new AMap.LngLat(
            v.location.longitude,
            v.location.latitude
          );
           //界面上的1-10标点
          var marker = new AMap.Marker({
            content: `<div class='icon'>${index + 1}</div>`,
            position,
            title: v.name,
            zIndex: 100 - index,
          });
          marker.on("click", () => {
            marker.setzIndex(this.zIndex);
            this.zIndex++;
          });
          return marker;
        });
        // 将创建的点标记添加到已有的地图实例：
        this.map.add(markers);
        // this.map.add([]);
        // 自动适配到对应当前标记集的位置
        this.map.setFitView();
      }
    },

    // 地图初始化
    mapInit() {
      this.map = new AMap.Map("container", {
        zoom: 13,
      });
      if (!this.cityName) {
        // 定位，使用IP定位方法
        AMap.plugin("AMap.CitySearch", () => {
          var citySearch = new AMap.CitySearch();
          citySearch.getLocalCity((status, result) => {
            if (status === "complete" && result.info === "OK") {
              this.$router.push({ path: `/hotel?cityName=${result.city}` });
              this.$message.success("定位当前城市：" + result.city);
            }
          });
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container_wrapper {
  width: 410px;
  height: 260px;
}
#container {
  width: 100%;
  height: 100%;
  /deep/ .icon {
    width: 22px;
    height: 36px;
    text-align: center;
    background: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png);
    background-size: 22px 36px;
    color: #fff;
  }
}
</style>