Gaud map point aggregation error

Recently, I encountered such a metaphysical problem when working on a project:

When writing the Gaode map, add an overlay except Jinhua City to cover other cities and cannot be clicked. Click to get coordinate points in Jinhua City. Such a business,

 It's all normal here, the code is here

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) //关键字查询查询
  // }) //注册监听,当选中某条记录时会触发
}

A searchable requirement is added later

This is Gaode's api, you can get the coordinates after selecting, and then I made a punctuation event here, changing the visual center to the punctuation obtained, and put the level at 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)
}

There is no problem with the functions, but after the search, there is a problem with zooming in and out of the map, and the console library reports an error.

It can be seen that what he reported here is the fault of VG, that is to say, the point polymer is out of order. Here, the editor has thought for a long time and tried many methods, but none of them work. Finally, considering that the scaling error may be caused by the hierarchy, it needs to be set. A maxzoom, otherwise there will be problems with polymer confusion.

At the same time, you need to set a zooms attribute, which is an attribute for setting the hierarchical interval, and it is an array.

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

Guess you like

Origin blog.csdn.net/css_javascrpit/article/details/131456133