[AJAX] 使用Google MAP API設定多個Marker

[AJAX] 使用Google MAP API設定多個Marker

房東：阿緯

發表時間：2011-04-17

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

$\"image\"$

首先網頁加入以下的Javascript.

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

02

`03`	`<script language="javascript"` `type="text/javascript">`

`04`	`//<![CDATA[`

`05`	`function` `AddPointToMap(loc) {`

06

`07`	`if` `(GBrowserIsCompatible()) {`

08

`09`	`var` `aryLoc=loc.split(\'#\');//將傳進來的經緯度字串split到陣列`

`10`	`var` `map =` `new` `GMap2(document.getElementById("map"));`

11

`12`	`//加入Google MAP上所要用的Control`

`13`	`map.addControl(new` `GLargeMapControl());`

`14`	`map.addControl(new` `GMapTypeControl());`

`15`	`map.addControl(new` `GScaleControl());`

16

`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));//加入Marker`

`22`	`if` `(i==0){map.setCenter(point, 18);}//將地圖的中心設在定一個點`

23 }

24 }

25 }

26 //]]>

`27`	`</script>`

Body的部份

`1`	`<body` `id="MainBody"` `runat="server">`

`2`	`<form` `id="form1"` `runat="server">`

`3`	`<div` `id="map"` `style="width: 500px; height: 400px">`

4 </div>

5 </form>

6 </body>

後端

`01`	`protected` `void` `Page_Load(object` `sender, EventArgs e)`

02 {

`03`	`if` `(!IsPostBack)`

04 {

`05`	`string` `strLoc =`

`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));`

10 }

11 }

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

25.048306,121.516700

25.048506,121.516300

25.048856,121.516500

以上這樣就完成囉~

贊助網站

廣利不動產-新板特區指名度最高、值得您信賴的好房仲
您的托付,廣利用心為您服務
廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
完整房訊，房屋、店面熱門精選物件，廣利不動產優質仲介，房屋租賃、買賣資訊透明，交易真安心！

　共 0 人回應