Google MAP API裡面有不少的功能可以用,這次就以設定多個Marker來簡單的介紹,在使用Google MAP API之前,一定要記得先去申請API的Key,如果沒有Key,就無法使用,這部份可以參考" 如何將經緯度利用Google Map API顯示 C# VS2005 Sample Code "裡面的介紹,有了使用API的Key後,就可以開始著手開發我們所要的功能,這次要做出來的效果如下圖,同時可以顯示出多個Marker在上面.
首先網頁加入以下的Javascript.
03 |
<script language="javascript" type="text/javascript"> |
05 |
function AddPointToMap(loc) { |
07 |
if (GBrowserIsCompatible()) { |
09 |
var aryLoc=loc.split('#'); |
10 |
var map = new GMap2(document.getElementById("map")); |
13 |
map.addControl(new GLargeMapControl()); |
14 |
map.addControl(new GMapTypeControl()); |
15 |
map.addControl(new GScaleControl()); |
17 |
for (var i = 0; i < aryLoc.length; i++) { |
18 |
var x=aryLoc[i].split(',')[0]; |
19 |
var y=aryLoc[i].split(',')[1]; |
20 |
var point = new GLatLng(x,y); |
21 |
map.addOverlay(new GMarker(point)); |
22 |
if (i==0){map.setCenter(point, 18);} |
Body的部份
1 |
<body id="MainBody" runat="server"> |
2 |
<form id="form1" runat="server"> |
3 |
<div id="map" style="width: 500px; height: 400px"> |
後端
01 |
protected void Page_Load(object sender, EventArgs e) |
06 |
"25.048306,121.516700#" + |
07 |
"25.048506,121.516300#" + |
08 |
"25.048856,121.516500"; |
09 |
this.MainBody.Attributes.Add("onload", string.Format("AddPointToMap('{0}');", strLoc)); |
用" # "來分開每組經緯度,而緯度則用逗號" , "來分開,所以地圖上會分別顯示以下這三組Marker.
25.048306,121.516700
25.048506,121.516300
25.048856,121.516500
以上這樣就完成囉~
|
