javascript - 传单控制地理编码器 - 异常 : "Nominatim is not a constructor"

Question

我在使用传单 map 的传单控制地理编码器插件时遇到了一些真正的问题(leaflet-control-geocoder)，我一定是个非常白痴，因为我只是尝试复制我在本页demo-plugin上找到的相同示例。 。问题是当我尝试初始化控件时，出现异常“此‘GeoCoder’不是构造函数”。下面是示例代码:

//Set leaflet Map, with markercluster and other basic functionality
//Set variables
var geoCoderGoogle,geoCoderControl;
var btn,selection,marker,selector;
var geocoders = {
    'Nominatim': L.Control.Geocoder.nominatim(),
    'Bing': L.Control.Geocoder.bing(bingAPIKey),
    'Mapbox': L.Control.Geocoder.mapbox(mapBoxAPIKey),
    'Google': L.Control.Geocoder.google(googleAPIKey),
    'Photon': L.Control.Geocoder.photon()
};
//Set geocoders on ready of the document
jQuery( document ).ready(function() {
    //Init the leafletMap if  is not setted
    //invoke the geocoder plugin on the leaflet map
    addPluginGeoCoder();
    //implement select of the geocoder.
    for (var name in geocoders) {
        btn = L.DomUtil.create('button', 'leaflet-bar', selector);
        btn.innerHTML = name;
        (function(n) {
            L.DomEvent.addListener(btn, 'click', function() {
                select(geocoders[n], this);
            }, btn);
        })(name);
        if (!selection) select(geocoders[name], btn);
    }


});

function select(geocoder, el) {
    if (selection) L.DomUtil.removeClass(selection, 'selected');
    geoCoderControl.options.geocoder = geocoder;
    L.DomUtil.addClass(el, 'selected');
    selection = el;
}

//Now add the control for the Geocoder with a function
function addPluginGeoCoder() {
    alert("Compile addPluginGeoCoder...");
    try {
        if (jQuery.isEmptyObject(geoCoderControl)) {
            alert("1");
            selector = L.DomUtil.get('geocode-selector');
            alert("2")
            geoCoderControl = new L.Control.Geocoder({ geocoder: null });
            alert("3")
            geoCoderControl.addTo(map);
            alert("4")
        } else {
            map.addControl(geoCoderControl);
        }
        alert("...compiled addPluginGeoCoder");
    }catch(e){
        alert("Exception:addPluginGeoCoder->"+e.message);
    }
}

现在，当我运行这段代码时，我收到以下警报:“1”、“2”、“异常:addPluginGeoCoder-> Nominatim 不是构造函数”。即使我从“地理编码器”列表中删除 Nominatim Geocoder，我也会遇到同样的问题。

无论如何，我的最终目标是将 leaflet GeoCoder 插件与 google api 结合使用，并将地址转换为坐标，获取坐标并将其保存在数组中以供更多用途。因此，在设置 GeoCoderController 之后，我可能会调用这样的函数:

function saveInfo(){ 
 geoCoderControl.options.geocoder.geocode(address, function(results) {
                var latLng= new L.LatLng(results[0].center.lat, results[0].center.lng);
                marker = new L.Marker (latLng);
                map.addlayer(marker);
                addressVar = address;
                otherVar = result.html;
                alert("add marker:" + result.name + "," + result.center.lat + "," + result.center.lng + "," + otherVar);
                array.push(result.name, otherVar, result.center.lat, result.center.lng,addressVar);
            });
}

欢迎任何帮助。

更新:我在 jsfiddle 示例中创建了相同的问题:link example .

Firefox 浏览器说:“Nominatim 不是构造函数”。
Internet Explorer 提示:“对象不支持此操作”。

Answer 1

嗯，我猜您使用的是旧版本，您所看到的问题已在此处修复:https://github.com/perliedman/leaflet-control-geocoder/commit/423610e7f63fd381357f44b2bc9853bd919c3e88

升级到 1.3.1，据我所知，这个问题应该得到修复。

顺便说一句:您真的应该考虑使用 Chrome 中的开发人员工具，它比通过 alert 进行调试要强大得多。