使用谷歌地圖，多個地圖繪製到頁面

-1

大部分的問題，但通過手動提供他們的div創建使用JQuery沒有地圖會繪製在屏幕div元素時，地圖都很好使用谷歌地圖，多個地圖繪製到頁面

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="jquery.js"></script> 
<script 
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> 
</script> 

<script> 

function ini(Zoom,trackPoints,elementID){ 
    var centerX=((trackPoints[trackPoints.length-1].lat()-trackPoints[0].lat())/2)+trackPoints[0].lat(); 
    var centerY=((trackPoints[trackPoints.length-1].lng()-trackPoints[0].lng())/2)+trackPoints[0].lng(); 
    console.log(centerX); 
    console.log(centerY); 
    console.log(); 
    var myCenter=new google.maps.LatLng(centerX,centerY) 
    //var trackCenter=Math.ceil(trackPoints.length/2) 

    var mapProp = { 
     center:myCenter, 
     zoom:Zoom, 
     mapTypeId:google.maps.MapTypeId.ROADMAP 
     }; 
    var map = new google.maps.Map(document.getElementById(elementID),mapProp); 

    var flightPath=new google.maps.Polyline({ 
     path:trackPoints, 
     strokeColor:"#0000FF", 
     strokeOpacity:0.8, 
     strokeWeight:2 
    }); 

    var marker = new google.maps.Marker({ 
     position: trackPoints[0], 
     title:'Click to zoom' 
    });   

    var marker2 = new google.maps.Marker({ 
     position: trackPoints[trackPoints.length-1], 
     title:'Click to zoom' 
    }); 

    flightPath.setMap(map); 
    marker.setMap(map); 
    marker2.setMap(map); 
} 



    var xPlace=new google.maps.LatLng(33.49960594357574,36.28801345825195); 
    var yPlace=new google.maps.LatLng(33.50296982425457,36.26604080200195); 
    //var wPlace=new google.maps.LatLng(33.51296982425457,36.22604080200195); 
    var zPlace=new google.maps.LatLng(33.501180542295344,36.25514030456543); 
    var centerX=zPlace.lat()-xPlace.lat(); 
    var centerY=zPlace.lng()-xPlace.lng(); 
    var myCenter=new google.maps.LatLng(centerX+xPlace,centerY+yPlace); 
    var arr=[xPlace,yPlace,zPlace]; 

    function ini2(){ 

    In this loop I'm creating the html elements, 

    for (var i = 0; i <4; i++) { 
     $("#googleMap").append(function(){ 
      return '<div id="googleMap'+i+'"></div>'; 
     }); 
    };

和循環這裏提供地圖到HTML的div

for(var i=0;i<4;i++){ 
ini(14,arr,"googleMap"+i); 
}; 
    } 
    google.maps.event.addDomListener(window, 'load',ini2); 
</script> 
</head> 

<body> 
<div id="googleMap" style="width:500px;height:200px;"></div>

如果我沒有把HTML的div手動出現的地圖，但dynamiclly不

</body> 
</html>

來源

2014-10-18 user3689409

'在這個循環中，我創建的HTML元素'是無效的JavaScript ... – 2014-10-18 17:42:56

add style =「height：100％」並繪製地圖。真的，你只需要在ini（）運行之前指定一個高度，所以你可以做height =「200px;」或其他任何東西。

也簡化了.append（）

function ini2(){ 
    // In this loop I'm creating the html elements, 
    for (var i = 0; i <4; i++) { 
     $("#googleMap").append('<div id="googleMap'+i+'" style="height:100%;"></div>'); 
    } 

    for(var i=0;i<4;i++) { 
     ini(14,arr,"googleMap"+i); 
    } 
}

這裏的工作fiddle

只是一定要注意最後一行和評論。
你需要恢復窗口加載監聽器，因爲它不適用於jsfiddle。

來源

2014-10-18 18:27:20

使用谷歌地圖，多個地圖繪製到頁面

回答

相關問題