Question

我在openlayers中有以下代码

<script defer="defer" type="text/javascript">
    var map = new OpenLayers.Map('map');
    var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
        "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });
    var dm_wms = new OpenLayers.Layer.WMS(
        "Canadian Data",
        "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
        {
            layers: "bathymetry,land_fn,park,drain_fn,drainage," +
                    "prov_bound,fedlimit,rail,road,popplace",
            transparent: "true",
            format: "image/png"
        }, { isBaseLayer: true }
    );

    var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
    map.setBaseLayer(vectorLayer);
    OpenLayers.Geometry.Point(77.391026, 28.535516), { some: 'data' }, { externalGraphic: 'Image/map-icons/Banquet_and_Marriage_halls.png', graphicHeight: 21, graphicWidth: 21 });

    var center = new OpenLayers.Geometry.Point(77.391026, 28.535516);

    center.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
    map.setCenter(new OpenLayers.LonLat(77, 28), 4);
    var markers = new OpenLayers.Layer.Markers("Markers");


    var ll = new OpenLayers.LonLat(77.391026, 28.535516);
    var popupClass = OpenLayers.Popup.Anchored;
    var popupContentHTML = '<div style="height:40px;">Hello Noida</div>';
    addMarker(ll, popupClass, popupContentHTML, true);
    ll = new OpenLayers.LonLat(74.613647, 30.914007);
    popupClass = OpenLayers.Popup.Anchored;
    popupContentHTML = '<div style="height:40px;">Hello Punjab</div>';
    addMarker(ll, popupClass, popupContentHTML, true);

    map.addLayers([wms, dm_wms, markers]);


    var feature;
    var popup = null;
    function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {

        feature = new OpenLayers.Feature(markers, ll);
        feature.closeBox = closeBox;
        feature.popupClass = popupClass;
        feature.data.popupContentHTML = popupContentHTML;
        feature.data.overflow = (overflow) ? "auto" : "hidden";

        var marker = feature.createMarker();

        var markerClick = function (evt) {
            //alert(popup);
            if (popup != null)
                popup.hide();
            popup = this.createPopup(this.closeBox);
            popup.contentSize = new OpenLayers.Size(10, 20);
            map.addPopup(popup);
            popup.show();

        };
        marker.events.register("mousedown", feature, markerClick);

        markers.addMarker(marker);
    }

</script>

如果我删除了map.setCenter（），那么一切正常。当我尝试在我的代码中使用它时，我的地图突然消失了。我在控制台窗口中也遇到了以下错误：

Cannot call method 'containsLonLat' of null

我在这个网站上尝试了所有可能的方法，但没有到达任何地方..可能是什么问题？

Answer 1

我想你在代码中加了一个额外的Bracket，试试map.setCenter（new OpenLayers.LonLat（77,28），4）;看它是否有效。

Answer 2

使用leaflet https://leafletjs.com/

var map = L.map('mapid').setView([77.391026, 28.535516], 16);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attributionControl: true
        }).addTo(map);

参考：https://leafletjs.com/examples/quick-start/

为什么map.setCenter不工作？

2 个答案: