使用传单从json文件加载圆坐标/使用从圆对象检索的数据
Using leaflets to load circle coordinates from a json file/Using data retrieved from a circle object
Im'试图从示例中重现代码http://www.d3noob.org/2014/03/leaflet-map-with-d3js-elements-that-are.html，
但它没有加载文件（我试过从我的电脑和网站加载文件）cirles.js，这是我的jsfiddle:
http://jsfiddle.net/U2z5G/
我的电脑里有这样一行：
d3.json("circles.js", function(collection)
编辑：这很有帮助，谢谢，现在我遇到了这个问题，我在地图上画了一些圆圈，当用户点击该区域时，函数应该返回一个带有该区域id的值，但Javascript似乎不会在本地/全局变量中存储太久。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet GeoJSON Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<style>
#map {
width: 800px;
height: 500px;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.legend {
text-align: left;
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
<script>
function changetext(id)
{
id.innerHTML=idEdo;
}
</script>
</head>
<body>
<center>
<div id="map" style="width: 700px; height: 500px"></div>
</center>
<script src="circles.json" type="text/javascript"></script>
<script
src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>
<script>
var bounds = new L.LatLngBounds(new L.LatLng(49.5, -11.3), new L.LatLng(61.2, 2.5));
var idEdo;
var map = L.map('map').setView([23.906, -102.534], 5);
L.tileLayer("http://tile.openstreetmap.org/{z}/{x}/{y}.png", {
minZoom: 5,
maxZoom: 6,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);
map.setMaxBounds([
[32.69487, -117.33398],
[14.0087, -87.09961]
]);
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.update = function (cn,tmp) {
this._div.innerHTML = cn ;
};
info.addTo(map);
function onEachFeature(feature, layer) {
var popupContent = feature.id + " >> ";
var contenido = '<h4>Oficinas ALAF</h4>';
var tmp;
if (feature.properties && feature.properties.nombre) {
var c = String(feature.properties.sede);
var tmp = c.split(",");
popupContent += feature.properties.nombre ;
info.update(contenido);
//idEdo = parseInt(feature.id),10);
}
layer.bindPopup(popupContent);
}
L.geoJson([estados], {
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 7.5,
fillColor: "#ff0000",
color: "#ff0022",
weight: 1,
opacity: 0.5,
fillOpacity: 0.6
});
}
}).addTo(map);
</script>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
这是circles.json:文件
var estados = {
"type": "FeatureCollection",
"features": [
{
"geometry": {
"type": "Point",
"coordinates": [
-111.88477,25.87899
]
},
"type": "Feature",
"properties": {
"nombre": "Baja California Sur",
"sede": [ "sede 1", "sede 2", "sede 3" ]
},
"id": 51
},
{
"geometry": {
"type": "Point",
"coordinates": [
-115.15869, 30.33495
]
},
"type": "Feature",
"properties": {
"nombre": "Baja California",
"sede": [ "sede 11", "sede 21", "sede 31" ]
},
"id": 52
},
{
"geometry": {
"type": "Point",
"coordinates": [
-110.91797, 29.91685
]
},
"type": "Feature",
"properties": {
"nombre": "Sonora"
},
"id": 54
},
{
"geometry": {
"type": "Point",
"coordinates": [
-106.21582, 29.15216
]
},
"type": "Feature",
"properties": {
"nombre": "Chihuahua"
},
"id": 55
},
{
"geometry": {
"type": "Point",
"coordinates": [
-102.04102, 27.76133
]
},
"type": "Feature",
"properties": {
"nombre": "Coahuila"
},
"id": 57
},
{
"geometry": {
"type": "Point",
"coordinates": [
-99.8877,25.64153
]
},
"type": "Feature",
"properties": {
"nombre": "Nuevo León"
},
"id": 58
},
{
"geometry": {
"type": "Point",
"coordinates": [
-98.61328,24.32708
]
},
"type": "Feature",
"properties": {
"nombre": "Tamaulipas"
},
"id": 74
},
{
"geometry": {
"type": "Point",
"coordinates": [
-107.44629,24.68695
]
},
"type": "Feature",
"properties": {
"nombre": "Sinaloa"
},
"id": 00
},
{
"geometry": {
"type": "Point",
"coordinates": [
-104.89746, 24.96614
]
},
"type": "Feature",
"properties": {
"nombre": "Durango"
},
"id": 00
},
{
"geometry": {
"type": "Point",
"coordinates": [
-103.00781,23.13026
]
},
"type": "Feature",
"properties": {
"nombre": "Zacatecas"
},
"id": 00
},
{
"geometry": {
"type": "Point",
"coordinates": [
-100.99731,22.26876
]
},
"type": "Feature",
"properties": {
"nombre": "San Luis Potosi"
},
"id": 00
},
{
"geometry": {
"type": "Point",
"coordinates": [
-88.90137,20.7972
]
},
"type": "Feature",
"properties": {
"nombre": "Yucatan"
},
"id": 00
},
{
"geometry": {
"type": "Point",
"coordinates": [
-88.33008,19.14517
]
},
"type": "Feature",
"properties": {
"nombre": "Quintana Roo"
},
"id": 00
},
{
"geometry": {
"type": "Point",
"coordinates": [
-90.52734,19.18668
]
},
"type": "Feature",
"properties": {
"nombre": "Campeche"
},
"id": 00
},
{
"geometry": {
"type": "Point",
"coordinates": [
-92.72461,18.22935
]
},
"type": "Feature",
"properties": {
"nombre": "Tabasco"
},
"id": 00
},
{
"geometry": {
"type": "Point",
"coordinates": [
-92.59277,16.46769
]
},
"type": "Feature",
"properties": {
"nombre": "Chiapas"
},
"id": 00
},
{
"geometry": {
"type": "Point",
"coordinates": [
-96.45996,16.80454
]
},
"type": "Feature",
"properties": {
"nombre": "Oaxaca"
},
"id": 00
},
{
"geometry": {
"type": "Point",
"coordinates": [
-99.8877,17.43451
]
},
"type": "Feature",
"properties": {
"nombre": "Guerrero"
},
"id": 00
}
,
{
"geometry": {
"type": "Point",
"coordinates": [
-104.0625,19.06212
]
},
"type": "Feature",
"properties": {
"nombre": "Colima"
},
"id": 00
}
,
{
"geometry": {
"type": "Point",
"coordinates": [
-104.10645,20.34463
]
},
"type": "Feature",
"properties": {
"nombre": "Jalisco"
},
"id": 00
}
,
{
"geometry": {
"type": "Point",
"coordinates": [
-101.95312,19.26967
]
},
"type": "Feature",
"properties": {
"nombre": "Michoacan"
},
"id": 00
}
,
{
"geometry": {
"type": "Point",
"coordinates": [
-104.98535,21.90228
]
},
"type": "Feature",
"properties": {
"nombre": "Nayarait"
},
"id": 00
}
,
{
"geometry": {
"type": "Point",
"coordinates": [
-102.44751,22.01436
]
},
"type": "Feature",
"properties": {
"nombre": "Aguascalientes"
},
"id": 00
}
,
{
"geometry": {
"type": "Point",
"coordinates": [
-100.99731,21.00247
]
},
"type": "Feature",
"properties": {
"nombre": "Guanajuato"
},
"id": 00
}
,
{
"geometry": {
"type": "Point",
"coordinates": [
-99.85474,20.84855
]
},
"type": "Feature",
"properties": {
"nombre": "Querétaro"
},
"id": 00
}
,
{
"geometry": {
"type": "Point",
"coordinates": [
-98.9978,20.52993
]
},
"type": "Feature",
"properties": {
"nombre": "Hidalgo"
},
"id": 00
}
,
{
"geometry": {
"type": "Point",
"coordinates": [
-99.68994,19.48731
]
},
"type": "Feature",
"properties": {
"nombre": "Estado de México"
},
"id": 00
}
,
{
"geometry": {
"type": "Point",
"coordinates": [
-99.03076,18.76071
]
},
"type": "Feature",
"properties": {
"nombre": "Morelos"
},
"id": 00
}
,
{
"geometry": {
"type": "Point",
"coordinates": [
-98.06396,18.83352,
]
},
"type": "Feature",
"properties": {
"nombre": "Puebla"
},
"id": 00
}
,
{
"geometry": {
"type": "Point",
"coordinates": [
-98.1958,19.42515
]
},
"type": "Feature",
"properties": {
"nombre": "Tlaxcala"
},
"id": 00
}
,
{
"geometry": {
"type": "Point",
"coordinates": [
-96.5918,19.34224
]
},
"type": "Feature",
"properties": {
"nombre": "Veracruz"
},
"id": 00
}
,
{
"geometry": {
"type": "Point",
"coordinates": [
-99.14062,19.43292
]
},
"type": "Feature",
"properties": {
"nombre": "Distrito Federal"
},
"id": 00
}
]
}；
enter code here
从远程服务器请求json时，您遇到了跨域请求问题。
如果在加载页面（或jsfiddle页面）时查看调试工具，您会在cosole中看到No Access-Control-Allow-Origin错误。
一个解决方案是建立一个代理服务器来解决这个问题。。。但是
一个更简单的解决方案是执行以下操作：
-
复制您试图加载的circle.json文件的实际内容，
-
将该内容粘贴到文件系统上的本地文档中
-
请参阅脚本标签中的本地文件
注意：如果你想了解更多关于跨域请求问题的信息，请谷歌"跨域请求"或"cors"。或者阅读这篇关于跨域ajax请求的文章，或者这篇关于同源策略的维基百科页面。美好时光。。。
编辑后：
刚刚看到你对问题的编辑。将扩展名从.json更改为.js并不能解决问题（除非对json进行一些修改（比如将其分配给变量），否则json不会被识别为有效的javascript，此时D3对象将无法再将其识别为json…）。
另一个解决方案是将json直接粘贴到javascript中。。。
这是一个正在工作的jsfiddle。
相关文章：
- 在控制器和数据对象之间同步数据
- AngularJs指令，该指令创建内部有数据对象的新指令
- 从数据对象数组创建折线图
- Vue.js 数据对象不适用于某些 lodash 函数
- 无法获取带有 .data(el，'dataname'）.sublev 的数据对象
- React.js+Flux-正确初始化存储中的数据对象
- 如何调用另一个js文件中的函数或触发一个自定义事件，该事件将参数作为Jquery中的数据对象传递
- Meteor模板数据对象可防止javascript事件触发
- 我该如何访问由gullow灰质插件创建的数据对象(当使用nunjucks编译html文件时）
- 如何使用javascript数据对象?如何通过变量访问条目
- Knockout:为许多数据对象绑定模板引导模式
- 如何将数据对象添加到JSON对象中
- jQuery+php如何在数据对象中返回多个值
- $http put v create - 每个 (JavaScript） 中从 .success(） 返回的数据对象有什
- 数据对象内的 D3 循环数组
- 在jQuery的.on(）数据对象中访问$(this）
- AngularJS模态窗口数据/对象流
- 关于在 Vue.js 中设置数据对象属性的最佳实践
- 如何构建数据对象以在不知道多少时传递给 ajax
- 如何访问放置在谷歌地图上的geoJSON数据中的数据对象
