如何在谷歌地图中进一步放大以清楚地显示标记

Question

我有四个标记，当我放大到最后一个时会显示它们。

我面临的问题是标记 one 和 four 相互重叠，我无法进一步放大以单击它们？

在不使用 Marker 集群的情况下有什么解决方案吗？

我的部分代码

function addMarker(response, lator, lonor, infowindow) {
    if (response.length > 0) {
        var global_markers = [];
        for (var i = 0; i < response.length; i++) {
            var lat = parseFloat(response[i].latitude);
            var lng = parseFloat(response[i].longititude);
            var dealername = response[i].name;
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(lat, lng),
                    map: map,
                    title: "Dealer name: " + dealername,
                    icon: 'http://maps.google.com/mapfiles/marker.png'
                });
                global_markers[i] = marker;

                google.maps.event.addListener(map, 'click', function() {
                    infowindow.close();
                });
        }
    }
}

这是我的小提琴

http://jsfiddle.net/3VXTL/13/

请告诉我如何解决这个问题？？

Answer 1

一种选择是使标记更小（使用“麻疹”小红做）。

updated fiddle

代码 sn-p：

var response = [{
  "longititude": "78.377665",
  "latitude": "17.439669",
  "name": "one"
}, {
  "longititude": "78.377617",
  "latitude": "17.439692",
  "name": "two"
}, {
  "longititude": "78.377644",
  "latitude": "17.439674",
  "name": "three"
}, {
  "longititude": "78.377665",
  "latitude": "17.439667",
  "name": "four"
}]

initializeCalllater(18.1124372, 79.01929969999999, response);


function initializeCalllater(lator, lonor, response) {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(lator, lonor);
  var myOptions = {
    zoom: 7,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.LARGE
    },
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  google.maps.event.trigger(map, 'resize');
  map.setCenter(new google.maps.LatLng(lator, lonor));
  var infowindow = new google.maps.InfoWindow({});

  addMarker(response, lator, lonor, infowindow);
}

function addMarker(response, lator, lonor, infowindow) {
  if (response.length > 0) {
    var global_markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < response.length; i++) {
      var lat = parseFloat(response[i].latitude);
      var lng = parseFloat(response[i].longititude);
      var dealername = response[i].name;
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map,
        title: "Dealer name: " + dealername,
        icon: {
          url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
          size: new google.maps.Size(7, 7),
          anchor: new google.maps.Point(3.5, 3.5)
        }
      });
      bounds.extend(marker.getPosition());
      global_markers[i] = marker;

      google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
      });
    }
    map.fitBounds(bounds);
  }
}

body,
html,
#map_canvas {
  height: 100%;
  width: 100%;
}

<script src="http://maps.google.com/maps/api/js"></script>
<div id="map_canvas" "></div>

如果这还不够，您可以在单击其中一个时更改重叠标记的 zIndex（例如这个问题：allow user to move marker position back (z-index?) in google maps custom map）。