在谷歌地图中点击标记时显示弹出信息

Question

显示弹出信息包括：位置、名称、国家、纬度和经度，通过单击谷歌地图中的每个标记在一个弹出窗口中。我需要显示用户单击的特定标记的所有信息，例如：“位置：邦迪海滩，国家/地区：澳大利亚，纬度：-33.890，经度：151.274”。

<template>
  <div id="map" class="map"></div>
</template>

<script>
mounted() {
  var locations = [
    ['Bondi Beach','Australia',-33.890542, 151.274856, 4],
    ['Coogee Beach','Australia', -33.923036, 151.259052, 5],
    ['Cronulla Beach','Australia', -34.028249, 151.157507, 3] 
  ];

  var count, marker;

  // Init map
  let mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(locations[0][1], locations[0][2]),
    scrollwheel: true
  };

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

  // Create info window
  var infowindow = new google.maps.InfoWindow({
      maxWidth: 350,
      pixelOffset: new google.maps.Size(-10,-25)
  });

  var infoData = [];
  // Add markers
  for (count = 0; count < locations.length; count++) {
    var loan = locations[count][0]
      let myLatlng = new google.maps.LatLng(locations[count][1], locations[count][2]);

      marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: locations[count][0]
      });

  marker.setMap(map);

  // Bind marker click event to open info-window
  google.maps.event.addListener(marker, 'click', function() {

    infowindow.setContent( " " );
    infowindow.open(map);
    infowindow.setPosition(myLatlng);
    });

  }
}
</script>

Answer 1

您可以将信息窗口内容设置为 HTML。 JS fiddle from Google。 谷歌官方documentation。

代码示例：

var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra BeachManly Beach Manly Beach Manly Beach', -33.950198, 151.259302, 1]
];

var count, marker;

// Init map
var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(locations[0][1], locations[0][2]),
    scrollwheel: true,
};

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

// Create info window
var infowindow = new google.maps.InfoWindow({
    maxWidth: 350,
    pixelOffset: new google.maps.Size(-10,-25)
});

var infoFn = function (count) {
    return function (e) {
        var content = '<div>' +
            '<span>Location: ' + locations[count][0] + '</span>' +
            '<span>, Lat: ' + locations[count][1] + '</span>' +
            '<span>, Long: ' + locations[count][2] + '</span>' +
            '</div>';

        infowindow.setContent(content);
        infowindow.open(map);
        infowindow.setPosition(new google.maps.LatLng(locations[count][1], locations[count][2]));
    }
};

// Add markers
for (count = 0; count < locations.length; count++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[count][1], locations[count][2]),
        map: map,
        title: locations[count][0]
    });
    marker.setMap(map);

    let fn = infoFn(count);
    google.maps.event.addListener(marker, 'click', fn);
}

工作demo。