Google Maps API V3带有链接的多个标记

时间:2014-04-15 15:49:02

标签: javascript html google-maps google-maps-api-3

晚上好! 我一直在研究这个问题,有些人已经成功完成了这个问题,但是想知道我究竟如何链接 - 多个标记 - 用html中的href。

function initialize() {
    var myLatlng = new google.maps.LatLng(52.20937113722553, 8.713742727890349 );

    var mapOptions = {
      zoom: 12,
      center: myLatlng,
      zoomControl: false,
      panControl: true,
      panControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT
      },
      streetViewControl: false
    }

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

    var marker = new google.maps.Marker({
        position: myLatlng,
        title:""
    });

    // To add the marker to the map, call setMap();
    marker.setMap(map);
  }
  google.maps.event.addDomListener(window, 'load', initialize);

首先,我需要一个包含多个标记的数组,然后我需要通过链接来访问它们。 任何帮助将非常感激! 干杯


这就是解决方案,我几乎找不到它

 var stationList = [
  {"latlng":[52.20937113722553,8.713742727890349],name:"Text"},
  {"latlng":[52.21033098818561,8.714000219955778],name:"Text2"}
];

var infoWnd, mapCanvas;

function initialize() {
  //Creates a map object.
  var mapDiv = document.getElementById("map-canvas");
  mapCanvas = new google.maps.Map(mapDiv);
  mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);

  //Creates a infowindow object.
  infoWnd = new google.maps.InfoWindow();

  //Mapping markers on the map
  var bounds = new google.maps.LatLngBounds();
  var station, i, latlng;
  for (i in stationList) {
    //Creates a marker
    station = stationList[i];
    latlng = new google.maps.LatLng(station.latlng[0], station.latlng[1]);
    bounds.extend(latlng);
    var marker = createMarker(
      mapCanvas, latlng, station.name
    );

    //Creates a sidebar button for the marker
    createMarkerButton(marker);
  }
  //Fits the map bounds
  mapCanvas.fitBounds(bounds);
}
function createMarker(map, latlng, title) {
  //Creates a marker
  var marker = new google.maps.Marker({
    position : latlng,
    map : map,
    title : title
  });

  //The infoWindow is opened when the sidebar button is clicked
  google.maps.event.addListener(marker, "click", function(){
    infoWnd.setContent("<strong>" + title + "</title>");
    infoWnd.open(map, marker);
  });
  return marker;
}

function createMarkerButton(marker) {
  //Creates a sidebar button
  var ul = document.getElementById("marker_list");
  var li = document.createElement("li");
  var title = marker.getTitle();
  li.innerHTML = title;
  ul.appendChild(li);

  //Trigger a click event to marker when the button is clicked.
  google.maps.event.addDomListener(li, "click", function(){
    google.maps.event.trigger(marker, "click");
  });
}
google.maps.event.addDomListener(window, "load", initialize);

0 个答案:

没有答案