GeoJson 对象作为传单标记

Question

我正在尝试根据存储在 gist 中的 json 文件可视化传单标记。到目前为止，我没有管理，因为我的网络地图 (http://geo.uzh.ch/~gboo/netap/netap.html) 只显示底图而不显示标记。

当我在 Firefox 中检查网页时，出现以下错误：

TypeError: undefined is not a function (near '...}).addTo(map);...')

这里是代码片段：

$(document).ready(function() {

var map = L.map('map', { 
            center: [46.798333, 8.231944], 
            zoom: 8,    
            minZoom: 9,
            maxZoom: 16,
            zoomControl:true
        });

        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '<a href="http://openstreetmap.org">OpenStreetMap</a>' 
        }).addTo(map)   


    $.getJSON("https://gist.githubusercontent.com/netapschweiz/13d37c1ee99e2c052246/raw/f64297e6bc783c1af5844921012116703fd37e0d/map.geojson", {
        pointToLayer: function(feature, latlng) {
            var smallIcon = L.icon({
                      iconSize: [27, 27],
                      iconAnchor: [13, 27],
                      popupAnchor:  [1, -24],
                      iconUrl: 'www.geo.uzh.ch/~gboo/netap/img/catMarker.png'
                      });
                      return L.marker(latlng, smallIcon);
    }
}).addTo(map);
});

有人可以帮助我吗？非常感谢！

Answer 1

看来您的困惑的核心是认为 $.getJSON 与 L.geoJson 有某种关系。它不是：$.getJSON 是一个获取数据的 jQuery 函数，L.geoJson 是一个将数据放在地图上的 Leaflet 函数。要修复此代码，您需要阅读 $.getJSON 的 jQuery 文档（说明您需要提供回调作为第二个参数）和 L.geoJson 的 Leaflet 文档（说明您需要提供数据作为第一个参数）。

Answer 2

那就是要走的路：

  var geojsonMarkerOptions = L.icon({
        iconUrl: 'http://',
        iconSize:     [30, 30],
        iconAnchor:   [15, 15],
        popupAnchor:  [0, -15]
    });

    $.getJSON('http://', function(data) {
            L.geoJson(data, {
        pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {icon: geojsonMarkerOptions})
        }})
    }).addTo(map);

GeoJson 对象作为传单标记

GeoJson object as Leaflet Markers

geojson

leaflet