标记未指向地图

时间:2017-07-20 06:45:26

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

数据是以正确的格式提取的,但标记未加载,请让我弄清楚这个问题

function initMap() {
        // Create the map.
        var infoWindow = new google.maps.InfoWindow(); 
        var map = new google.maps.Map(document.getElementById('mapView'), {
          zoom: 5,
          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 = [];
            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]
                });
				if(data[sd].type == 1){
                    marker[sd] = new google.maps.Marker({
                        icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
                        position: data[sd].center,
						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: data[sd].center,
                        map: map,
                        infowindow: infowindow[sd]
                    });
                }
               
            }
        });

      
		 
}
Json数据:

  

“0”:{“division”:“ARV”,“hqname”:“HYDERABAD”,“fromareaname”:   “HYDERABAD”,“toareaname”:“VANASTHALIPURAM”,“ta”:“EXHQ”,         “center”:{“latitude”:“17.328644”,“经度”:“78.575301”         },“type”:“1”,“dist”:“36”,“距离”:“11”}

1 个答案:

答案 0 :(得分:0)

问题出在您的标记位置属性中。您没有以正确的方式定义 lat / lng 。它必须是数字(在数据样本中是字符串)。它必须是{lat : <number>, lng : <number> }格式。

尝试像这样更新

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]
                    });

如您所见,我使用parseFloat将您的字符串值转换为浮点数。

签入jsFiddle https://jsfiddle.net/5u16yy7h/1/