Question

如何为我的两个标记添加标签，这样当您点击标记时，它会显示有关它的更多详细信息，以及如何更改＆＃34;访问点2＆＃34;的图标。到另一个标记

＆＃13;

function initialize() {

    var myLatlng = new google.maps.LatLng(-26.322402,31.142249),
        map = new google.maps.Map(document.getElementById('google-map-default'), {
            zoom: 14,
            center: myLatlng
        }),
        marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "We are here!"
        });

    var accessPoint1 = new google.maps.LatLng(-26.315402,31.123924),
        marker1 = new google.maps.Marker({
            position: accessPoint1,
            map: map,
            title: "Access Point 1"
        }); 

    var accessPoint2 = new google.maps.LatLng(-26.316700,31.138043),
        marker2 = new google.maps.Marker({
            position: accessPoint2,
            map: map,
            title: "Access Point 2"
        }); 
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

#google-map-default {
height: 200px;
}

＆＃13;

<div id="google-map-default"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

＆＃13;

上面的代码位于一个名为maps.mini.js的文件中，目前工作正常。我只需按照上面的说明对其进行修改

Answer 1

对于您的marker1，您可以

    var my_contentString1 = 'my text content 1... ' ;

    var my_infowindow1 = new google.maps.InfoWindow({
      content: my_contentString1
    });

    var accessPoint1 = new google.maps.LatLng(-26.315402,31.123924),
    marker1 = new google.maps.Marker({
        position: accessPoint1,
        map: map,
        title: "Access Point 1"
    });

    marker1.addListener('click', function() {
      my_infowindow1.open(map, marker);
    });

对marker2

执行相同的操作

Answer 2

这是一个可能更强大和可扩展的解决方案，它使用包含位置（标记）的数组和单个InfoWindow对象。有了这个，您可以根据需要添加任意数量的位置，而无需复制其余的代码......

function initialize() {

  var myLatlng = new google.maps.LatLng(-26.322402, 31.142249);

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 13,
    center: myLatlng
  });

  var infowindow = new google.maps.InfoWindow();

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: "We are here!"
  });

  var locations = [

    [new google.maps.LatLng(-26.315402, 31.123924), 'Access Point 1', 'Custom text 1'],
    [new google.maps.LatLng(-26.316700, 31.138043), 'Access Point 2', 'Custom text 2']
  ];

  for (var i = 0; i < locations.length; i++) {

    var marker = new google.maps.Marker({
      position: locations[i][0],
      map: map,
      title: locations[i][1]
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {

      return function() {
        infowindow.setContent(locations[i][2]);
        infowindow.open(map, marker);
      }

    })(marker, i));
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas {
  height: 200px;
}

<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>

Answer 3

我最终这样做对我来说非常好用

＆＃13;

 	<script type="text/javascript">
	    var locations = [
	      ['ap7', -26.303139, 31.093508, 7],
	      ['ap6', -26.322402, 31.142249, 6],
	      ['ap5', -26.316700, 31.138043, 5],
	      ['ap4', -26.315402, 31.123924, 4],
	      ['ap3', -26.329244, 31.150478, 3],
	      ['ap2', -26.309525, 31.134632, 2],
	      ['ap1', -26.289923, 31.140195, 1]
	    ];

	    var map = new google.maps.Map(document.getElementById('map'), {
	      zoom: 14,
	      center: new google.maps.LatLng(-26.309525, 31.134632),
	      mapTypeId: google.maps.MapTypeId.ROADMAP
	    });

	    var infowindow = new google.maps.InfoWindow();

	    var marker, i;

	    for (i = 0; i < locations.length; i++) {  
	      marker = new google.maps.Marker({
	        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
	        map: map
	      });

	      google.maps.event.addListener(marker, 'click', (function(marker, i) {
	        return function() {
	          infowindow.setContent(locations[i][0]);
	          infowindow.open(map, marker);
	        }
	      })(marker, i));
	    }
	</script>

＆＃13;

在谷歌地图标记上添加标签和图标

3 个答案: