如何在 subgurim 谷歌地图中绘制圆圈？答案

【问题标题】：how to plot circles in subgurim google maps?如何在 subgurim 谷歌地图中绘制圆圈？
【发布时间】：2014-03-15 13:37:40
【问题描述】：

我使用 subgurim google maps v4。我需要根据（纬度、北纬度、半径）绘制几个不同颜色的圆圈。我该如何执行？

在搜索过程中，我发现了多个代码来消除圆圈，但没有使用 subgurim 谷歌地图。可以帮助转换此代码。

var Circle = new google.maps.Circle({ center: birrfeld, radius: 2000, strokeColor: color, strokeOpacity: 1, strokeWeight: 2, fillColor: color, fillOpacity: 0.4 });
                                Circle.setMap(map);

【问题讨论】：

我也一直在研究做数据表示，在一个班轮中做到这一点并不容易。所以对于那些问海报“你做了什么”的人来说，过滤掉到目前为止的所有数据是一件很困难的事情。look here for google spec

标签： google-maps google-maps-api-3 subgurim-maps

【解决方案1】：

这是我的代码，我使用了一个只有 long 和 lat 的数据文件，作为 json。

var latlng;
var marker;
function initialize () {
var mapOptions = {  
      zoom: 2, 
      center: new google.maps.LatLng(2.8,2.8), 
      mapTypeId: google.maps.MapTypeId.TERRAIN
};

var map = new google.maps.Map(document.getElementById("mapCanvas"),mapOptions  );
console.log("alex");

$.getJSON("data/canada.json", function(data) {

  //console.log(latlngArray);
  var populationOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.2,
      strokeWeight: 6,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: latlng,
      radius: 20000,
      } 

  for (var i = 0; i < data.length; i++) {
    populationOptions.center = new google.maps.LatLng(data[i].Latitude,data[i].Longitude);
    cityCircle = new google.maps.Circle(populationOptions);  

  }
});  
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&?key=AIzaSyB_h_TZ3jVQstD6ieduDF482_kRIyF4y1I&sensor=false&' 
  + 'callback=initialize';
  document.body.appendChild(script);
  console.log("aaa");
}
window.onload = loadScript;

html

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
   html {height:100%},
   body {height:100%;margin:0;padding:0}

</style>
 <script src="js/jquery1.9.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>


<script src="js/AlexMap.js"></script>
</head>

<body >
  <div id="heatmapArea style="width:1100px; height:900px"></div>

</body>

我使用的数据绘制了加拿大所有气象站的一堆圆圈，包括官方和“观察者计划”的一部分

【讨论】：

我还在做这个，我昨天开始的，所以在我完成后的另一个星期我将创建一个 git hub。
非常感谢..但是你正在使用这是准备好还是我需要编程？
不，我正计划制作一些 Jquery UI 幻灯片，以浏览一年的数据并根据气象站数据制作热图。如果您的地图是灰色的并且您的加载数据为 Json ，那么请查看调用，因为如果 json 格式不正确，则没有错误。还要确保为您的 div 设置一个边，空白大小也会导致没有地图。请记住，我昨天刚开始学习 API，代码很“粗糙”，但应该可以避免我经历过的心痛。
在此我绘制 5374 个点，我尝试绘制美国 49,225 个点，但所有类型的浏览器都崩溃了。我正在查看谷歌地图中的其他 api 类型，看看是否找到更好的内存管理或不太密集的数据结构。
它的工作不错..但这意味着我不能使用 subgurim 谷歌地图来做那样的事情......谢谢 alexmac。