Javascript 谷歌地图api文本点击文本_Javascript_Google Maps_Google Maps Api 3

Javascript 谷歌地图api文本点击文本

javascript google-maps google-maps-api-3

Javascript 谷歌地图api文本点击文本,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,当我点击谷歌地图上的图标标记时，如何设置文本请求是：当我点击一个图标时，文本应该出现，而在我点击其他图标时，只有选中的图标应该有文本这是我的密码： <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <ti

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

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

这是我的密码：

   <!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>


标记聚类
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：7，
中心：{纬度：45.9356343，液化天然气：25.9017273}
});
var markers=locations.map（函数（位置，i）{
返回新的google.maps.Marker({
位置:位置,，
图标：“/resources/service points.png”，
});
});
//添加标记群集器以管理标记。
var markerCluster=新的MarkerClusterer（地图、标记、，
{imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
变量位置=[
{lat:44.426049，lng:26.047637}，
{lat:44.428430，lng:26.140104}，
{lat:44.487002，lng:26.078824}，
{拉丁美洲：44.431288，液化天然气：26.110165}
]

您应该使用谷歌的InfoWindow对象： *

代码如下所示，创建对象，然后将侦听器添加到标记中，以便启动窗口显示：）

你可以使用一个信息窗口

 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);
    });

在这里，您可以找到一个谷歌示例

标记的代码与您的代码相同（只添加了一个标题，但您可以删除）。。因此，代码应该按原样放置在应答内容strng和inforwindow中的标记之前和侦听器之后。。

 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);
    });