因此,作为作业的一部分,我们必须使用 Google Maps API 设计 map ,该 API 需要使用多个信息窗口和自定义标记。我已经成功了前两个,但我似乎在图像上挣扎?我可以简单地将图像添加到数组中吗?如果可以,如何正确格式化它?
这是我当前的代码
//Beginning of Function
function initialise() {
//Get mapArea in HTML, create map based around latlong
var map = new google.maps.Map(document.getElementById('mapArea'), {
zoom: 16,
center: new google.maps.LatLng(53.470639, -2.238996),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//add array of locations and markers
var locations = [
['Geoffrey Manton Building', 53.469272, -2.237179,'http://labs.google.com/ridefinder/images/mm_20_purple.png'],
['All Saints Building', 53.471086, -2.238541,'http://labs.google.com/ridefinder/images/mm_20_red.png'],
['Business and Law Schools', 53.470575, -2.239673,'http://labs.google.com/ridefinder/images/mm_20_green.png'],
['John Dalton', 53.471964, -2.240392,'http://labs.google.com/ridefinder/images/mm_20_blue.png'],
];
//declare variable marker as i
var marker, i;
//Declare new infowindow for locations
var infowindow = new google.maps.InfoWindow();
//add marker to each location
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,
icon: locations[i][3]
});
//Create marker functionality, allow infowindow opening
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialise);
最佳答案
您可以将图像添加到阵列中。这样就好了。
var locations = [
['Geoffrey Manton Building', 53.469272, -2.237179, 'http://labs.google.com/ridefinder/images/mm_20_purple.png', 'http://placehold.it/100x100'],
['All Saints Building', 53.471086, -2.238541, 'http://labs.google.com/ridefinder/images/mm_20_red.png', 'http://placehold.it/100x200'],
['Business and Law Schools', 53.470575, -2.239673, 'http://labs.google.com/ridefinder/images/mm_20_green.png', 'http://placehold.it/100x50'],
['John Dalton', 53.471964, -2.240392, 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 'http://placehold.it/200x200']];
然后使用数组中所需的任何 HTML 标记和信息构建信息窗口内容:
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
var html = '<h4>' + locations[i][0] + '</h4>';
html += '<img src="' + locations[i][4] + '" />';
infowindow.setContent(html);
infowindow.open(map, marker);
}
})(marker, i));
请注意,我已将您的主函数名称从 initialise
更改为 initialize
,并将元素 id 从 mapArea
映射到 map Canvas
。
关于javascript - 将图像添加到多个谷歌地图信息窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29771959/