高德地图初始化

      AMapLoader.load({

        key: 'XXXXXX', // 开发者Key必填

        version: '2.0' // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15

      }).then((AMap) => {

        const map = new AMap.Map('container', {

          //设置地图容器id

          resizeEnable: true,

          center: [val.location.lng, val.location.lat],

          zoomEnable: false,

          autoFitView: true,

          dragEnable: false,

          zoom: [2, 22] //初始化地图级别

        })

        // var overlays = map.getAllOverlays()

        AMap.plugin(['AMap.PlaceSearch'], function () {

          var placeSearch = new AMap.PlaceSearch({

            map

          })

          select(val)

          function select(val) {

            allPoi.value = val

            var circle = new AMap.Circle({

              center: new AMap.LngLat(val?.location?.lng ?? '', val?.location?.lat ?? ''), // 圆心位置

              radius: 800,

              autoFitView: true,

              strokeColor: '#6C77F9',

              strokeOpacity: 0,

              strokeWeight: 0,

              fillColor: '#6C77F9',

              fillOpacity: 0.3

            })

            placeSearch.search(val?.name ?? '', ()=> {

              // 注:获取坑货高德搜索完自己创建的标点覆盖物

              var overlays = map.getAllOverlays()

              // 移除点,坑我好久

              map.remove(overlays)

              // placeSearch.render.markerList.clear()

              // 添加自定义标点(清除完再添加)

              map.add(circle)

              map.setFitView()

            })

          }

        })

效果:::

      })

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值