使用Google MAP API設定多個Marker

2010-03-28

Google MAP API裡面有不少的功能可以用,這次就以設定多個Marker來簡單的介紹,在使用Google MAP API之前,一定要記得先去申請API的Key,如果沒有Key,就無法使用,這部份可以參考" 如何將經緯度利用Google Map API顯示 C# VS2005 Sample Code "裡面的介紹,有了使用API的Key後,就可以開始著手開發我們所要的功能,這次要做出來的效果如下圖,同時可以顯示出多個Marker在上面.

首先網頁加入以下的Javascript.


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=輸入你的Key" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
//<![CDATA[
function AddPointToMap(loc) {

	if (GBrowserIsCompatible()) {

		var aryLoc=loc.split('#');//將傳進來的經緯度字串split到陣列
		var map = new GMap2(document.getElementById("map"));
		
		//加入Google MAP上所要用的Control
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GScaleControl());

		for (var i = 0; i < aryLoc.length; i++) {
			var x=aryLoc[i].split(',')[0];
			var y=aryLoc[i].split(',')[1];
			var point = new GLatLng(x,y);//經緯度
			map.addOverlay(new GMarker(point));//加入Marker
			if (i==0){map.setCenter(point, 18);}//將地圖的中心設在定一個點
		}
	}
}
//]]>
</script>

Body的部份


<body id="MainBody" runat="server">
    <form id="form1" runat="server">
    <div id="map" style="width: 500px; height: 400px">
    </div>
    </form>
</body>

後端


protected void Page_Load(object sender, EventArgs e)
{
	if (!IsPostBack)
	{
		string strLoc =
			"25.048306,121.516700#" +
			"25.048506,121.516300#" +
			"25.048856,121.516500";
		this.MainBody.Attributes.Add("onload", string.Format("AddPointToMap('{0}');", strLoc));
	}
}

用" # "來分開每組經緯度,而緯度則用逗號" , "來分開,所以地圖上會分別顯示以下這三組Marker.

25.048306,121.516700

25.048506,121.516300

25.048856,121.516500

以上這樣就完成囉~

參考 :

Google Maps JavaScript API Example : Map Markers

回首頁