Question

我想知道是否有人有关于如何在谷歌地图上绘制各种点的想法/教程，并将点保存在具有自定义标记标题的数据库中。

我想要类似于http://www.mapmyrun.com/create_new的东西，我可以在地图上绘制并标出路径等。

Answer 1

绘制点是在Javascript中完成的，我设法从地图API文档中学习了我需要的一切： http://code.google.com/apis/maps/documentation/javascript/basics.html

我将下面的代码从我制作的网站上删除，该网站将单个点移动到点击鼠标的位置。您应该能够在JS数组中存储一组点，或者更好，在提交表单时从地图中获取它们然后使用可以使用php / python脚本插入数据库中的值更新隐藏的表单字段服务器。

<html>
  <head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:400px; height:600px; display:block; float:left">
    </div>
  </body>
</html>
<script type="text/javascript">
var map;
var marker = null;

function initialize() {
  var myLatlng = new google.maps.LatLng(54, -2.0);
  var myOptions = {
    zoom: 6,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}

function placeMarker(location) {
  var clickedLocation = new google.maps.LatLng(location);

  if(marker == null){
    marker = new google.maps.Marker({
      position: location, 
      map: map
    });
  }else{
    marker.setPosition(location);
  }
  map.setCenter(location);
}
</script>

编辑：这是来自docs站点的演示，它创建了一个点列表并在它们之间绘制了一条线： http://code.google.com/apis/maps/documentation/javascript/examples/polyline-simple.html 还有其他例子。只需加载它们并在firefox中按ctrl + u即可查看源。

谷歌地图绘图

1 个答案: