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

Myth丶恋晨 2022-12-22 09:06 215阅读 0赞

## nuxt项目中使用的地点定位 ##

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

```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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTQzMTk5OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/e3ea8fac818141d4a93e0851e2432b5a.png