1

我正在尝试创建一个凝胶化 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