谷歌地图信息窗口未加载

时间:2017-11-27 04:35:06

标签: javascript google-maps google-maps-api-3

我使用谷歌地图Api V3地图和标记正在加载完美但信息窗口没有加载,它都没有显示任何错误,当我在信息窗口中发出警报时它没有&#39 ; t显示任何警报但数据已加载到地图中 让我知道我在哪里犯了错误,这是使用我编写的函数加载地图的正确方法 提前致谢

function initMap() {
            // Create the map.
            // var map;
            var infoWindow = new google.maps.InfoWindow(); 
            var map = new google.maps.Map(document.getElementById('mapView'), {
              zoom: 6,
              center: {lat: 20.5937, lng: 78.9629}, 
              mapTypeId: 'roadmap'
            });
             $.getJSON('data.php', function(data){
                 // alert(data);
                 // alert(JSON.stringify(data));
                var marker = [];
                var infoWindow = [];
                var contentString = [];
                var bounds = new google.maps.LatLngBounds();
                for(var sd in data){
                    contentString[sd] = '<div id="content">'+
                        '<div id="siteNotice">'+
                        '</div>'+
                        '<h1 id="firstHeading" class="firstHeading">'+data[sd].hqname+'</h1>'+
                        '<div id="bodyContent">'+
                            '<p><b>Division: </b>'+data[sd].division+'</p>'+
                            '<p><b>From: </b>'+data[sd].fromareaname+'</p>'+
                            '<p><b>To: </b>'+data[sd].toareaname+'</p>'+
                            '<p><b>Category: </b>'+data[sd].ta+'</p>'+
                            '<p><b>Distance: </b>'+data[sd].dist+'</p>'+
                            '<p><b>Calculated Distance: </b>'+data[sd].distance+'</p>'+
                        '</div>'+
                    '</div>';

                    infoWindow[sd] = new google.maps.InfoWindow({
                      content: contentString[sd]
                      // alert(contentString)
                    });


                    if(data[sd].type == 1){
                        marker[sd] = new google.maps.Marker({
                            icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
                            position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
                            map: map,
                            infowindow: infowindow[sd]
                        });
                    }
                    if(data[sd].type == 2){
                        marker[sd] = new google.maps.Marker({
                            icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
                            position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
                            map: map,
                            infowindow: infowindow[sd]
                        });
                    }
                    if(data[sd].type == 3){
                        marker[sd] = new google.maps.Marker({
                            icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
                            position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
                            map: map,
                            infowindow: infowindow[sd]
                        });
                    }

                   bounds.extend(marker[sd].position);
                }

                    map.fitBounds(bounds); 

            });


    }

已编辑的代码

function initMap() {
        // Create the map.
        <!-- // var map; -->
        //alert("map ");

        var infoWindow = new google.maps.InfoWindow(); 
        var map = new google.maps.Map(document.getElementById('mapView'), {
          zoom: 6,
          center: {lat: 20.5937, lng: 78.9629}, 
          mapTypeId: 'roadmap'
        });
         $.getJSON('data.php', function(data){
              // alert(data);
               // alert(JSON.stringify(data));
            var marker = [];
            var infowindow = [];
            var contentString = [];
            var bounds = new google.maps.LatLngBounds();
            for(var sd in data){
                // alert(sd);
                contentString[sd] = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                    '<h1 id="firstHeading" class="firstHeading">'+data[sd].shopname+'</h1>'+
                    '<div id="bodyContent">'+
                        '<p><b>Subarea: </b>'+data[sd].subarea+'</p>'+
                        '<p><b>Mobile: </b>'+data[sd].mobile+'</p>'+
                        '<p><b>Category: </b>'+data[sd].category+'</p>'+
                        '</div>'+
                '</div>';

                infowindow[sd] = new google.maps.InfoWindow({
                  content: contentString[sd]
                });



                if(data[sd].type == 1){
                   marker[sd] = new google.maps.Marker({
                        icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
                        position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
                        map: map,
                        infowindow: infowindow[sd]
                    });
                }
                if(data[sd].type == 2){
                    marker[sd] = new google.maps.Marker({
                        icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
                        position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
                        map: map,
                        infowindow: infowindow[sd]
                    });
                }
                if(data[sd].type == 3){

                marker[sd] = new google.maps.Marker({
                        icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
                        position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
                        map: map,
                        infowindow: infowindow[sd]
                    });
                }

               bounds.extend(marker[sd].position);
              google.maps.event.addListener(marker[sd], 'click', function() { infowindow[sd].open(map,marker[sd]); }); 
            }

                map.fitBounds(bounds); 

        });




}

0 个答案:

没有答案