谷歌地圖的錯誤（與創建標記）

此代碼必須初始化標記與谷歌地圖API。但是當我嘗試在瀏覽器中打開它時頁面變成白色（不起作用）。我無法理解問題... 我的所有資源都已連接。谷歌地圖的錯誤（與創建標記）

Map.jsp：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>dsf</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 
    $.ajax({ 
    type: "POST", 
    url: "http://localhost:1600/jsp/datasend.jsp", 
    data: "", 
    async: false, 
    success: function(msg){ 
     window.obj = $.parseJSON(msg); 
    } 
    }); 
</script> 
<div id="map"></div> 
<script> 
    var marks = []; 
    window.total_count = obj.length; 
    for(var i=0; i<total_count; i++){ 
    marks[i] = [Number(obj[i]['gps'][0]),Number(obj[i]['gps'][1])]; 
    } 
    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: {lat: marks[0][0], lng:marks[0][1]} 
    }); 
    setMarkers(map); 
    } 
    //alert(total_count); 
    function setMarkers(map) { 
    for(var i=0; i<total_count; i++){ 
     var image = 'http://localhost:1601/graphic/marker.svg'; //+ obj[i]['marker'] + '.svg'; 
     var marker = new google.maps.Marker({ 
     position: {lat: marks[i][0], lng: marks[i][1]}, 
     map: map, 
     icon: image 
     }); 
    } 
    } 
</script> 
<script async true src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxJe0GV6Oquvs4I8yZpEQdC7BZ-X5YXCs&signed_in=true&callback=initMap"></script> 
</body> 
</html>

datasend的反應看起來像{"data":{"id":[ 1 ]}{"latitude":[ 56.55557 ]}{"longitude":[ 53.678789 ]}{"distancefortb":[ d ]}}

這有什麼錯我的代碼？

來源

2016-03-02 DenShDen

您是否找到任何解決方案？ –

我用一個標記（Nagpur-India）創建了一個sample。希望這段代碼會有所幫助。

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Markers</title> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script type="text/javascript"> 

    var map; 
    // Creates the map 
    function initialize() { 
     map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: new google.maps.LatLng(21.1458004, 79.0881546), //For Nagpur 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    } 

    // This function takes an array argument containing a list of marker data 
    function generateMarkers(locations) { 
    for (var i = 0; i < locations.length; i++) { 
     new google.maps.Marker({ 
     position: new google.maps.LatLng(21.1011957, 79.1026544), 
     map: map, 
     title: locations[i][0] 
     }); 
    } 
} 
</script> 
</head> 
<body> 
<div id="map" style="width: 500px; height: 400px;"></div> 
<script type="text/javascript"> 

window.onload = function() { 
    initialize(); 
    var loc2 = []; 
    // I have created by getting the city and country. Then find Latitude and Longitude. 
    var address = 'Nagpur,India'; 
    geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      loc2.push("['Nagpur'," + 21.2333 + "," + 79.2000 +"]"); 
      locations1 = "[" + loc2 + "]"; 
      generateMarkers(eval(locations1)); 
     } 
     else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
}; 
</script> 
</body> 
</html>

此代碼將啓動與標記（那格浦爾印度）的地圖。同樣，您可以根據您的需要進行定製希望這可以幫助。

來源

2016-03-03 08:02:34

谷歌地圖的錯誤（與創建標記）

回答

相關問題