Google地图信息框不会加载JSON文件中的数据

时间:2017-04-07 18:24:31

标签: javascript google-maps-api-3

我放了谷歌地图,我正在打开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&amp&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>

0 个答案:

没有答案