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

Posted 2023-02-23

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

【英文标题】：Display pop up information on clicking marker in google map

【发布时间】：2019-12-11 14:35:58

【问题描述】：

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

【问题讨论】：

这些信息不足以回答您的问题。您能否告诉我们您是如何设置 Vue 的，以便我们提供有关该部分的更多信息。您提供的代码是地图的 JS，它可能位于 VueJS 中的任何位置

感谢您的回复@Shashwat。我已经编辑了代码。

【参考方案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。

【讨论】：

它显示最后一个 ['Cronulla Beach','Australia', -34.028249, 151.157507, 3] 到所有标记..

您必须创建一个打开个人信息的函数。看我的更新。有用。添加了演示。