这是为谷歌地图 API 下载的完整 Javascript,我正在根据我的需要对其进行自定义。这段代码所做的是创建带有弹出信息的标记。 popus 内容中的文本来自 CSS 文件,包含以下信息:name、address1、address2 和 postalCode。我需要在每个标记的文本信息下方添加不同的图像,我已经为图像添加了变量并假设它应该添加类似这样的东西 "<img src=''>"
在 var iwContent
变量,但我不知道该怎么做
var map;
var infoWindow;
var markersData = [{
lat: 41.998079,
lng: 21.426156,
name: "Camping Praia da Barra",
address1: "Rua Diogo Cão, 125",
address2: "Praia da Barra",
postalCode: "3830-772 Gafanha da Nazaré"
}];
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.601203, -8.668173),
zoom: 9,
mapTypeId: 'roadmap',
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
function displayMarkers() {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markersData.length; i++) {
var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
var name = markersData[i].name;
var address1 = markersData[i].address1;
var address2 = markersData[i].address2;
var postalCode = markersData[i].postalCode;
var image = markersData[i].image;
createMarker(latlng, name, address1, address2, postalCode, image);
bounds.extend(latlng);
}
map.fitBounds(bounds);
}
function createMarker(latlng, name, address1, address2, postalCode, image) {
var marker = new google.maps.Marker({
map: map,
position: latlng,
title: name,
icon: 'anchor_point_with shadow.png'
});
google.maps.event.addListener(marker, 'click', function() {
var iwContent = '<div id="iw_container">' + '<div class="iw_title">' + name + '</div>' + '<div class="iw_content">' + address1 + '<br />' + address2 + '<br />' + postalCode + '</div></div>'; //i guess change should be made at this line
infoWindow.setContent(iwContent);
infoWindow.open(map, marker);
});
}
最佳答案
添加 <img src="...
到字符串 ìwContent
包括 image
, 在 markersData
中定义它之后
var markersData = [{
lat: 41.998079,
lng: 21.426156,
name: "Camping Praia da Barra",
address1: "Rua Diogo Cão, 125",
address2: "Praia da Barra",
postalCode: "3830-772 Gafanha da Nazaré",
image: "http://lorempixel.com/100/100/"
}];
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.601203, -8.668173),
zoom: 9,
mapTypeId: 'roadmap',
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
function displayMarkers() {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markersData.length; i++) {
var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
var name = markersData[i].name;
var address1 = markersData[i].address1;
var address2 = markersData[i].address2;
var postalCode = markersData[i].postalCode;
var image = markersData[i].image;
createMarker(latlng, name, address1, address2, postalCode, image);
bounds.extend(latlng);
}
map.fitBounds(bounds);
}
function createMarker(latlng, name, address1, address2, postalCode, image) {
var marker = new google.maps.Marker({
map: map,
position: latlng,
title: name,
//icon: 'anchor_point_with shadow.png'
});
google.maps.event.addListener(marker, 'click', function() {
var iwContent = '<div id="iw_container">' +
'<div class="iw_title">' + name + '</div>' +
'<div class="iw_content">' + address1 + '<br />' +
address2 + '<br />' +
postalCode + '</div>'+
'<img src="'+image+'"></div>'; //i guess change should be made at this line
infoWindow.setContent(iwContent);
infoWindow.open(map, marker);
});
};
initialize();
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>
关于javascript - 如何解决此问题以将图像从 HTML div 元素添加到谷歌地图标记弹出内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36100833/