如何使用javascript處理谷歌地圖中兩個標記的沖突

Question

我嘗試使用 java 腳本在 Google 地圖上創建多個標記，當兩個標記具有相同的地理位置時會出現問題，如果出現這兩個標記，則在此標記之后出現的其他標記不會顯示在地圖上，如果有人請指導我有解決方案。

var geocoder;
var map;
var geocoder = new google.maps.Geocoder();
var newLocation =[];
var SelectIndex =0;
var Markers =[];
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/pin.jpg';
var InfoWindowContent ;

var MarkerJson = eval('{{$json_data}}');
console.log(MarkerJson);

var Markers = [];
var i=0;

var Media;

for(var Marker in MarkerJson)
{  
  if(MarkerJson[Marker].media_type == '1')
  {
     Media = '{{$BASE_URL}}add_images/thumb/'+MarkerJson[Marker].image_video_name; 
  }
  else
  {
    Media =  '{{$BASE_URL}}add_images/thumb/play_back.png';
  }
  Markers[i] = ['<div class="info_abstract"><div class="first_show">'+MarkerJson[Marker].title+'</div><div class="second_show"><img src="'+Media+'" /></div></div><div class="info_desc"><div class="status_container">'+MarkerJson[Marker].product_status+'</div><div>'+MarkerJson[Marker].desc.substring(0,100)+'</div><div><a class="detail_link"><a href="{{$BASE_URL}}detail-view/'+MarkerJson[Marker].id+'" >View Detail</a></div></div>',Number(MarkerJson[Marker].ad_address_latitude),Number(MarkerJson[Marker].ad_address_longitude),MarkerJson[Marker].city_name,MarkerJson[Marker].desc,i+1];

  i=i+1;
}


geocoder.geocode( { 'address':'{{$CurrentCity}}'}, function(results, status) {
     if (status == google.maps.GeocoderStatus.OK) {
       var mapOpt = {
         center:results[SelectIndex].geometry.location,
         zoom:13,
         mapTypeId:google.maps.MapTypeId.ROADMAP  
      };

      var map=new google.maps.Map(document.getElementById("my-map"),mapOpt);

      var CenterMarker = new google.maps.Marker();

      var infowindow = new google.maps.InfoWindow();

      for(var j=0; j < Markers.length; j++)
      { 
         marker = new google.maps.Marker({
         position: new google.maps.LatLng(Markers[j][1], Markers[j][2]),
         map: map
        });

        InfoWindowContent = Markers[j][0];

       google.maps.event.addListener(marker, 'click', (function(marker, j) {
          return function(InfoWindowContent) {
              infowindow.setContent(Markers[j][0]);
              infowindow.open(map,marker);
            }
         })(marker, j));

      }

   } else {
      alert('{{$lang_var_name.geocode_was_not_successful_for_the_following_reason}}: ' + status);
    }
  });

Answer 1

我接近它的方法是通過增加標記位置的緯度和經度（如果它是重復的），我創建了新數組來保存所有重復的經度和經度，搜索數組，找到經度和經度是否存在，獲取更新的經度和 lng，將其分配給標記的位置，將最后一個 lat lng 存儲在數組中。

function getUpdatedLatLng(lt, ln) {
        var amount = 0.004,
            duplicatedLatLng = null,
            lat = parseFloat(lt),
            lng = parseFloat(ln),
            newLat = 0,
            newLng = 0,
            increasedLat = 0,
            increasedLng = 0;
        if (myNamespace.DuplicatedLatLng.length > 0) {
            var obj = null;
            for (var i = 0; i < myNamespace.DuplicatedLatLng.length; i++) {
                var item = myNamespace.DuplicatedLatLng[i];
                if (item.Lat == lat && item.Lng == lng) {
                    obj = item;
                    break;
                }
            }
            if (obj) { // if latlng found in the duplicated array then increase the lat and lng, create the new latlng obj.
                increasedLat = (++obj.LatIncrease);
                increasedLng = (++obj.LngIncrease);
                newLat = (obj.Lat + (amount * increasedLat));
                newLng = (obj.Lng + (amount * increasedLng));
            } else { // if latlng didn't found in the duplicated array; then create new latlng and add to array.
                newLat = (lat + amount);
                newLng = (lng + amount);
                increasedLat = 1;
                increasedLng = 1;
            }
        }
        else { // if nothing is in the duplicated array, then create the new latlng item and add to the array.
            newLat = (lat + amount);
            newLng = (lng + amount);
            increasedLat = 1;
            increasedLng = 1;
        }
        duplicatedLatLng = new myNamespace.DuplicatedLatLngItem(lat, lng, increasedLat, increasedLng);
        myNamespace.DuplicatedLatLng.push(duplicatedLatLng);

        // return new latlng
        return new google.maps.LatLng(newLat, newLng);
    }

// Constructor: used for updating new latlng. Saved in myNamespace.DuplicatedLatLng array.
DuplicatedLatLngItem: function (lat, lng, latIncrease, lngIncrease) {
    this.Lat = lat;
    this.Lng = lng;
    this.LatIncrease = latIncrease;
    this.LngIncrease = lngIncrease;
}