使用高德地图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' //设置文本标注方位
    });

 四:效果展示

 五:总结

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

五花肉三七分

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值