Question

考虑到下面的代码，我试图在控制台中打印已解析数组的长度，并且该过程正常工作，现在即使我已经有了添加通过js代码中加载的json文件解析的信息的数组，我无法在地图中显示标记数组

var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(41.90832, 12.52407)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

var xmlhttp = new XMLHttpRequest();
var url = "json/prova.json";

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "<table>";

    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" +
        arr[i].title +
        "</td><td>" +
        arr[i].latitude +
        "</td><td>" +
        arr[i].longitude +
        "</td></tr>"
		;
		//console.log(arr.length);
    }
    out += "</table>"
    // document.getElementById("map-canvas").innerHTML = out;
}

				html, body, #map-canvas {
				height: 100%;
				margin: 0px;
				padding: 0px
			  }

<!DOCTYPE html>
<html>
<head>
         <title>Simple Map</title>
         <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
         <meta charset="utf-8">
		<script src="http://maps.google.com/maps/api/js?signed_in=true&amp;key=AIzaSyD3Xz7-z7U_XzZiaOlx9khhtFSld8vd0k4"></script>
        <script src="js/prova_simple.js"></script>
</head>	 
<body>

		<h1>Customers</h1>
		<div id="map-canvas"></div>

</body>
</html>

Answer 1

HMM !!!。你的json有标记的lat和lng，你可以尝试添加多个标记到谷歌地图，用示例代码听

var infowindow = [];
var marker = [];
function myFunction(response) {
    var arr = JSON.parse(response);
    for(var i = 0; i < arr.length; i++) {
            (function(i){ //new line 
            infowindow[i] = new google.maps.InfoWindow({
                content: arr[i].title
            });
            marker[i] = new google.maps.Marker({
                    title: arr[i].title,
                    animation: google.maps.Animation.DROP,
                    //animation: google.maps.Animation.BOUNCE,                        
                    position: new google.maps.LatLng(arr[i].latitude,arr[i].longitude)
                });
            google.maps.event.addListener(marker[i], 'click', function() {
               infowindow[i].open(map,this);
            });
            })(i); //new line
    }
}

使用json.parse添加谷歌地图标记

1 个答案: