2013-10-02 4 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> 

이 조각을 확인하실 수 있습니다
관련 문제