如何转换一个圆圈,两个矩形到多边形在谷歌地图上,并使其出现在同一地图上

How to convert a circles,two rectangles into Polygons on Google maps and make it appear on the same map

本文关键字:谷歌地图 地图 多边形 两个 一个 转换 何转换      更新时间:2023-09-26

这是我的代码

我想要一个圆圈和矩形出现在同一个地图(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>

Map2.html

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