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

edit an existing google map from an external js file

本文关键字：谷歌地图 编辑 js 文件 从外部      更新时间：2023-09-26

我想在一个带有外部js文件的页面上编辑所有谷歌地图。假设我有5个页面，每个页面有3个谷歌地图。我想在每个谷歌地图上加一个圆圈。如何从将在每个页面中加载的外部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>

请注意用作所有贴图的可访问bin的数组。还要注意窗口侦听器的"加载"

外部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);

请注意它是如何引用贴图数组并将红色圆圈应用于循环中的每个数组的。还要注意加载的窗口侦听器。通过使用此事件，我们可以添加多个事件，按照事件的定义顺序，在本例中，按照脚本的加载顺序。

相关文章：