Question

我正在尝试围绕坐标创建一个半径图。我拿了示例地图在Google的API数据库中创建了圆圈，并调整了代码以使其完成我想要的操作。我一般都不熟悉谷歌地图API和编码，所以很可能我的编码中可能有一些错误，或者我可能做了一些完全没有必要使地图工作的东西，但它似乎似乎到目前为止工作正常。

然而，现在我的下一步是我需要为每个半径圆中的特定坐标添加一个简单的点，但似乎无法弄清楚如何执行此操作。谷歌地图有简单点的样本编码，就像圆圈一样，但我无法看到这应该添加到我的编码中，以便使这项工作成功。请帮忙！编码发布在下面。谢谢。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Pickup and Delivery</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <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['Area1'] = {
  center: new google.maps.LatLng(43.420936, -82.860795),
  population: 10000
};
citymap['Area2'] = {
  center: new google.maps.LatLng(43.420936, -82.860795),
  population: 40000
};
citymap['Area3'] = {
  center: new google.maps.LatLng(43.420936, -82.860795),
  population: 90000
};
citymap['Area4'] = {
  center: new google.maps.LatLng(43.420936, -82.860795),
  population: 160000
};
citymap['Area5'] = {
  center: new google.maps.LatLng(43.420936, -82.860795),
  population: 250000
};
citymap['Area6'] = {
  center: new google.maps.LatLng(43.420936, -82.860795),
  population: 360000
};
citymap['Area7'] = {
  center: new google.maps.LatLng(43.420936, -82.860795),
  population: 490000
};
citymap['Area8'] = {
  center: new google.maps.LatLng(43.420936, -82.860795),
  population: 640000
};
citymap['Area9'] = {
  center: new google.maps.LatLng(43.420936, -82.860795),
  population: 810000
};
citymap['Area10'] = {
  center: new google.maps.LatLng(43.420936, -82.860795),
  population: 1000000
};
var cityCircle;

function initialize() {
  // Create the map.
  var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(43.420936, -82.860795),
    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: '#0000',`enter code here`
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillOpacity: 0.00,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    };
    // Add the circle for this city to the map.
    cityCircle = new google.maps.Circle(populationOptions);
  }
}

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

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

带点的半径图

0 个答案: