我已经使用Google Maps API创建了一张地图，但尽管从＆＃34; v3_simpleMap_InfoBoxA.html＆＃34;中复制了现有的Javascript。 （这在浏览器中渲染得很好）并且调整我无法在地图上显示标记。地图渲染和Javascript已经使用JSLint验证 - 没有错误。
我能够通过信息框显示一个点，但不是多个。我不擅长Javascript，我的道歉，但已经扫描Stackoverflow，无法找到解决方案。这是一段代码：
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.13/src/infobox.js"></script>
<script>
var ib = new InfoBox();
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(41.708833, -70.152917),
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl : true,
mapTypeControlOptions: {
style : google.maps.MapTypeControlStyle.DEFAULT
},
panControl : false,
rotateControl : false,
scaleControl : false,
streetViewControl : false,
zoomControl : true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
position: google.maps.ControlPosition.RIGHT_CENTER
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
google.maps.event.addListener(map, "click", function() { ib.close() ;});
var sites = [
['Chase Garden Creek', -70.22610, 41.73147, 11, '<p>Chase Garden Creek <br/>Dennis <br/> <a href="http://www.testsite.com/properties/chase-garden-creek">About Chase Garden Creek</a></p>'],
['Howes Pasture', -70.19919, 41.73693, 10, '<p>Howes Pasture <br/>Dennis <br/><a href="http://www.testsite.com/properties/howes-pasture/">About Howes Pasture</a></p>'],
['Bass River Park', -70.17955, 41.66551, 9, '<p>Bass River Park <br/>Dennis <br/> <a href="http://www.testsite.com/properties/bass-river-park">About Bass River Park</a></p>'],
['Coles Pond at Crowes Pasture', -70.13601, 41.75482, 8, '<p>Coles Pond <br/>Dennis <br/> <a href="http://www.testsite.com/properties/coles-pond">About Coles Pond</a></p>'],
['Paddocks Path', -70.17391, 41.74343, 7, '<p>Paddocks Path <br/>Dennis <br/> <a href="http://www.testsite.com/properties/paddocks-path">About Paddocks Path</a></p>'],
['Dorothy Connors Bell Conservation Area', -70.16389, 41.71962, 6, '<p>Dorothy Connors Bell Conservation Area <br/>Dennis <br/> <a href="http://www.testsite.com/properties/">About DCB Conservation Area</a></p>'],
['Sesuit Neck Road', -70.17122, 41.74698, 5, '<p>Sesuit Neck Road <br/>Dennis <br/> <a href="http://www.testsite.com/properties/sesuit-neck-road">About Sesuit Neck Road</a></p>'],
['Old Fort Field', -70.19989, 41.73325, 4, '<p>Old Fort Field <br/>Dennis <br/> <a href="http://www.testsite.com/properties/old-fort-field">About Old Fort Field</a></p>'],
['Black Foot Path', -70.17214, 41.74350, 3, '<p>Black Foot Path <br/>Dennis <br/> <a href="http://www.testsite.com/properties/black-foot-path">About Black Foot Path</a></p>'],
['Swan River Road', -70.15602, 41.65743, 2, '<p>Swan River Road <br/>Dennis <br/> <a href="http://www.testsite.com/properties/swan-river-road">About Swan River Road</a></p>'],
['Coles Pond Bog', -70.14153, 41.75368, 1, '<p>Coles Pond Bog <br/>Dennis <br/> <a href="http://www.testsite.com/properties/coles-pond-bog">About Coles Pond Bog</a></p>']
];
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
function createMarker(site, map){
var siteLatLng = new google.maps.LatLng(site[1], site[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
// Add visible and draggable below
draggable: true,
visible: true,
title: site[0],
zIndex: null,
// Above, changed from site [3] - no effect
html: site[4] /*, Site down at test time, skip icon
icon: "http://www.testsite.com/wp-content/uploads/2014/12/favicon.jpg" */
});
// Begin example code to get custom infobox
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 6px; background: white; font-family:Arial; font-size:10px; padding: 5px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px;";
boxText.innerHTML = marker.html;
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.12/examples/tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
setVisible: true,
pane: "floatPane",
enableEventPropagation: false
};
// end example code for custom infobox
google.maps.event.addListener(marker, "click", function (e) {
ib.close();
ib.setOptions(myOptions);
ib.open(map, this);
});
return marker;
}
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
createMarker(markers[i], map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script><!DOCTYPE html>
<html>
<head>
<title>www.testsite.com test file March 29, 2015</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
答案 0 :(得分：0)
你的纬度和经度都是逆转的（你的标记都在南极洲）。
代码片段（createMarker函数中的反向站点[1]和站点[2]）：
var ib = new InfoBox();
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(41.708833, -70.152917),
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl : true,
mapTypeControlOptions: {
style : google.maps.MapTypeControlStyle.DEFAULT
},
panControl : false,
rotateControl : false,
scaleControl : false,
streetViewControl : false,
zoomControl : true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
position: google.maps.ControlPosition.RIGHT_CENTER
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
google.maps.event.addListener(map, "click", function() { ib.close() ;});
var sites = [
['Chase Garden Creek', -70.22610, 41.73147, 11, '<p>Chase Garden Creek <br/>Dennis <br/> <a href="http://www.testsite.com/properties/chase-garden-creek">About Chase Garden Creek</a></p>'],
['Howes Pasture', -70.19919, 41.73693, 10, '<p>Howes Pasture <br/>Dennis <br/><a href="http://www.testsite.com/properties/howes-pasture/">About Howes Pasture</a></p>'],
['Bass River Park', -70.17955, 41.66551, 9, '<p>Bass River Park <br/>Dennis <br/> <a href="http://www.testsite.com/properties/bass-river-park">About Bass River Park</a></p>'],
['Coles Pond at Crowes Pasture', -70.13601, 41.75482, 8, '<p>Coles Pond <br/>Dennis <br/> <a href="http://www.testsite.com/properties/coles-pond">About Coles Pond</a></p>'],
['Paddocks Path', -70.17391, 41.74343, 7, '<p>Paddocks Path <br/>Dennis <br/> <a href="http://www.testsite.com/properties/paddocks-path">About Paddocks Path</a></p>'],
['Dorothy Connors Bell Conservation Area', -70.16389, 41.71962, 6, '<p>Dorothy Connors Bell Conservation Area <br/>Dennis <br/> <a href="http://www.testsite.com/properties/">About DCB Conservation Area</a></p>'],
['Sesuit Neck Road', -70.17122, 41.74698, 5, '<p>Sesuit Neck Road <br/>Dennis <br/> <a href="http://www.testsite.com/properties/sesuit-neck-road">About Sesuit Neck Road</a></p>'],
['Old Fort Field', -70.19989, 41.73325, 4, '<p>Old Fort Field <br/>Dennis <br/> <a href="http://www.testsite.com/properties/old-fort-field">About Old Fort Field</a></p>'],
['Black Foot Path', -70.17214, 41.74350, 3, '<p>Black Foot Path <br/>Dennis <br/> <a href="http://www.testsite.com/properties/black-foot-path">About Black Foot Path</a></p>'],
['Swan River Road', -70.15602, 41.65743, 2, '<p>Swan River Road <br/>Dennis <br/> <a href="http://www.testsite.com/properties/swan-river-road">About Swan River Road</a></p>'],
['Coles Pond Bog', -70.14153, 41.75368, 1, '<p>Coles Pond Bog <br/>Dennis <br/> <a href="http://www.testsite.com/properties/coles-pond-bog">About Coles Pond Bog</a></p>']
];
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
function createMarker(site, map){
var siteLatLng = new google.maps.LatLng(site[2], site[1]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
// Add visible and draggable below
draggable: true,
visible: true,
title: site[0],
zIndex: null,
// Above, changed from site [3] - no effect
html: site[4] /*, Site down at test time, skip icon
icon: "http://www.testsite.com/wp-content/uploads/2014/12/favicon.jpg" */
});
// Begin example code to get custom infobox
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 6px; background: white; font-family:Arial; font-size:10px; padding: 5px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px;";
boxText.innerHTML = marker.html;
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.12/examples/tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
setVisible: true,
pane: "floatPane",
// enableEventPropagation: false
};
// end example code for custom infobox
google.maps.event.addListener(marker, "click", function (e) {
ib.close();
ib.setOptions(myOptions);
ib.open(map, this);
});
return marker;
}
function setMarkers(map, markers) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var marker = createMarker(markers[i], map);
bounds.extend(marker.getPosition());
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.13/src/infobox.js"></script>
<div id="map_canvas"></div>