2008年6月16日 星期一

使用google api 上手篇

1.去申請google api key 這key會跟網站ip綁死

2.在頁面中加入"div元件" 並取名為"map" 這div會給google顯示地圖用 從設計工具中加 不要從標記中手動加 這樣vs 2005才能拖拉元件

3.在page load中註冊javascript 以下是註冊demo code的範例 注意document.getElementById(\"map\") map就是剛剛div元件的名字 也可以取別的

protected void Page_Load(object sender, EventArgs e)

{

string jspcdoe_load = "";

jspcdoe_load += " function jspcdoe_load() {";

jspcdoe_load += " if (GBrowserIsCompatible()) {";

jspcdoe_load += " var map = new GMap2(document.getElementById(\"map\"));";

jspcdoe_load += " map.addControl(new GSmallMapControl());";

jspcdoe_load += " map.addControl(new GMapTypeControl());";

jspcdoe_load += " map.setCenter(new GLatLng(23.697810,120.960515), 8);";

jspcdoe_load += " }";

jspcdoe_load += " }";

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "jspcdoe_load", jspcdoe_load, true);

}

4.標記頁中插入

<script src=http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA3VStpCqePCxgscyeGMCJ9hSXCRuyVqbObNcKv3aJ-hmPFF3YTBSbWkLGy7mjexC5KezmpjPgB9TKdw" type="text/javascript"></script>




5.然後把body onload的事件指向剛剛所寫入的jsp程式區斷


<body onload="jspcdoe_load()" onunload="GUnload()">

<div id="map" style="z-index: 105; left: 17px; width: 765px; position: absolute;

top: 84px; height: 700px">

</div>

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

<asp:TextBox ID="TextBox_RoadName" runat="server" Height="23px" Style="z-index: 100;

left: 16px; position: absolute; top: 11px" Width="236px"></asp:TextBox>

<asp:Button ID="Button_Search" runat="server" OnClick="Button_Search_Click" Style="z-index: 101;

left: 271px; position: absolute; top: 12px" Text="查找地址" Height="29px" Width="83px" />

<asp:Label ID="Label_GIS" runat="server" Style="z-index: 102; left: 16px; position: absolute;

top: 55px" Text="經緯度"></asp:Label>

&nbsp;&nbsp;&nbsp;&nbsp;

<div style="z-index: 106; left: 20px; width: 195px; position: absolute; top: 800px;

height: 240px">


</div>

</form>

</body>

</html>

於 17:21
標籤：
訂閱： 張貼留言 (Atom)