从外部js文件编辑现有的Google地图

debugcn 发表于 Dev

贾马尔

我想从带有外部js文件的页面上编辑所有Google地图。假设我有5个页面，每个页面中都有3张Google地图。我想在每个Google地图中添加一个圆圈。如何从将在每个页面中加载的外部javascript文件执行此操作？

收音机

您的基础页面包含多个地图和一个外部JS文件：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var maps = [];
function drawMaps(){
    for(var i = 1; i<4;i++){
        drawMap(i);
    }
}
function drawMap(num){
    var mapcontainer=document.getElementById("map"+num);
    var options={
        center: new google.maps.LatLng(40.266323, -73.996579),
        zoom:8,
        maptypeid:google.maps.MapTypeId.ROADMAP 
    };
    var map=new google.maps.Map(mapcontainer,options);
    maps.push(map);
    var circle=new google.maps.Circle({
        map:map,
        center:new google.maps.LatLng(40.266323, -73.996579),
        radius:10000,
        fillColor:"blue",
        border:0,
        strokeWeight:0
    });
}

window.addEventListener("load", drawMaps); 
</script>
<script src="externalJS.js"></script>
</head>
<html>
<body>
    <div style="height:400px;width:400px" id="map1"></div> 
    <div style="height:400px;width:400px" id="map2"></div> 
    <div style="height:400px;width:400px" id="map3"></div>

</body>
</html>

请注意，该数组充当所有地图的可访问箱。还要注意窗口侦听器的“负载”。

外部JS文件的内容：

function addToAllMaps(){
    if(maps!=undefined){
        for (var i in maps){
            var map = maps[i];
            var circle=new google.maps.Circle({
                    map:map,
                    center:new google.maps.LatLng(40.266323, -73.996579),
                    radius:1000000,
                    fillColor:"red",
                    border:0,
                    strokeWeight:0
                });
        }
    }
}
window.addEventListener("load", addToAllMaps);