我放了谷歌地图,我正在打开JSON文件中的信息,书签,markerclusterer和markerwithlabel正常工作。但是信息框正在打开一个项目并在所有标记上重复它。这段代码有什么问题,信息框没有打开每个标记的信息?
这段代码有什么问题?有人可以帮我找到这个错误并让信息框打开所有结果吗?
function initialize() {
var mapOptions = { center: new google.maps.LatLng(-23.5568492,-46.6371455), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP };
var myMap = new google.maps.Map(document.getElementById("maps"), mapOptions);
var locationdata = { "locations": [{ "nome":"ponto 1", "latitude": "-23.549014", "longitude": "-46.659386"},{ "nome":"ponto 2", "latitude": "-23.558333", "longitude": "-46.632135"},{ "nome":"ponto 3", "latitude": "-23.563639", "longitude": "-46.679642"},{ "nome":"ponto 4", "latitude": "-23.583576", "longitude": "-46.635740"}]}
var locations = [];
var markers = [];
for (var i = 0; i < locationdata.locations.length; i++) {
var location=locationdata.locations;
var latLng = new google.maps.LatLng(location[i].latitude, location[i].longitude);
var marker = new google.maps.Marker({'position': latLng});
markers.push(marker);
var i_box = '<div style="background-color:#fff;font-size:13px;color:#454545;padding:5px;border:1px solid #dedede;border-radius:4px;">'+location[i].nome+'<br>Latitude :'+location[i].latitude+'<br>Longitude :'+location[i].longitude+'</div>';
var myOptions = {
content: i_box,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-100, -100),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 1,
width: "200px"
},
closeBoxMargin: "0px 0px 0px 0px",
closeBoxURL: "https://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function (e) {
ib.open(myMap, this);
});
var ib = new InfoBox(myOptions);
}
var markerCluster = new MarkerClusterer(myMap, markers, {imagePath: 'img/m'});
}
initialize();
#maps{position: relative;display: block;margin: 0 auto 30px auto;padding: 0;width: 100%;height: 400px;background-color:transparent;border-bottom: 1px solid #dedede;}
#maps img { max-width:inherit; }
img[src*="gstatic.com/"], img[src*="googleapis.com/"] { max-width:none; }
<div id="maps"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&&key=AIzaSyAZjvuyGoWEtyS4wfeLpERwKNgSYmhea98&sensor=false&callback=initMap"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://oscaraguiar.com/estudo/infobox.js"></script>
<script src="http://oscaraguiar.com/estudo/markerclusterer.js"></script>