Question

我正在为我父亲的网站，房地产网站开发一个HTML代码。这就是我想要做的事情，我在地图框上有一个带有40个标记的地图，包含该机构房屋的所有坐标，我需要用多边形进行研究，所以当我绘制一个多边形时在特定区域我需要在该区域显示我的json文件中包含的所有标记。我不知道如何继续使用ajax部分，请帮助我。所有的作品，我都有地图和绘制多边形的工具，但是当我完成多边形时，我看不到标记显示，我想我在ajax部分做错了，因为它＆＃39;没有连接到json文件的右变量（latlong）。

这是我迄今为止所做的： -

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"id":"marker-iwb5nwz22","title":"Cinisello Balsamo","description":"","marker-size":"medium","marker-color":"#26852A","marker-symbol":""},"geometry":{"coordinates":[9.2218,45.5571],"type":"Point"},"id":"0087f60eb6b6cdae6cb1ccc458964942"},{"type":"Feature","properties":{"id":"marker-iwb5qyt0d","title":"Giussano","description":"","marker-size":"medium","marker-color":"#26852A","marker-symbol":""},"geometry":{"coordinates":[9.2112,45.6941],"type":"Point"},"id":"1c5fd76f572645fff7da2b705382c4c9"},{"type":"Feature","properties":{"id":"marker-iwb5oaqe3","title":"Monza","description":"","marker-size":"medium","marker-color":"#26852A","marker-symbol":""},"geometry":{"coordinates":[9.2749,45.5864],"type":"Point"},"id":"1c7efc5ae8a12f635f44e4fea3095d01"},{"type":"Feature","properties":{"id":"marker-iwb5ojra4","title":"Paderno Dugnano","description":"","marker-size":"medium","marker-color":"#26852A","marker-symbol":""},"geometry":{"coordinates":[9.1634,45.5731],"type":"Point"},"id":"24c45843c9ee95b94681568b3fe41bd0"},{"type":"Feature","properties":{"id":"marker-iwb5h0fl0","title":"Bresso","description":"","marker-size":"medium","marker-color":"#26852A","marker-symbol":""},"geometry":{"coordinates":[9.1975,45.5379],"type":"Point"},"id":"34548447bec6dfd7471d5ec354288f3e"},{"type":"Feature","properties":{"id":"marker-iwb5qegjb","title":"Seregno","description":"","marker-size":"medium","marker-color":"#26852A","marker-symbol":""},"geometry":{"coordinates":[9.2052,45.6501],"type":"Point"},"id":"37722a0c0498c5db0866c4743ecd6e0e"},{"type":"Feature","properties":{"id":"marker-iwb5q8sda","title":"Sesto San Giovanni","description":"","marker-size":"medium","marker-color":"#26852A","marker-symbol":""},"geometry":{"coordinates":[9.2417,45.5394],"type":"Point"},"id":"37a88632dc9725a38c5ff5820c11c409"},{"type":"Feature","properties":{"id":"marker-iwb5qjnlc","title":"Limbiate","description":"","marker-size":"medium","marker-color":"#26852A","marker-symbol":""},"geometry":{"coordinates":[9.129,45.5968],"type":"Point"},"id":"58d9c9d9a0270c6d19a4552c8e2be29e"},{"type":"Feature","properties":{"id":"marker-iwb5nls81","title":"Cusano Milanino","description":"","marker-size":"medium","marker-color":"#26852A","marker-symbol":""},"geometry":{"coordinates":[9.1834,45.5531],"type":"Point"},"id":"66e41c85168a84369bc0e5fdf0b6ce88"},{"type":"Feature","properties":{"id":"marker-iwb5q3vb9","title":"Milano","description":"","marker-size":"medium","marker-color":"#26852A","marker-symbol":""},"geometry":{"coordinates":[9.1895,45.4643],"type":"Point"},"id":"71cbc062b709f50a5b4a3161277e6ccf"},{"type":"Feature","properties":{"id":"marker-iwb5oy4d6","title":"Muggiò","description":"","marker-size":"medium","marker-color":"#26852A","marker-symbol":""},"geometry":{"coordinates":[9.2262,45.5884],"type":"Point"},"id":"8d8f997e744adb924b70487893a2e3cf"},{"type":"Feature","properties":{"id":"marker-iwb5pc0n8","title":"Baranzate","description":"","marker-size":"medium","marker-color":"#26852A","marker-symbol":""},"geometry":{"coordinates":[9.1172,45.5272],"type":"Point"},"id":"c167525db8d8c9dbbaa35c57623a6bdc"},{"type":"Feature","properties":{"id":"marker-iwb5p4sj7","title":"Rho","description":"","marker-size":"medium","marker-color":"#26852A","marker-symbol":""},"geometry":{"coordinates":[9.0401,45.5309],"type":"Point"},"id":"d4393729360e4b928f24b9f09c8865eb"},{"type":"Feature","properties":{"id":"marker-iwb5oq065","title":"Cormano","description":"","marker-size":"medium","marker-color":"#26852A","marker-symbol":""},"geometry":{"coordinates":[9.1709,45.5396],"type":"Point"},"id":"e756bae22ebcd7819cc28386f4438091"},{"type":"Feature","properties":{"id":"marker-iwb5r4yle","title":"Lissone","description":"","marker-size":"medium","marker-color":"#26852A","marker-symbol":""},"geometry":{"coordinates":[9.2465,45.6156],"type":"Point"},"id":"fa49afd510ac340c2d6ed5787aafaaf0"}],"id":"fabiobarosi.29l7anjh"}

＆＃13;

<html>
<head>
<title>Map Search</title>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.ie.css" /><![endif]-->

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>

<script language="javascript">
$(document).ready(function() {

  var map = new L.Map('map');

  var MapBox = L.tileLayer('http://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZmFiaW9iYXJvc2kiLCJhIjoiY2l3YjNqZ2ViMDAydTJ5cDRqMXl2NHZ2ciJ9.bv8ndwbT2ItNCoz2gH13XA', {
	attribution: 'Imagery from <a href="http://mapbox.com/about/maps/">MapBox</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
	subdomains: 'abcd',
	id: 'fabiobarosi.29l7anjh',
accessToken:'pk.eyJ1IjoiZmFiaW9iYXJvc2kiLCJhIjoiY2l3YjNqZ2ViMDAydTJ5cDRqMXl2NHZ2ciJ9.bv8ndwbT2ItNCoz2gH13XA'
}).addTo(map);

  var bresso = new L.LatLng(45.53792, 9.18921);
  map.setView(bresso,10);

  var drawnItems = new L.FeatureGroup();
  map.addLayer(drawnItems);

  var drawControl = new L.Control.Draw({
      edit: {
          featureGroup: drawnItems
      }
  });

  map.addControl(drawControl);
  map.on('draw:created', function (e) {
      var latLngs = $.map(e.layer.getLatLngs(), function(o) {
          return { name: "points", value: o.lat + "," + o.lng };
      });

      $.ajax({
      
          type: 'GET',
          dataType: 'json',
          url: 'https://www.dropbox.com/s/3m57o54cluj4enq/features-2.json?dl=0',
          success: function(data) {
              $.each (data, function (idx) {
                  var markerLocation = new L.LatLng(data[idx].geo.lat, data[idx].geo.lng);
                  var marker = new L.Marker(markerLocation);
                  map.addLayer(marker);
              });
          }
      });

      map.addLayer(e.layer);
  });
});
</script>

</head>
<body>
  <div id="map" style="height: 100%"></div>
</body>
</html>

＆＃13;

Answer 1

此示例存在多个问题，但第一个问题是此ajax请求无法成功：您无法从网页上获取Dropbox中的内容，因为Dropbox不会{{{ 3}}。为了执行have CORS enabled，您需要拥有脚本本地资源（在同一服务器上），或者在拥有资源的服务器上启用CORS。

我应该如何更改$ .ajax部分代码才能解决问题？

1 个答案: