1

私は、geloalization Web アプリケーションを作成しようとしているので、さまざまなツールを調べたところ、openlayers JavaScript ライブラリがこのプロジェクトを達成するのに役立つことがわかりました。しかし、私がそれを使い始めると、多くの問題が発生します。コードを修正するか、このタスクを実行する別の方法を教えてくれる人がいるのだろうか

このxhtmlページを使用して、マーカーがマップ上を定期的に移動することを示していますが、目的の結果を得ることができます。

 <?xml version='1.0' encoding='UTF-8' ?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<head>
<title>OpenLayers Demo</title>
<style type="text/css">
html,body,#basicMap {
width: 80%;
height: 80%;
margin: 0;
 }
 </style>
 <script src="OpenLayers.js"></script>
 <script>
var mapnik;
var lat= 32;
var lon=10 ;
var zoom=5;
var map; 
var marker;
var lonLat;
var fromProjection;
var toProjection;  
  function init() {
    map = new OpenLayers.Map("basicMap");
     mapnik   = new OpenLayers.Layer.OSM();
     fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
     toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
    lonLat = new OpenLayers.LonLat(lon,lat).transform( fromProjection, toProjection);
    map.addLayer(mapnik);
    map.setCenter(lonLat,zoom );
    layerMarkers = new OpenLayers.Layer.Markers("Markers");
    map.addLayer(layerMarkers);
    var size = new OpenLayers.Size(30,40);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    var icon = new OpenLayers.Icon('icon/jeep.png',size,offset);
    marker =new OpenLayers.Marker(lonLat,icon);
    layerMarkers.addMarker(marker);
    window.setInterval("setMarker()",100);
  }
  function setMarker(){
  lon=lon+0.1;
  lat=lat+0.1;
  var lonLat = new OpenLayers.LonLat(lon, lat).transform(new     OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
  var newPx = map.getLayerPxFromViewPortPx(map.getPixelFromLonLat(new     OpenLayers.LonLat(lon, lat).transform(map.displayProjection, map.projection)));
  marker.moveTo(newPx);
   }
  </script>
</head>
<body >
<div id="basicMap"></div>
<script type="text/javascript">init();</script>
</body>
  </html>
4

0 に答える 0