打开街道地图地理定位答案

【问题标题】：openstreetmap geolocation打开街道地图地理定位
【发布时间】：2012-07-04 11:45:48
【问题描述】：

我是新手，我在互联网上阅读openstreetmap的可能性，还阅读了有关openlayers的信息...首先，我需要的是获取位置并创建相应的地图...我找到了openlayers 的好例子，代码如下：

<html>
  <head>
    <title>HTML5 geolocation with Openstreetmap and OpenLayers</title>
    <style type="text/css">
      html, body, #basicMap {
          width: 240;
          height: 320;
          margin: 10;
      }
    </style>

    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script>
      function init() {
        map = new OpenLayers.Map("basicMap");
        var mapnik = new OpenLayers.Layer.OSM();
        map.addLayer(mapnik);

        navigator.geolocation.getCurrentPosition(function(position) {
            document.getElementById('anzeige').innerHTML="Latitude: " + position.coords.latitude + "   Longitude: " +
            position.coords.longitude + "<p>";
            var lonLat = new OpenLayers.LonLat(position.coords.longitude,
                                    position.coords.latitude)
                      .transform(
                                  new OpenLayers.Projection("EPSG:4326"), //transform from WGS 1984
                                              map.getProjectionObject() //to Spherical Mercator Projection
                                            );

            markers.addMarker(new OpenLayers.Marker(lonLat));

            map.setCenter(lonLat, 14 // Zoom level
            );

        });
        //map = new OpenLayers.Map("basicMap");
        //var mapnik = new OpenLayers.Layer.OSM();
        //map.addLayer(mapnik);
        map.setCenter(new
        OpenLayers.LonLat(3,3) // Center of the map
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
          ), 15 // Zoom level
         );
        var markers = new OpenLayers.Layer.Markers( "Markers" );
        map.addLayer(markers);

      }
    </script>

  </head>

  <body onload="init();">
<center>
HTML5 geolocation:
<br>
    <div id="basicMap"></div>
<br>HTML5 geolocation<br>
<br>with Openstreetmap and OpenLayers<br>
For Android Froyo,iPhone,iPAD,iPod
<br>
Your position estimated by browser geolocation API:<p>

<div id="anzeige">(will be displayed here)<p></div>
<a href="http://www.dr-bischoff.de">Andreas Bischoff</a>

<br>(view source to see how it works 
</center>
  </body>
</html>

你可以在这里看到一个活生生的例子：http://www.pediaphon.org/~bischoff/location_based_services/ 下一步，我需要绘制一条显示遵循的路线的划线。这是一个画线的例子（按住 shift + 点击鼠标）：http://openlayers.org/dev/examples/draw-feature.html

但我是新手，我不知道如何调用 openlayers 的 api 以便从起点到终点画线......欢迎任何帮助

最好的问候。

编辑： 我只是在标签之前复制了这段代码（Drawing a path with a line in OpenLayers using JavaScript），但我没有看到画线：

    var lineLayer = new OpenLayers.Layer.Vector("Line Layer"); 

    map.addLayer(lineLayer);                    
    map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));                                     
    var points = new Array(
               /*I put these coords of my city*/
       new OpenLayers.Geometry.Point(-3.7904085, 37.76225609999999 ),
       new OpenLayers.Geometry.Point(-4.7904085, 39.76225609999999 )
    );

    var line = new OpenLayers.Geometry.LineString(points);

    var style = { 
      strokeColor: '#0000ff', 
      strokeOpacity: 0.5,
      strokeWidth: 5
    };

    var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
    lineLayer.addFeatures([lineFeature]);

【问题讨论】：

标签： geolocation openlayers openstreetmap

【解决方案1】：

丹尼尔，

这里已经解决了这个问题

Draw line between two points using OpenLayers

【讨论】：