通过 URL 将图像插入 Google Maps infoWindow
Insert image into Google Maps infoWindow via URL
我有一张 Google 地图,显示了一组格式为 Panoramio 缩略图的标记。
我已经为数组中的每个标记设置了 infoWindows,以便在单击标记时显示更大版本的图像。
我的策略是通过 JSON.Stringify 检索 Panoramio 缩略图的 URL,对它们进行 运行 字符串替换以将 "mini_square" 图像大小替换为 "medium" 在 URL 路径中(并删除每端的双引号),然后将 url 作为图像源传递给 infoWindow;单击标记时,我只得到一个 "broken image" 图标。如果有人知道为什么我传递的 URL 没有导致显示图像,那将是一个很大的帮助。
下面是我的代码。
<style>
#map {
width: 100%;
height: 100%;
}
</style>
<script>
pixMap = new google.maps.Map(document.getElementById('map'), pixOptions);
var thumbUrl = "http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=100&minx=-2.494046&miny=53.429721&maxx=-2.00048&maxy=53.528126&size=mini_square&mapfilter=true&callback=?";
var pix_Nfo = new google.maps.InfoWindow({maxWidth: 400});
$.getJSON(thumbUrl, function(data) {
for (var i = 0; i < data.photos.length; i++) {
var item = data.photos[i];
var latLng = new google.maps.LatLng(item.latitude, item.longitude);
var marker = new google.maps.Marker({
position:latLng,
icon: item.photo_file_url
});
marker.setMap(pixMap);
(function(marker, item) {
google.maps.event.addListener(marker, "click", function(e) {
bigPic = JSON.stringify(item.photo_file_url);
var bp = bigPic.replace("mini_square","medium");
//pix_Nfo.setContent('<img src=bp>');
var bpnq = bp.replace(/"/g,"");
pix_Nfo.setContent('<p><src img=bpnq></p>');
pix_Nfo.open(pixMap, marker);
});
})(marker, item);
};
});
</script>
要在 HTML 中显示图像,您需要传入 URL。
google.maps.event.addListener(marker, "click", function(e) {
bigPic = JSON.stringify(item.photo_file_url);
var bp = bigPic.replace("mini_square","medium");
var bpnq = bp.replace(/"/g,"");
pix_Nfo.setContent('<p><img src='+bpnq+'></p>');
pix_Nfo.open(pixMap, marker);
});
// function initialize() {
pixMap = new google.maps.Map(document.getElementById('map'));
var thumbUrl = "http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=100&minx=-2.494046&miny=53.429721&maxx=-2.00048&maxy=53.528126&size=mini_square&mapfilter=true&callback=?";
var pix_Nfo = new google.maps.InfoWindow({
maxWidth: 400
});
$.getJSON(thumbUrl, function(data) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < data.photos.length; i++) {
var item = data.photos[i];
var latLng = new google.maps.LatLng(item.latitude, item.longitude);
bounds.extend(latLng);
var marker = new google.maps.Marker({
position: latLng,
icon: item.photo_file_url
});
marker.setMap(pixMap);
(function(marker, item) {
google.maps.event.addListener(marker, "click", function(e) {
bigPic = JSON.stringify(item.photo_file_url);
var bp = bigPic.replace("mini_square", "medium");
//pix_Nfo.setContent('<img src=bp>');
var bpnq = bp.replace(/"/g, "");
pix_Nfo.setContent('<p><img src=' + bpnq + '></p>');
pix_Nfo.open(pixMap, marker);
// reopen infowindow, so fits in map.
google.maps.event.addListener(pix_Nfo, 'domready', function() {
google.maps.event.trigger(marker, 'click');
});
});
})(marker, item);
};
pixMap.fitBounds(bounds);
});
// }
// google.maps.event.addDomListener(window,'load',initialize);
body,
html,
#map {
width: 100%;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>
我有一张 Google 地图,显示了一组格式为 Panoramio 缩略图的标记。 我已经为数组中的每个标记设置了 infoWindows,以便在单击标记时显示更大版本的图像。
我的策略是通过 JSON.Stringify 检索 Panoramio 缩略图的 URL,对它们进行 运行 字符串替换以将 "mini_square" 图像大小替换为 "medium" 在 URL 路径中(并删除每端的双引号),然后将 url 作为图像源传递给 infoWindow;单击标记时,我只得到一个 "broken image" 图标。如果有人知道为什么我传递的 URL 没有导致显示图像,那将是一个很大的帮助。
下面是我的代码。
<style>
#map {
width: 100%;
height: 100%;
}
</style>
<script>
pixMap = new google.maps.Map(document.getElementById('map'), pixOptions);
var thumbUrl = "http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=100&minx=-2.494046&miny=53.429721&maxx=-2.00048&maxy=53.528126&size=mini_square&mapfilter=true&callback=?";
var pix_Nfo = new google.maps.InfoWindow({maxWidth: 400});
$.getJSON(thumbUrl, function(data) {
for (var i = 0; i < data.photos.length; i++) {
var item = data.photos[i];
var latLng = new google.maps.LatLng(item.latitude, item.longitude);
var marker = new google.maps.Marker({
position:latLng,
icon: item.photo_file_url
});
marker.setMap(pixMap);
(function(marker, item) {
google.maps.event.addListener(marker, "click", function(e) {
bigPic = JSON.stringify(item.photo_file_url);
var bp = bigPic.replace("mini_square","medium");
//pix_Nfo.setContent('<img src=bp>');
var bpnq = bp.replace(/"/g,"");
pix_Nfo.setContent('<p><src img=bpnq></p>');
pix_Nfo.open(pixMap, marker);
});
})(marker, item);
};
});
</script>
要在 HTML 中显示图像,您需要传入 URL。
google.maps.event.addListener(marker, "click", function(e) {
bigPic = JSON.stringify(item.photo_file_url);
var bp = bigPic.replace("mini_square","medium");
var bpnq = bp.replace(/"/g,"");
pix_Nfo.setContent('<p><img src='+bpnq+'></p>');
pix_Nfo.open(pixMap, marker);
});
// function initialize() {
pixMap = new google.maps.Map(document.getElementById('map'));
var thumbUrl = "http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=100&minx=-2.494046&miny=53.429721&maxx=-2.00048&maxy=53.528126&size=mini_square&mapfilter=true&callback=?";
var pix_Nfo = new google.maps.InfoWindow({
maxWidth: 400
});
$.getJSON(thumbUrl, function(data) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < data.photos.length; i++) {
var item = data.photos[i];
var latLng = new google.maps.LatLng(item.latitude, item.longitude);
bounds.extend(latLng);
var marker = new google.maps.Marker({
position: latLng,
icon: item.photo_file_url
});
marker.setMap(pixMap);
(function(marker, item) {
google.maps.event.addListener(marker, "click", function(e) {
bigPic = JSON.stringify(item.photo_file_url);
var bp = bigPic.replace("mini_square", "medium");
//pix_Nfo.setContent('<img src=bp>');
var bpnq = bp.replace(/"/g, "");
pix_Nfo.setContent('<p><img src=' + bpnq + '></p>');
pix_Nfo.open(pixMap, marker);
// reopen infowindow, so fits in map.
google.maps.event.addListener(pix_Nfo, 'domready', function() {
google.maps.event.trigger(marker, 'click');
});
});
})(marker, item);
};
pixMap.fitBounds(bounds);
});
// }
// google.maps.event.addDomListener(window,'load',initialize);
body,
html,
#map {
width: 100%;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>