谷歌地图 JavaScript API。地图标记信息窗口显示[关闭]

Question

我编写了一个脚本来显示多个地图标记并通过邮政编码进行搜索，或者地址也显示多个标记与用户给定位置之间的距离但是..我想显示带有一些内容的 infoWindow写给每个标记...有人可以帮助我吗？

脚本是这样的：

 var features = [
      {
        position: new google.maps.LatLng(38.089374, 23.809245),
        type: 'info'

      }, {
        position: new google.maps.LatLng(37.865212, 23.744748),
        type: 'info'
      }, {
        position: new google.maps.LatLng(37.997172, 23.693429),
        type: 'info'
      }, {
        position: new google.maps.LatLng(37.934769, 23.879542),
        type: 'info'
      }, {
        position: new google.maps.LatLng(38.003720, 23.886767),
        type: 'info'
      }, {
        position: new google.maps.LatLng(38.027083, 23.850951),
        type: 'info'
      }, {
        position: new google.maps.LatLng(37.944077, 23.661457),
        type: 'info'
      }, {
        position: new google.maps.LatLng(38.017348, 23.796585),
        type: 'info'
      }, {
        position: new google.maps.LatLng(37.955754, 23.677229),
        type: 'info'
      }, {
        position: new google.maps.LatLng(37.971261, 23.756350),
        type: 'info'
      }, {
        position: new google.maps.LatLng(37.990022, 23.720621),
        type: 'info'
      }, {
        position: new google.maps.LatLng(38.050031, 23.752440),
        type: 'info'
      }, {
        position: new google.maps.LatLng(38.464754,23.615317),
        type: 'info'
      }, {
        position: new google.maps.LatLng(37.943692, 23.748214),
        type: 'info'
      }, {
        position: new google.maps.LatLng(39.544696, 21.775843),
        type: 'info'
      }, {
        position: new google.maps.LatLng(40.668344, 22.889161),
        type: 'info'
      }, {
        position: new google.maps.LatLng(40.662039, 22.911951),
        type: 'info'
      }, {
        position: new google.maps.LatLng(40.573629, 23.025070),
        type: 'info'
      }, {
        position: new google.maps.LatLng(40.303271, 21.804128),
        type: 'info'
      }

    ];



    // edw oi kaloi oi markers.
    features.forEach(function(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,

        map: map
      });



    });

Answer 1

做这样的事情！我不是专家，但根据您的问题，我正在分享我认为我会做的方式。

请注意，我没有测试代码，所以请检查一下，如果有任何问题，请告诉我。

       var markers = [
       {
           lat: 38.089374, 
           lng: 23.809245,
           type: 'info'

       }, {
           lat: 40.668344,
           lng: 22.889161,
           type: 'info'
       }, {
           lat: 40.573629, 
           lng: 21.804128,
           type: 'info'
       }];
       var bounds = new google.maps.LatLngBounds();
       var mapOptions = { 
         mapTypeId: google.maps.MapTypeId.TERRAIN,
         mapTypeControl: false,
         fullscreenControl: false,
         streetViewControl: false,
         zoomControl: true,
       };
       var mapDiv = document.getElementById('mapdiv');
       var map =  new google.maps.Map(mapDiv, mapOptions);
       var location;
       if( markers.length > 0 ){
          for( var i=0; i<markers.length; i++ ){
              location = new google.maps.LatLng( markers[i].lat, markers[i].lng 
       );
       bounds.extend( location );
       var marker = new google.maps.Marker({
                      position: location,
                      map: map,
                      animation: google.maps.Animation.DROP,
                  });
        var content = '<div class="someclass">Your content goes here.</div>';
        var infowindow = new google.maps.InfoWindow({maxWidth:350});

        google.maps.event.addListener(marker, 'mouseover' ,(function(marker,content,infowindow) {
              return function() {
                     infowindow.setContent(content);
                     infowindow.open(map, marker);
              };
        }) (marker,content,infowindow));
    }
}

最后，如果它可以帮助您解决问题，请不要忘记接受它。