谷歌地图中的多个标记? [英] Multiple markers in google map?
本文介绍了谷歌地图中的多个标记?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法在Google地图上添加多个标记，有人可以看到下面的代码并提出建议吗?我的Google没有显示location []数组的标记.
I'm not able to add multiple marker on Google map, Can someone see the code below and suggest. my Google not showing the marker for locations[] array.
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
var home = new google.maps.Marker({
position: initialLocation,
map: map,
icon: 'http://www.wicfy.com/images/newmarkers/home-marker.png'
});
var myCity = new google.maps.Circle({
center:initialLocation, map:map, radius:25000, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4,
editable:true
});
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
var locations = [
["New Mermaid",28.8909,76.5796,1,"Georgia Mason","","Norfolk Botanical Gardens, 6700 Azalea Garden Rd.","coming soon"],
["1950 Fish Dish",28.6800,76.9200,2,"Terry Cox-Joseph","Rowena's","758 W. 22nd Street in front of Rowena's", "found"],
];
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,
icon: 'http://www.wicfy.com/images/newmarkers/home-marker.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
}
})(marker, i));
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
推荐答案
添加标记并将地图初始化为有效的中心，然后再尝试使用地理位置将其居中.
Add the markers and initialize the map to a valid center before trying to center it using geolocation.
var map;
function initialize() {
var mapOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var locations = [
["New Mermaid",28.8909,76.5796,1,"Georgia Mason","","Norfolk Botanical Gardens, 6700 Azalea Garden Rd.","coming soon"],
["1950 Fish Dish",28.6800,76.9200,2,"Terry Cox-Joseph","Rowena's","758 W. 22nd Street in front of Rowena's", "found"],
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
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: 'http://www.wicfy.com/images/newmarkers/home-marker.png'
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
这篇关于谷歌地图中的多个标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
