OpenLayers：在 asp .net 网页中嵌入地图答案

【问题标题】：OpenLayers: embedding map in asp .net webpageOpenLayers：在 asp .net 网页中嵌入地图
【发布时间】：2014-08-27 11:14:51
【问题描述】：

我需要在带有标记的开放街道地图上使用纬度和经度在地图上显示位置。我在谷歌搜索后尝试了一些代码。但什么也没显示。我正在提供我的代码和一些我尝试过的示例链接。

<head runat="server">
  <title>OpenLayers Simplest Example</title>
  <script src="OpenLayers.js" type="text/javascript"></script>
  <script src="osm-marker-popup.js" type="text/javascript"></script>
</head>
<body onload="init()">
  <form id="form1" runat="server">
    <h1 id="title">
     OSM with Marker and Popup</h1>
     <p id="shortdesc">
       Demonstrate use of an OSM layer with a marker and a popup.
     </p>
     <div id="tags">
        openstreetmap osm marker popup
     </div>
     <div id="map">
     </div>
     <div id="docs">
        <p>
            A common use case for OpenLayers is to display a marker at a location on the map,
            and add some information in a popup. It is also easy to add a tooltip with a short
            description. See the <a href="osm-marker-popup.js" target="_blank">osm-marker-popup.js
            source</a> to see how this is done.
        </p>
    </div>
</form>

osm-marker-popup.js 代码

var map;
function init() {

// The overlay layer for our marker, with a simple diamond as symbol
var overlay = new OpenLayers.Layer.Vector('Overlay', {
    styleMap: new OpenLayers.StyleMap({
        externalGraphic: '../img/marker.png',
        graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
        title: '${tooltip}'
    })
});

// The location of our marker and popup. We usually think in geographic
// coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
var myLocation = new OpenLayers.Geometry.Point(10.2, 48.9)
    .transform('EPSG:4326', 'EPSG:3857');

// We add the marker with a tooltip text to the overlay
overlay.addFeatures([
    new OpenLayers.Feature.Vector(myLocation, { tooltip: 'OpenLayers' })
]);

// A popup with some information about our location
var popup = new OpenLayers.Popup.FramedCloud("Popup",
    myLocation.getBounds().getCenterLonLat(), null,
    '<a target="_blank" href="http://openlayers.org/">We</a> ' +
    'could be here.<br>Or elsewhere.', null,
    true // <-- true if we want a close (X) button, false otherwise
);

// Finally we create the map
map = new OpenLayers.Map({
    div: "map", projection: "EPSG:3857",
    layers: [new OpenLayers.Layer.OSM(), overlay],
    center: myLocation.getBounds().getCenterLonLat(), zoom: 15
});
// and add the popup to it.
  map.addPopup(popup);
}

链接。 http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example http://wiki.openstreetmap.org/wiki/OpenLayers_Marker

【问题讨论】：

您在哪里创建 OpenLayers 地图？您缺少示例中最重要的代码。仅仅包括 OpenLayers.js 是不够的。
@scai 请告诉我我错过了什么。
您错过了通过new OpenLayers.Map() 创建地图、添加图层等等。请再次查看示例。
@scai 它在 osm-marker-popup.js 中。此js文件中的完整脚本功能。
如果您不向我们展示您的代码，应该如何帮助您？您是否已经检查过浏览器的错误控制台？

标签： javascript asp.net maps openlayers openstreetmap

【解决方案1】：

改变

 <script src="OpenLayers.js" type="text/javascript"></script>

到

 <script src="http://openlayers.org/api/OpenLayers.js"></script>

【讨论】：