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
- Gaode map api to create a map
- Add marker
- add lebel description
- Return to original position after dragging
Three: Code display
- 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.