我想学习在我的网络应用中嵌入地图。我想要一个基本的功能,如添加多个标记,costum标记,costum infowindow等。我做了直到添加costum标记。当我想为每个标记设置infowindow时,它仍然不起作用,任何人都可以帮我解决问题?感谢...
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>Styling the Base Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map {
margin: 0;
padding: 0;
height: 100%;
}
#legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 3px solid #000;
}
#legend h3 {
margin-top: 0;
}
#legend img {
vertical-align: middle;
}
</style>
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: new google.maps.LatLng(-8.704956, 115.22750),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_CENTER
}
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
var infowindow = new google.maps.InfoWindow();
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
name: 'Parking',
icon: iconBase + 'parking_lot_maps.png'
},
library: {
name: 'Library',
icon: iconBase + 'library_maps.png'
},
info: {
name: 'Info',
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
var features = [
{
position: new google.maps.LatLng(-8.702709, 115.224461),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91539, 151.22820),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91747, 151.22912),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91910, 151.22907),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91725, 151.23011),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91872, 151.23089),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91784, 151.23094),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91682, 151.23149),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91790, 151.23463),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91666, 151.23468),
type: 'info'
}, {
position: new google.maps.LatLng(-33.916988, 151.233640),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
type: 'library'
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(feature[i]['type']);
infowindow.open(map, marker);
}
})(marker, i));
}
var legend = document.getElementById('legend');
for (var key in icons) {
var type = icons[key];
var name = type.name;
var icon = type.icon;
var div = document.createElement('div');
div.innerHTML = '<img src="' + icon + '"> ' + name;
legend.appendChild(div);
}
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}
</script>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api /js?callback=initialize">
</script>
<div id="legend"><h3>Legend</h3></div>
</body>
</html>
答案 0 :(得分:1)
你的代码几乎就在那里。为了让它发挥作用,我修改了一些东西......
1)我添加了缺失的全局变量标记(如问题下方的评论中所述):
<script>
var map, marker;
...
2)我修改了addMarker函数,将结果分配给全局变量标记而不是局部变量标记:
function addMarker(feature) {
marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
3)我修改了遍历features
的代码,并为每个标记创建了一个标记和事件监听器,如下所示:
for (var i = 0; i < features.length; i++) {
addMarker(features[i]);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(features[i]['type']);
infowindow.open(map, marker);
}
})(marker, i));
}
请参阅this Plunkr了解有效的演示。
编辑:上面的第3点我用更传统的方式重写了循环。以下也可以:
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(features[i]['type']);
infowindow.open(map, marker);
}
})(marker, i));
}
我在这里所做的就是改变你的路线:
infowindow.setContent(feature[i]['type']);
至(注意features
而非feature
):
infowindow.setContent(features[i]['type']);
请参阅this Plunkr了解演示。