Google Maps Circle
[英]Google Maps Circle
問題描述
我正在嘗試從API加載數據，然后使用圓圈顯示它。 我可以用數據點創建標記，但不能用圓創建標記。 我在這里遵循Google文檔中的示例 。
我期望發生的事是在使用center: new google.maps.LatLng(well.location.latitude, well.location.longitude)的for loop center: new google.maps.LatLng(well.location.latitude, well.location.longitude)足以創建中心點。 但是，這似乎不起作用。 其他所有內容均與示例相同（稍后將進行修改）。
我希望$.each工作，因為在示例的前面，我能夠使用$.each來顯示使用field.location.latitude, field.location.longitude標記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
});
};
});
});
2 個解決方案
解決方案1
2 已采納 2015-11-25 14:34:33
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
});
});
代碼段：
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"></script> <div id="map"></div>
解決方案2
1 2015-11-25 14:26:35
您標記的代碼是正確的，但是您的數據中有些項目沒有location屬性，這就是為什么代碼無法完全正常工作的原因。
如果要添加$.each而不是標記，則可以使用$.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)
谷歌地圖半徑圈
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.