Question

当我点击谷歌地图上的图标标记时，如何设置文字？

请求是：当我点击图标时，文本应该出现在我点击其他图标上只有选中的图标应该有文字

这是我的代码：

   <!DOCTYPE html>
   <html>
   <head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Marker Clustering</title>
<style>
    /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>
<div id="map"></div>
<script>

  function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: {lat: 45.9356343, lng: 25.9017273}
    });

    var markers = locations.map(function(location, i) {
      return new google.maps.Marker({
        position: location,
        icon: "/resources/service-points.png",

      });
    });

    // Add a marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer(map, markers,
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

  }



  var locations = [
    {lat: 44.426049, lng: 26.047637},
    {lat: 44.428430, lng: 26.140104},
    {lat: 44.487002, lng: 26.078824},
    {lat: 44.431288, lng: 26.110165}
    ]
   </script>
   <script 



src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
</body>
</html>

Answer 1

您应该使用Google提供的InfoWindow对象： * https://developers.google.com/maps/documentation/javascript/infowindows?hl=fr

代码如下所示，创建对象，然后为标记添加一个监听器，以便它可以启动窗口的显示：）

var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });

Answer 2

你可以使用信息窗口

 var contentString = 'my text for this marker'
 var infowindow = new google.maps.InfoWindow({
      content: contentString
    });

  var markers = locations.map(function(location, i) {
      return new google.maps.Marker({
        position: location,
        icon: "/resources/service-points.png",
        title: 'my marker'

      });
    });

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

在这里你可以找到一个谷歌样本https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

谷歌地图api文本onclick文本

2 个答案: