谷歌地图圈

问题描述 投票：0回答：2

我正在尝试从 API 加载数据，然后使用圆圈显示它。我可以使用数据点创建标记，但不能使用圆圈创建标记。我正在关注 来自 Google 文档的示例。

我期望发生的是在 

for loop
中，使用 
center: new google.maps.LatLng(well.location.latitude, well.location.longitude)
就足以创建中心点。然而，这似乎不起作用。其他一切与示例相同（稍后会修改）。

我预计这会起作用，因为在示例的前面，我可以使用 

$.each
来使用 
field.location.latitude, field.location.longitude
显示标记，这本质上是相同的事情（或者我认为是这样）。

我不能像使用标记一样在 

$.getJSON
函数中制作圆圈吗？是否发生了“不同步”？我仍在尝试学习如何处理异步事件。

在这里摆弄。

HTML：

<head>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
    <div id="map"></div>
</body>

CSS：

#map {
    border: 1px solid black;
    margin: 0 auto;
    width: 500px;
    height: 300px;
}

JavaScript

var map;
var mapProp;
var url;
var marker;
var markers = [];
var infoWindow;
var wellCircle;

function initMap() {
    mapProp = {
        center: new google.maps.LatLng(39.0, -105.782067),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map"), mapProp);
    infoWindow = new google.maps.InfoWindow({
        content: "hello world"
    });
};

function addMarker(lat, lng) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map
    });
    markers.push(marker);
    //console.log(markers);
};
$(document).ready(function() {
    url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
    initMap();
    $.getJSON(url, function(data) {
        //console.log(data);
        for (var i = 0; i < data.length; i++) {
            //console.log(data[i].location.latitude + ", " + data[i].location.longitude);
        };
        $.each(data, function(i, field) {
            addMarker(field.location.latitude, field.location.longitude);
        });
        for (var well in data) {
            wellCircle = new google.maps.Circle({
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                map: map,
                center: new google.maps.LatLng(well.location.latitude,
                    well.location.longitude),
                radius: 100000
            });
        };
    });
});
javascript google-maps getjson geometry
2个回答
3
投票

data
是一个数组，可以迭代它，也可以使用 $.each （或 .forEach）。

for (var i=0; i < data.length; i++) {
    var wellCircle = new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: new google.maps.LatLng(data[i].location.latitude, data[i].location.longitude),
        radius: 10000
    });
};

或者（就像你对标记所做的那样）：

$.each(data, function(i, well) {
    var wellCircle = new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: new google.maps.LatLng(well.location.latitude, well.location.longitude),
        radius: 10000
    });
});

screenshot of resulting map

代码片段：

var map;
var mapProp;

function initMap() {
  mapProp = {
    center: new google.maps.LatLng(39.0, -105.782067),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map = new google.maps.Map(document.getElementById("map"), mapProp);
  infoWindow = new google.maps.InfoWindow({
    content: "hello world"
  });
};

$(document).ready(function() {
  url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
  initMap();
  $.getJSON(url, function(data) {
    $.each(data, function(i, well) {
      var wellCircle = new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: new google.maps.LatLng(well.location.latitude, well.location.longitude),
        radius: 10000
      });
    });
  });
});
body, html {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}
#map {
  border: 1px solid black;
  margin: 0 auto;
  width: 99%;
  height: 99%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

1
投票

您的标记代码是正确的，但您的某些数据项没有 

location
属性，这就是您的代码无法完全运行的原因。

如果您想添加圆圈而不是标记，您可以使用 

$.each
循环，并在添加点之前简单地检查 
location
块。

这是一个工作示例：http://jsfiddle.net/xb7eh58p/（抱歉，没有使用你的，因为我没有看到你的链接）

详细来说，这是我调整的代码：

var map;
var mapProp;
var url;
var marker;
var markers = [];
var infoWindow;
var wellCircle;

function initMap() {
    mapProp = {
        center: new google.maps.LatLng(39.0, -105.782067),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map"), mapProp);
    infoWindow = new google.maps.InfoWindow({
        content: "hello world"
    });
};

function addMarker(lat, lng) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map
    });
    markers.push(marker);
};
$(document).ready(function() {
    url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
    initMap();    
    $.getJSON(url, function(data) {
        //console.log(data);
        //for (var i = 0; i < data.length; i++) {
        //    console.log(data[i].location.latitude + ", " + data[i].location.longitude);
        //};
        $.each(data, function(i, field) {
            if(field.location) {
                 wellCircle = new google.maps.Circle({
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35,
                    map: map,
                    center: new google.maps.LatLng(field.location.latitude,
                        field.location.longitude),
                    radius: 100000
                });
            } else {
                console.log("Missing location for this data item");
            }
        });
    });
});

如您所见，您只需要检查一下即可 

if(field.location)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.