vue集成高德地图

最新推荐文章于 2024-09-14 14:07:29 发布

南腻河魂

最新推荐文章于 2024-09-14 14:07:29 发布

阅读量791

点赞数

文章标签： java

本文链接：https://blog.csdn.net/weixin_44890199/article/details/103116060

版权

这篇博客详细介绍了如何利用高德地图API创建地图实例、设置容器、添加标记、监听地图点击事件以及创建InfoWindow显示经纬度信息。通过示例代码，开发者可以学习到如何在网页中集成高德地图并实现交互功能。

摘要由CSDN通过智能技术生成

高德地图

添加链接描述
创建key
在这里插入图片描述
进入开发平台
开发文档

1.点标记
在public的index引入标签

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>`在这里插入代码片`

2.创建一个容器存放地图

<div id="container" class="zamap">    </div>

3.给容器div设置大小，否则无法显示(ps:开始没注意,找了半天bug)

 .zamap {
   height: 100vh ;
   width: 100%
}

4.4.在methods中写一个调用地图的方法:

mapLoad(){
      // 创建地图实例
      var map = new AMap.Map("container", {
        zoom: 13,
        center:[118.851759,32.068897], //视频中心点
      });

      // 创建 infoWindow 实例
      var infoWindow = new AMap.InfoWindow({
        content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
      });

      //自定义点击事件
      var clickHandler = function(e) {
        console.log('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
        this.lng=e.lnglat.getLng(),
            this.lat=e.lnglat.getLat(),
        infoWindow.open(map, [this.lng,this.lat]);
        // infoWindow.open(map, map.getCenter());
      };
      // 绑定事件
      map.on('click', clickHandler);

      // 创建一个 Marker 实例：
      var marker = new AMap.Marker({
        position: new AMap.LngLat(118.851759,32.068897),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '中山',
        icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
      });
      // 将创建的点标记添加到已有的地图实例：
      map.add(marker);
    }