Question

我正在尝试根据存储在gist中的json文件来显示Leaflet Marker。到目前为止，我没有管理，因为我的网络地图（http://geo.uzh.ch/~gboo/netap/netap.html）仅显示基本地图而不是标记。

当我在Firefox中检查网页时，它给了我这个错误：

TypeError：undefined不是函数（靠近＆＃39; ...}）。addTo（map）; ...＆＃39;）

这里是代码snipet：

$(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对象作为Leaflet Markers

2 个答案: