Question

此代码必须使用google maps 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>

数据集的响应类似于{"data":{"id":[ 1 ]}{"latitude":[ 56.55557 ]}{"longitude":[ 53.678789 ]}{"distancefortb":[ d ]}}

我的代码出了什么问题？

Answer 1

我创建了一个带有一个标记的sample（Nagpur-India）。希望这段代码会有所帮助。

<!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>

此代码将使用标记（Nagpur-India）启动地图。同样，您可以根据需要进行定制。希望这会有所帮助。

谷歌地图出错（创建标记）

1 个答案: