Use the Gaode map api to return to the original position after dragging the map

One: Problem description

        I used the Gaode map api to locate a location in a div container of limited size, and added a marker point. When I dragged the map to view other locations, sometimes I dragged too far, which caused the location to be bad at the beginning. Find (can't find).

 Two: Solutions

  1. Gaode map api to create a map
  2. Add marker
  3. add lebel description
  4. Return to original position after dragging

Three: Code display

  1. Introduce Gaode map 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, used in the corresponding file

容器:<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' //设置文本标注方位
    });

 Four: Effect display

 Five: Summary

All kinds of fun and useful sharing are welcome.

Guess you like

Origin blog.csdn.net/m0_50789201/article/details/126542824