0
임 '예 http://www.d3noob.org/2014/03/leaflet-map-with-d3js-elements-that-are.html의 코드를 재현하는 시도에서 검색된 데이터,는 JSON 파일에서 좌표/원 객체
하지만이 파일을로드하지 않습니다 사용 (내가 시도로드
d3.json("circles.js", function(collection)
내가이 줄을 : 내 PC에서와 웹 사이트) circles.js에서 파일 여기 내 jsfiddle입니다
편집 : 도와 줘서 고마워요. 이제이 문제가 생겼습니다. 사용자가 해당 영역을 클릭하면 해당 영역의 ID가있는 값을 반환해야하지만 Javascript처럼 보이지 않는지도 위에 몇 개의 원을 배치했습니다. for를 로컬/전역 변수에서 long으로 저장하십시오.
<!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>
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