让用户在Google地图上绘图?

时间:2011-03-16 19:04:13

标签: javascript google-maps google-maps-api-3

是否有人知道是否可以允许用户在Google地图上从A点到B点画线?

如果是这样,通常如何做?

5 个答案:

答案 0 :(得分:2)

查看polylines上的文档。您只需在地图上添加“点击”事件并处理线条的绘制。

答案 1 :(得分:2)

您可以使用折线,并使用gooogle.maps.LatLng指定两个或更多点。这是一个JSFiddle Demo

  //create points on the Polylines
  var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];

  //create the Polyline and feed it points with stroke styling
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  //set the polylines on the map
  flightPath.setMap(map);

要像其他人所说的更详细,可以通过点击事件将用户输入,将标记作为点放置在地图上,然后将标记坐标作为折线的点提供,或者您也可以创建用户可以手动输入其地址或其作为点来绘制点的形式,但绘制折线的详细方法与上面的示例相似,只是Lat Lng在演示中静态编码。

答案 2 :(得分:2)

他们有示例代码,允许您执行此操作(只需单击查看源代码即可查看代码):

http://code.google.com/apis/maps/documentation/javascript/examples/polyline-complex.html

  1. 将onclick事件连接到地图。
  2. 通过查看event.LatLng对象获取纬度和经度,为折线(用户正在绘制的线)添加一个点。
  3. 当用户再次点击时,折线将在新点被推送到其渲染的阵列时自动更新渲染。

答案 3 :(得分:2)

我将在此测试页面上发布解决方案: http://www.comehike.com/draggable_marker.php

在回答这个问题时,解决方案并不存在,但希望很快我就能解决这个问题。

答案 4 :(得分:1)

是的。查看MapMyRun.com以获取用例的一个很好的示例。