Javascript 使用谷歌地图在页面中绘制多张地图_Javascript_Jquery_Json_Google Maps_Google Maps Api 3

Javascript 使用谷歌地图在页面中绘制多张地图

javascript jquery json google-maps google-maps-api-3

Javascript 使用谷歌地图在页面中绘制多张地图,javascript,jquery,json,google-maps,google-maps-api-3,Javascript,Jquery,Json,Google Maps,Google Maps Api 3,大多数问题是，当使用JQuery创建div元素时，屏幕上没有绘制地图，但是通过手动提供div，地图就可以了 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPV

大多数问题是，当使用JQuery创建div元素时，屏幕上没有绘制地图，但是通过手动提供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>';
        });
    };


函数ini（缩放、轨迹点、元素ID）{
var centerX=（（轨迹点[trackPoints.length-1].lat（）-trackPoints[0].lat（））/2）+轨迹点[0].lat（）；
var centerY=（（轨迹点[trackPoints.length-1].lng（）-轨迹点[0].lng（））/2）+轨迹点[0].lng（）；
console.log（centerX）；
控制台日志（centerY）；
console.log（）；
var myCenter=new google.maps.LatLng（centerX，centerY）
//var trackCenter=Math.ceil（trackPoints.length/2）
var mapProp={
中心：迈森特，
缩放：缩放，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（elementID），mapProp）；
var flightPath=new google.maps.Polyline({
路径：轨迹点，
strokeColor:#0000FF“，
笔划不透明度：0.8，
冲程重量：2
});  
var marker=new google.maps.marker({
位置：轨迹点[0]，
标题：“单击以缩放”
});         
var marker2=新的google.maps.Marker({
位置：轨迹点[trackPoints.length-1]，
标题：“单击以缩放”
});
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.502969824257,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]；
函数ini2（）{
在这个循环中，我创建html元素，
对于（var i=0；i添加style=“height:100%”并绘制贴图。实际上，您只需在ini（）运行之前指定一个高度，就可以执行height=“200px；”或其他任何操作
还简化了.append（）
函数ini2（）{
//在这个循环中，我创建html元素，
对于（var i=0；i在这个循环中，我正在创建的html元素不是有效的javascript。。。
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>

</body>
</html>

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);
    }
}