代码之家 › 专栏 › 技术社区 › elusivesmoke

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

google-maps-markers google-maps-api-3 google-maps api javascript

-1

elusivesmoke · 技术社区 · 7 年前

剧本是这样的:

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



    });

1 回复 | 直到 7 年前

Rituparna sonowal 7 年前

做这样的事!我不是一个专家,但根据你的问题,我分享的方式,我认为我会这样做。

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

最后,如果它能帮助你解决问题,不要忘记接受它。