Javascript 如何在谷歌地图上将一个圆、两个矩形转换为多边形，并使其出现在同一张地图上

这是我的密码

我想要一个圆和一个矩形出现在同一张地图上（Map1，Map2.html）…怎么做

Map1.html

<script>
// This example creates circles on the map, representing
// populations in North America.

// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['chicago'] = {
  center: new google.maps.LatLng(45.637839, -73.648316),
  population: 270
};


var cityCircle;

function initialize() {
  // Create the map.
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(45.637839, -73.648316),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    var populationOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: 40 * 1000
    };
    // Add the circle for this city to the map.
    cityCircle = new google.maps.Circle(populationOptions);
  }


    google.maps.event.addListener(map,'click',function(event) {
    alert("Shan");
    var map1=event.latLng.lat() + ', ' + event.latLng.lng();
    document.getElementById("latlong").innerHTML=map1;
    })

}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<script>
// This example adds a red rectangle to a map.

function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 11,
    center: new google.maps.LatLng(45.637839, -73.648316),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: new google.maps.LatLngBounds(
      new google.maps.LatLng(45.16267407976457,-74.6630859375),
      new google.maps.LatLng(46.1665167159516,-72.6580810546875))
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

//此示例在地图上创建圆，表示
//北美洲的人口。
//首先，为每个城市创建一个包含LatLng和人口的对象。
var citymap={}；
城市地图[“芝加哥”]={
中心：新google.maps.LatLng（45.637839，-73.648316），
人口：270
};
var城市圈；
函数初始化（）{
//创建地图。
变量映射选项={
缩放：11，
中心：新google.maps.LatLng（45.637839，-73.648316），
mapTypeId:google.maps.mapTypeId.TERRAIN
};
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
//为城市地图中的每个值构建圆。
//注：我们根据人口来缩放圆的面积。
用于（城市地图中的var城市）{
变量填充选项={
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#FF0000'，
不透明度：0.35，
地图：地图，
中心：城市地图[城市]。中心，
半径：40*1000
};
//将该城市的圆圈添加到地图中。
cityCircle=new google.maps.Circle（populationOptions）；
}
google.maps.event.addListener（映射，'click'，函数（事件）{
警惕（“掸邦”）；
var map1=event.latLng.lat（）+'，'+event.latLng.lng（）；
document.getElementById（“latlong”）.innerHTML=map1；
})
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

Map2.html

<script>
// This example creates circles on the map, representing
// populations in North America.

// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['chicago'] = {
  center: new google.maps.LatLng(45.637839, -73.648316),
  population: 270
};


var cityCircle;

function initialize() {
  // Create the map.
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(45.637839, -73.648316),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    var populationOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: 40 * 1000
    };
    // Add the circle for this city to the map.
    cityCircle = new google.maps.Circle(populationOptions);
  }


    google.maps.event.addListener(map,'click',function(event) {
    alert("Shan");
    var map1=event.latLng.lat() + ', ' + event.latLng.lng();
    document.getElementById("latlong").innerHTML=map1;
    })

}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<script>
// This example adds a red rectangle to a map.

function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 11,
    center: new google.maps.LatLng(45.637839, -73.648316),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: new google.maps.LatLngBounds(
      new google.maps.LatLng(45.16267407976457,-74.6630859375),
      new google.maps.LatLng(46.1665167159516,-72.6580810546875))
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

//此示例向地图添加一个红色矩形。
函数初始化（）{
var map=new google.maps.map（document.getElementById（'map-canvas'）{
缩放：11，
中心：新google.maps.LatLng（45.637839，-73.648316），
mapTypeId:google.maps.mapTypeId.TERRAIN
});
var rectangle=new google.maps.rectangle({
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#FF0000'，
不透明度：0.35，
地图：地图，
边界：新的google.maps.LatLngBounds(
新google.maps.LatLng（45.16267407976457，-74.6630859375），
新google.maps.LatLng（46.1665167159516，-72.6580810546875））
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

只需将这一切结合起来：

var citymap = {};
citymap['chicago'] = {
    center: new google.maps.LatLng(45.637839, -73.648316),
    population: 270
};


var cityCircle;

function initialize() {
    // Create the map.
    var mapOptions = {
        zoom: 11,
        center: new google.maps.LatLng(45.637839, -73.648316),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    // Construct the circle for each value in citymap.
    // Note: We scale the area of the circle based on the population.
    for (var city in citymap) {
        var populationOptions = {
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            center: citymap[city].center,
            radius: 40 * 1000
        };
        // Add the circle for this city to the map.
        cityCircle = new google.maps.Circle(populationOptions);
    }

    var rectangle = new google.maps.Rectangle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        bounds: new google.maps.LatLngBounds(
            new google.maps.LatLng(45.16267407976457, -74.6630859375),
            new google.maps.LatLng(46.1665167159516, -72.6580810546875))
    });


    google.maps.event.addListener(map, 'click', function (event) {
        alert("Shan");
        var map1 = event.latLng.lat() + ', ' + event.latLng.lng();
        document.getElementById("latlong").innerHTML = map1;
    })
}

google.maps.event.addDomListener(window, 'load', initialize);

---

哦，是的，当我第一次梳头的时候，我没有工作。可能是我在什么地方做错了