Question

我有一个谷歌地图，我希望它显示不同的经销商，现在我有完美的地图工作标记到位一切，但我想为每个标记添加一个独特的标题，但我很难得到是的，如果我添加标题选项，那么该标题在所有标记上显示相同。

所以我需要一种在每个标记上显示唯一标题的方法，这是我的代码：

＆＃13;

// If you're adding a number of markers, you may want to drop them on the map
// consecutively rather than all at once. This example shows how to use
// window.setTimeout() to space your markers' animation.
var centerSA = new google.maps.LatLng(-30.289471, 24.284893);
var neighborhoods = [
  new google.maps.LatLng(-33.880754, 18.634368),
  new google.maps.LatLng(-33.873804, 18.634843),
  new google.maps.LatLng(-34.112384, 18.844713),
  new google.maps.LatLng(-34.082823, 18.840496),
  new google.maps.LatLng(-29.492389, 31.218657),
  new google.maps.LatLng(-33.863724, 18.578321),
  new google.maps.LatLng(-29.857765, 31.021630),
  new google.maps.LatLng(-26.028311, 28.004132),
  new google.maps.LatLng(-34.031815, 23.045850),
  new google.maps.LatLng(-34.053906, 23.370542),
  new google.maps.LatLng(-33.963073, 22.459156),
  new google.maps.LatLng(-32.989910, 27.872604),
  new google.maps.LatLng(-33.302933, 26.523438),
  new google.maps.LatLng(-28.768805, 32.019887),
  new google.maps.LatLng(-27.645871, 27.229928),
  new google.maps.LatLng(-28.236912, 28.308702),
  new google.maps.LatLng(-25.872222, 29.235887),
  new google.maps.LatLng(-27.751827, 29.936295),
  new google.maps.LatLng(-28.734564, 24.756509),
  new google.maps.LatLng(-25.656175, 27.255232),
  new google.maps.LatLng(-26.956302, 24.728201),
  new google.maps.LatLng(-26.964996, 26.659299),
  new google.maps.LatLng(-26.808988, 27.829341),
  new google.maps.LatLng(-26.489940, 28.383779),
  new google.maps.LatLng(-26.459522, 29.465437),
  new google.maps.LatLng(-28.411019, 21.251776),
  new google.maps.LatLng(-22.556783, 17.065234),
  new google.maps.LatLng(-22.951268, 14.515005),
  new google.maps.LatLng(-34.408175, 19.253408),
  new google.maps.LatLng(-28.803741, 24.707523)
];

var markers = [];
var map;

function initialize() {
  var mapOptions = {
    zoom: 6,
    center: centerSA
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
           if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(function (position) {
             initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
             map.setCenter(initialLocation);
         });
     }
}
        
function drop() {
  clearMarkers();
  for (var i = 0; i < neighborhoods.length; i++) {
    addMarkerWithTimeout(neighborhoods[i], i * 200);
  }
}
        
function addMarkerWithTimeout(position, timeout) {
  window.setTimeout(function() {
    markers.push(new google.maps.Marker({
      position: position,
      map: map,
      animation: google.maps.Animation.DROP
    }));
  }, timeout);
}
function clearMarkers() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

<head>
      <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: ;
        padding-top: 55px;
      }

      /*
      Provide the following styles for both ID and class,
      where ID represents an actual existing "panel" with
      JS bound to its name, and the class is just non-map
      content that may already have a different ID with
      JS bound to its name.
      */

    </style>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
</head>
<body>
      <div id="panel" style="margin-left: -52px">
    <p>
     <a id="drop" onclick="drop()" class="btn btn-warning">Show Resellers</a>  
    </p>
     </div>
    <div id="map-canvas"></div>
  </body>

＆＃13;

Answer 1

将标题添加到- UIViewController2 - Add UIView programmatically数组中，并使其成为数组数组：

neighborhoods

然后更改函数var neighborhoods = [ [new google.maps.LatLng(-33.880754, 18.634368), "title 1"], [new google.maps.LatLng(-33.873804, 18.634843), "title 2"], [new google.maps.LatLng(-34.112384, 18.844713), "title 3"], [new google.maps.LatLng(-34.082823, 18.840496), "title 4"], ...以接受addMarkerWithTimeout参数，并在创建标记时添加该参数：

title

最后，在function addMarkerWithTimeout(position, timeout, title) { window.setTimeout(function() { markers.push(new google.maps.Marker({ position: position, map: map, animation: google.maps.Animation.DROP, title: title })); }, timeout); }函数调用中更改函数drop以包含title（neighborhood [i] [1]）：

addMarkerWithTimeout

另请注意，function drop() { clearMarkers(); for (var i = 0; i < neighborhoods.length; i++) { addMarkerWithTimeout(neighborhoods[i][0], i * 200, neighborhoods[i][1]); } } param现在为position，而不是neighborhoods[i][0]。

工作小提琴：http://jsfiddle.net/10bdh0d6/

多个谷歌地图标记的多个单独标题

1 个答案: