h5使用高德地图手动拖动地图选择位置

Posted 2023-05-03

您好，使用高德地图手动拖动地图选择位置，首先需要在H5页面中引入高德地图的JS API，然后实例化一个地图对象，并设置地图的中心点，最后调用地图对象的setStatus方法，设置地图的拖动状态，即可实现手动拖动地图选择位置的功能。 参考技术A h5使用高德地图手动拖动地图选择位置如果说您想选择位置的话，您直接点击定位按钮的输入框直接在里面选择，自己要选择的位置就可以了，不需要自动定位也是可以自动手动拖动拖动地图去选择位置的 参考技术B 在使用H5的高德地图时，可以手动通过拖动地图来选择位置。首先，您需要设置一个地图中心，然后使用鼠标拖动地图，查看想要搜索的位置。随后，可以根据搜索结果精确定位您要选择的位置。

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

一：问题描述

        我在一个有限大小的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' //设置文本标注方位
    );

 四：效果展示

 五：总结

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