2010-08-25 112 views
1

我想知道是否有人有關於如何在谷歌地圖上繪製各個點的任何想法/教程,並使用自定義標記標題將點存儲在數據庫中。谷歌地圖繪製

我想要一些類似於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來查看源代碼。

+1

有沒有辦法添加多個點?並在它們之間畫線。 – dotty 2010-08-25 08:43:00

+0

是的,有文檔的這種東西的演示。我只是更新了我的答案,以包含指向簡單路徑的頁面的鏈接。 – 2010-08-25 09:42:01