使用高德地图api实现拖动地图后重新回到原处

Posted 2022-10-28 五花肉三七分

一：问题描述

        我在一个有限大小的div容器内使用高德地图api定位了一个位置，并且添加了marker点，当我拖动地图查看其他位置时，有时候拖的太远，导致最开始定位那个地方不好找（找不到）。

 二：解决思路

1. 高德地图api创建一个地图
2. 添加标记点
3. 添加lebel描述
4. 拖动后回到原处

三：代码展示

1. 引入高德地图api

//在html头部引入
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你在高德开放平台申请的key值"></script>

     2, 在相应文件中使用

容器：<div id="map"></div>
在生命周期中使用（或者其他方式）
let map = new AMap.Map('map',
          center:this.position,
          resizeEnable: true,
          zoom: 15,
          showIndoorMap: false
        );
        let bounds = map.getBounds();//进行回到初始位置的方法
        map.setLimitBounds(bounds);
        let marker = new AMap.Marker(//添加标记点
            position: this.position,
            map: map
          );
        marker.setMap(map);
        marker.setLabel(
          content: "哈哈哈", //设置文本标注内容
          direction: 'bottom' //设置文本标注方位
    );

 四：效果展示

 五：总结

欢迎大家进行各种好玩有用的分享。