谷歌地图绘图

1 投票

1 回答

3517 浏览

数据工程师

提问于 2025-04-16 03:16

我在想有没有人能分享一些关于如何在谷歌地图上标记不同点的想法或教程，并且把这些点保存到数据库里，还能给每个标记起个自定义的名字。

我想要的功能类似于http://www.mapmyrun.com/create_new，在这个网站上我可以在地图上画出路线和标记路径之类的东西。

数据库存储地理信息系统谷歌地图地图标记自定义名称路线绘制

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>

补充：这里有一个来自文档网站的示例，它创建了一系列点并在它们之间画线：http://code.google.com/apis/maps/documentation/javascript/examples/polyline-simple.html那里还有其他示例。只需加载它们，然后在Firefox中按ctrl+u查看源代码。

回答于 2025-04-16 由 Python大师

分享举报

谷歌地图绘图

1 个回答

撰写回答