2013-10-02 51 views
0

我导出了OSM地图。使用maperative制作瓷砖。现在我想在特定位置添加标记。以上是执行此操作的代码。标记不显示。请提出建议。我从网上提供的样本中提取了代码。标记未显示

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<HTML> 
    <HEAD> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
    <TITLE>Simple Demo</TITLE> 
    <style type="text/css"> 
    #map{ 
     width: 100%; 
     height: 100%; 
     border: 0px; 
     padding: 0px; 
     position: absolute; 
    } 
    body{ 
     border: 0px; 
     margin: 0px; 
     padding: 0px; 
     height: 100%; 
    } 
    </style> 
    <script src="OpenLayers.js"></script> 
    <script src="OpenStreetMap.js"></script> 
    <script type="text/javascript"> 
     var map; 
     var x=17.44458293043854; 
     var y=78.34593429754106; 
     function init(){ 
      map = new OpenLayers.Map('map',{ maxExtent: new OpenLayers.Bounds(78.336074588700086, 17.440730940004993, 78.36232312320854, 17.449071913098244), 
        numZoomLevels: 19, 
        maxResolution: 156543.0399, 
        units: 'm', 
        projection: new OpenLayers.Projection("EPSG:900913"), 
        displayProjection: new OpenLayers.Projection("EPSG:4326") 
       }); 

      var newLayer = new OpenLayers.Layer.OSM("New Layer", "file://localhost/C:/Users/Pulkit/Downloads/OpenLayers-2.13.1/Tiles/${z}/${x}/${y}.png", {numZoomLevels: 19}); 
      map.addLayer(newLayer); 
      map.addControl(new OpenLayers.Control.LayerSwitcher()); 
      var lonLat = new OpenLayers.LonLat(78.349198855954313, 17.444901426551617).transform(map.displayProjection, map.projection); 
      if (!map.getCenter()) map.setCenter (lonLat, 11); 

      var markers = new OpenLayers.Layer.Markers("Markers"); 
      map.addLayer(markers); 
      markers.clearMarkers(); 
      var size = new OpenLayers.Size(21,25); 
      var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); 
      var location = new OpenLayers.LonLat(17.44500562,78.34648309).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); 
      var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset); 

      markers.addMarker(new OpenLayers.Marker(location,icon.clone())); 

      //var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset); 

      //map.addLayer(markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(x, y),icon))); 
      //markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(17.44458293043854,78.34593429754106),icon)); 
      //markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(17.44458293043854,78.34593429754106),icon.clone())); 
     } 

     /*function loadMarker(){ 
      markers.clearMarkers(); 
      var size = new OpenLayers.Size(21,25); 
      var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); 
      var location = new OpenLayers.LonLat(17.44500562,78.34648309).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); 
      var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset); 

      markers.addMarker(new OpenLayers.Marker(location,icon.clone())); 
     }*/ 

    </script> 
    </HEAD> 
    <BODY onload="init()"> 
    <div id="map"></div> 
    </BODY> 
</HTML> 

回答

1

您可以检查这段代码

<html> 
<head> 
    <title>OpenLayers Example with Marker</title> 
    <script src="http://openlayers.org/api/OpenLayers.js"></script> 
</head> 
<body> 
    <div style="width:100%; height:100%" id="map"></div> 
     <script type="text/javascript"> 
     { 
      var map, osm; 
      map = new OpenLayers.Map('map'); 
      osm = new OpenLayers.Layer.OSM(); 
      map.addLayer(osm); 
      var lonlat = new OpenLayers.LonLat(0, 0).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); 
      var zoom = 4; 
      map.setCenter(lonlat, zoom); 
      var marker = new OpenLayers.Layer.Markers("Markers"); 
      var size = new OpenLayers.Size(40, 40); 
      var offset = new OpenLayers.Pixel(-(size.w/2), -(size.h/2)); 
      var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset); 
      map.addLayer(marker);    
      var trackMarker = new OpenLayers.Marker(lonlat, icon); 
      marker.addMarker(trackMarker); 
     } 
     </script> 
</body>