1

Google マップ v3 でマーカー (ボンダイ ビーチ) をクリックすると、ポップアップ ウィンドウに画像を表示するにはどうすればよいですか? :

ここにコード：

var locations = [
// Here I would put the Image ['Bondi Beach', -33.890542, 151.274856, 4],
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 7,
  center: new google.maps.LatLng(46.713251, 7.833252),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
});

map.setOptions({styles: styles});
var infowindow = new google.maps.InfoWindow();
var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[i][1], locations[i][2]),
     map: map
  });
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
     return function() {
    infowindow.setContent(locations[i][0]);
    infowindow.open(map, marker);
     }
   })(marker, i));
}
4

1 に答える 1

0

これを試して ：

<div id="map" style="width:500px;height:500px;"></div>

脚本 ：

var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 'http://www.destination360.com/australia-south-pacific/australia/images/s/australia-bondi-beach.jpg'],
    /*
    add more locations here on the form :
    [ name, lat, long, img ]
    [ name, lat, long, img ]
    ..
    */
];

function initialize() {
    var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: new google.maps.LatLng(-33.890542, 151.274856),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    var infowindow = new google.maps.InfoWindow();
    var marker, i;

    for (i = 0; i < locations.length; i++) {  
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                var content=locations[i][0]+'<br><img src="'+locations[i][3]+'" style="width:300px;">';
                infowindow.setContent(content);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

デモ

結果:

ここに画像の説明を入力

于 2013-08-13T12:06:57.700 に答える