高德地图设置多个圆点,只有最后一个生效circleMarker.setOptions

Question

<script>

  var map = new AMap.Map('map', {
    // viewMode: '3D',
    zoom: 4,
    center: [ 108, 34]
  })
  for(var i=0;i<capitals.length;i+=1){
    var center = capitals[i].center;
    var circleMarker = new AMap.CircleMarker({
      center:center,
      radius:10+Math.random()*10,
      strokeColor:'white',
      strokeWeight:2,
      strokeOpacity:0.5,
      fillColor:'rgba(0,0,255,1)',
      fillOpacity:0.5,
      zIndex:10,
      bubble:true,
      cursor:'pointer',
      clickable: true
    })
    circleMarker.setMap(map)
  }
  // 接下来在下面重新修改两个指定的经纬度的点的颜色
  circleMarker.setOptions({
      center:[116.740368,33.109056],
      radius:10+Math.random()*10,
      strokeColor:'white',
      strokeWeight:2,
      strokeOpacity:0.5,
      fillColor:'red',
      fillOpacity:0.5,
      zIndex:10,
      bubble:true,
      cursor:'pointer',
      clickable: true
  })
  // 只有下面蓝色生效  ,上面的不生效
  circleMarker.setOptions({
      center:[116.740368,40.109056],
      radius:10+Math.random()*10,
      strokeColor:'white',
      strokeWeight:2,
      strokeOpacity:0.5,
      fillColor:'blue',
      fillOpacity:0.5,
      zIndex:10,
      bubble:true,
      cursor:'pointer',
      clickable: true
  })
  
  // 这是为什么 ,有没有什么办法可以让多点重新设置都生效
</script>

Answer 1

首先你要知道circleMarker是个啥，有一辆车，A开完了B开，B开完了C开，以此类推，最后开车的是Z，那么最后开车的就是Z，就像你的代码，最后circleMarker指向的就是最后一个点，你下面两个setOptions都是针对最后一个点在做设置。

那么要如何才能获取到其他的点呢，你可以把这些点都存到数组中，然后根据下标去获取，也可以把这些点存到对象中，对象的key可以为点信息，比如经纬度等，然后取的时候根据key就可以获取到对应的点。