Gaud マップ ポイント集約エラー

最近、プロジェクトに取り組んでいるときに、次のような形而上学的な問題に遭遇しました。

Gaode マップを作成するときに、他の都市をカバーするために金華市以外のオーバーレイを追加しますが、クリックすることはできません。クリックすると金華市の座標点を取得します。このようなビジネス、

 ここではすべて正常です、コードはここにあります

const AMap = window.AMap

const state = reactive({
  mapInput: '',
  drawer: true,
  map: null as any, //地图
  district: null as any
})
const gaodeMap = () => {
  state.map = new AMap.Map('mapGaode', {
    center: [119.64351, 29.05988],
    zoom: 15,
    resizeEnable: true
  })
  state.map.setCity('金华市婺城区') //初始化显示的区域
  //带洞多边形
  new AMap.DistrictSearch({
    extensions: 'all',
    subdistrict: 0
  }).search('婺城区', function (status, result) {
    console.log('99999999')
    console.log(status, result, '----334')
    console.log('11111111')
    // 外多边形坐标数组和内多边形坐标数组
    var outer = [
      new AMap.LngLat(-360, 90, true),
      new AMap.LngLat(-360, -90, true),
      new AMap.LngLat(360, -90, true),
      new AMap.LngLat(360, 90, true)
    ]
    console.log(39)
    console.log(result)
    var holes = result.districtList[0].boundaries
    console.log(41)
    var pathArray = [outer]
    pathArray.push.apply(pathArray, holes)
    var polygon = new AMap.Polygon({
      path: pathArray,
      strokeColor: '#00eeff',
      strokeWeight: 1,
      fillColor: '#71B3ff',
      fillOpacity: 0.5
    })
    polygon.setPath(pathArray)
    state.map.add(polygon)
    console.log(1222)
  })
  //点击事件
  function showInfoClick(e) {
    console.log('您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置单击了地图！')
    emit('mapPopups', [e.lnglat.getLng(), e.lnglat.getLat()], false)
  }
  state.map.on('click', showInfoClick)
  //地图搜索
  //输入提示
  var autoOptions = {
    input: 'tipinput',
    city: '金华'
  }
  var auto = new AMap.Autocomplete(autoOptions)
  console.log(auto)

  console.log(AMap.event.addListener)
  // AMap.event.addListener(auto, 'select', function (e) {
  //   console.log(e)
  //   placeSearch.setCity(e.poi.adcode)
  //   placeSearch.search(e.poi.name) //关键字查询查询
  // }) //注册监听，当选中某条记录时会触发
}

検索可能な要件は後で追加されます

これは AutoNavi の API です。選択すると座標を取得できるので、ここで句読点イベントを作成し、視覚的な中心を取得した句読点に変更し、レベルを 20 に設定しました。

let timeoutOld: NodeJS.Timeout
const mapInputClick = (queryString: string, callback: (arg: any) => void) => {
  console.log(queryString, callback, '---获取输入方法的建议---')
  var placeSearch = new AMap.PlaceSearch({
    pageSize: 10,
    pageIndex: 1,
    city: '金华'
  }) //构造地点查询类
  placeSearch.search(state.mapInput, function (status, result) {
    console.log(status, result, '-----模糊查询')
    if (result.poiList) {
      result.poiList.pois.map((item) => {
        item.label = item.address
      })
      const results = result.poiList.pois
      clearTimeout(timeoutOld)
      timeoutOld = setTimeout(() => {
        callback(results)
        console.log(results, '模糊查询4')
      }, 1000 * Math.random())
    }
  })
}
const oldManHandleSelect = (value) => {
  //标点
  //设置zoom点击要与初始化一样,不然放大缩小会报错
  // state.map.setMaxZoom = 20
  state.map.setZoomAndCenter(15, [value.location.lng, value.location.lat]) //同时设置地图层级与中心点
  // state.map.setCenter([value.location.lng, value.location.lat])
  // state.map.setZoom(20)
  // center:,
  // zoom: 20,
  // resizeEnable: true
  // })s
  console.log(value)
}

機能には問題ありませんが、検索後の地図の拡大・縮小に問題があり、コンソールライブラリがエラーを報告します。

ここで彼が報告したことは、VG の欠陥、つまりポイントポリマーの故障であることがわかります。ここで、編集者は長い間考え、多くの方法を試しましたが、どれもうまくいきませんでした。 、スケーリング エラーが階層によって引き起こされる可能性があることを考慮して、maxzoom を設定する必要があります。そうしないと、ポリマーの混乱による問題が発生します。

同時に階層間隔を設定するための属性であるzooms属性も設定する必要があり、これは配列になります。

  var placeSearch = new AMap.PlaceSearch({
    pageSize: 10,
    pageIndex: 1,
    zooms:[3.16],
    maxZoom:18,
    city: '金华'
  }) //构造地点查询类