Question

我将使用a标签激活网站上的标记。我有四个地方。例如：我单击链接A。在我打开的街道地图上将显示地点A的标记。您知道吗？这是我的代码：

这是我的Javascript代码： //

//This are the four Places:

var sontheim;
var bildungscampus;
var kuenzelsau;
var hall;

// Here began the function to show the map

function drawmap() {
// Popup und Popuptext mit evtl. Grafik
var popuptext="";

OpenLayers.Lang.setCode('de');

// Position und Zoomstufe der Karte
var lon = 9.2187;
var lat = 49.1425;
var zoom = 5;

map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.PanZoomBar()],
maxExtent:
new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34, 20037508.34),
numZoomLevels: 18,
maxResolution: 156543,
units: 'meters'
});

layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
layer_markers = new OpenLayers.Layer.Markers("Address", { projection: new OpenLayers.Projection("EPSG:4326"), 
visibility: true, displayInLayerSwitcher: false });

map.addLayers([layer_mapnik, layer_markers]);
jumpTo(lon, lat, zoom);

//The positions of the places with the ending tag from the javascript.

// Position Place A
sontheim = addMarker(layer_markers, 9.21879, 49.1425, popuptext);

// Position Place B
bildungscampus = addMarker(layer_markers,9.21640,49.14793,"<b>Blakeks</b><p />",false,0);

// Position Place C
kuenzelsau = addMarker(layer_markers,9.71263,49.27522,"<b>Blakeks</b><p />",false,0);

// Position Place D
hall = addMarker(layer_markers,9.74393,49.11254,"<b>Blakeks</b><p />",false,0);

}

//]]>
</script>

这是我的HTML代码（带有这些a-tag的不同链接，单击后我将激活该标记）：

<ul>
<a class="nav-link" value="sontheim" id="sontheim">Campus Sontheim</a>
</li>
<li class="nav-item">
<a class="nav-link" value="bildungscampus" id="bildungscampus">Bildungscampus</a>
</li>
<li class="nav-item">
<a class="nav-link" value="kuenzelsau" id="kuenzelsau">Campus Künzelsau</a>
</li>
<li class="nav-item"><a class="nav-link" value="hall" id="hall">Campus Schwäbisch Hall</a>
</li>
</ul>

在A标记上激活OpenLayers上的标记

0 个答案: