谷歌地图api v3从阵列添加多义线

我正在尝试将一组多行添加到数组的谷歌地图。谷歌地图api v3从阵列添加多义线

这里是我的代码：

<!DOCTYPE html> 

<html> 
<head> 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 

<style type="text/css"> 
    html { height: 90% } 
    body { height: 90%; margin: 0; padding: 0 } 
    #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?sensor=false"> 
</script> 

<script type="text/javascript"> 
var poly; 
var map; 
    function initialize() { 
    var latlng = new google.maps.LatLng(38.698044, -77.210411); 
    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 


    //var myLatLng = new google.maps.LatLng(0, -180); 
    } 


    var polyOptions = { 
    strokeColor: '#000000', 
    strokeOpacity: 1.0, 
    strokeWeight: 3 
    } 
    poly = new google.maps.Polyline(polyOptions); 
    poly.setMap(map); 

var path = new MVCArray; 

$.getJSON('json.php', function(data) { 
    //var items = []; 
    $.each(data, function(key, val) { 


    path.push(new google.maps.LatLng(val.lat, val.longi)); 

    }); 

}); 



    var myOptions = { 
    zoom: 12, 
    //center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

</script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 








</head> 

<body onload="initialize()"> 
    <div id="map_canvas" style="width:90%; height:100%"></div> 

</body> 

</html> 

<html> 
<head> 

</head> 
<body> 

</body> 
</html>

为什么行path.push任何想法（新google.maps.LatLng（val.lat，val.longi））;没有添加数据？

或者有更好的方式来循环数据？

来源

2011-11-18 Loren Zimmer

我已经添加了两个答案的元素，但我发现一个没有定义回MVCArray错误，当我加载页面.. .thoughts？ –

因此，你循环的内容data，添加到数组中的东西，path ....然后，什么？据我所知，没有什么。想必您可以使用该路径数组为您的多段线设置路径。

var polyOptions = { 
    strokeColor: '#000000', 
    strokeOpacity: 1.0, 
    strokeWeight: 3 
} 
poly = new google.maps.Polyline(polyOptions); 
poly.setMap(map); 

var path = new MVCArray; 

$.getJSON('json.php', function(data) { 
    //var items = []; 
    $.each(data, function(key, val) { 
      path.push(new google.maps.LatLng(val.lat, val.longi)); 
    }); 

    // now update your polyline to use this path 
    poly.setPath(path); 
});

PS：你的HTML结构都是错误的：

<body onload="initialize()"> 
    <div id="map_canvas" style="width:90%; height:100%"></div> 

</body> 

</html> 

<html> 
<head> 

</head> 
<body> 

</body> 
</html>

应该不是只是

<body onload="initialize()"> 
    <div id="map_canvas" style="width:90%; height:100%"></div> 

</body> 

</html>

来源

2011-11-18 01:36:34 duncan

这是好的var path = new MVCArray; ？ – guiomie

不使用MVCArray，只需创建一个正常的数组：var path = []; – duncan

你应该把初始化函数内的所有代码：

<script type="text/javascript"> 
var poly; 
var map; 
function initialize() { 
    var latlng = new google.maps.LatLng(38.698044, -77.210411); 
    var myOptions = { 
    zoom: 8, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    //map is already declared 
    //var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
    map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 

    var polyOptions = { 
    strokeColor: '#000000', 
    strokeOpacity: 1.0, 
    strokeWeight: 3 
    } 
    poly = new google.maps.Polyline(polyOptions); 
    poly.setMap(map); 

    var path = new MVCArray; 
    // every time the path is updated, automatically the map will update the polyline 
    poly.setPath(path); 

    $.getJSON('json.php', function(data) { 
    //var items = []; 
    $.each(data, function(key, val) { 


    path.push(new google.maps.LatLng(val.lat, val.longi)); 

    }); 

    }); 



    var myOptions = { 
    zoom: 12, 
    //center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 
} 
</script>

来源

2011-11-18 01:44:22

要填充从MySQL数据库JavaScript数组（剩下的，正如我所看到的，你知道该怎么做）：

<?php 
//replace this to load from database 
// populate array 
for($j=0;$j<10;$j++){ 
    $arrayData[$j] = $j*3; 
} 
?> 
<script language="javascript" type="text/javascript"> 
<!-- 
var myArray = new Array(); 
<?php 
//populate JS array 
for($i=0;$i<10;$i++){ 
    ?> 
    myArray[<?php echo $i;?>]="<?php echo $arrayData[$i];?>"; 
<?php }?> 
--> 
</script>

，如果你想运行这个测试它，只是包括正确的HTML head标签之前，脚本，这之后（你会明显地去除结束脚本开始脚本标签 - 因为风格）

<script language="javascript" type="text/javascript"> 
<!-- 
function showData(){ 
    for (var i=0;i<myArray.length;i++){ 
    document.getElementById('output').innerHTML += "array position: "+i+" array content: "+myArray[i]+"<br>"; 
    } 
} 
--> 
</script> 
</head> 
<body onLoad="showData();"> 
<div id="output"></div> 
</body> 
</html>

来源

2012-02-21 03:53:29

谷歌地图api v3从阵列添加多义线

回答

相关问题