[Mobile]Windows Mobile 6.5 Widget - Widget 結合 Google Maps JavaScript API V3 | F6 Team - 點部落

2009-07-10

[Mobile]Windows Mobile 6.5 Widget - Widget 結合 Google Maps JavaScript API V3

21821
0
JavaScript

今天介紹大家如何結合Widget與Google Maps JavaScript API V3
首先可以到下列網址,去了解一下目前最新版的Google Maps V3

今天介紹大家如何結合Widget與Google Maps JavaScript API V3

首先可以到下列網址,去了解一下目前最新版的Google Maps V3
http://code.google.com/intl/zh-TW/apis/maps/documentation/v3/

有玩過google map的人一定有玩過用地址,來查地圖這個功能

這個範例主要就是利用Widget載入Google map,然後可以做簡單的地址查詢功能

直接看範例

Widget.htm

<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body style="padding: 0px; margin: 0px"> <div id="map_canvas" style="width: 100%; height: 100%; display: block"> </div> <div id="map_search" style="width: 100%; height: 100%; display: none"> <input id="address" type="text" value="" /> <input type="button" value="Geocode" onclick="Search()" /> <input type="button" value="Back to map" onclick="ChangeMap()" /> </div> </body> </html> <script type="text/javascript"> //載入地圖 sample code //參考：http://code.google.com/intl/zh-TW/apis/maps/documentation/v3/examples/map-simple.html var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, navigationControl: true, mapTypeControl: false, scaleControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var geocoder = new google.maps.Geocoder(); </script> <script type="text/javascript"> function SetMapType(type) { //改變MapType map.set_mapTypeId(type); ChangeMap(); } function ChangeMap() { //切換到Map模式 map_canvas.style.display = "block"; map_search.style.display = "none"; } function ChangeSearch() { //切換到Search模式 map_canvas.style.display = "none"; map_search.style.display = "block"; } </script> <script type="text/javascript"> //地址搜索 sample code //參考：http://code.google.com/intl/zh-TW/apis/maps/documentation/v3/examples/geocoding-simple.html function Search() { ChangeMap(); var address = document.getElementById("address").value; if (geocoder) { geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (status != google.maps.GeocoderStatus.ZERO_RESULTS) { map.set_center(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("No results found"); } } else { alert("Geocode was not successful for the following reason: " + status); } }); } } </script> <script type="text/javascript"> ////////////建立第1層Menu/////////////// var menuMapType = widget.menu.createMenuItem(1001); menuMapType.text = "MapType"; widget.menu.append(menuMapType); var menuSearch = widget.menu.createMenuItem(1002); menuSearch.onSelect = function() { SetMapType(google.maps.MapTypeId.SATELLITE) }; menuSearch.text = "Search"; menuSearch.onSelect = ChangeSearch; widget.menu.append(menuSearch); ////////////建立第2層Menu/////////////// //建立一個ROADMAP的MenuItem var menuItem1 = widget.menu.createMenuItem(2001); menuItem1.text = "ROADMAP"; menuItem1.onSelect = function() { SetMapType(google.maps.MapTypeId.ROADMAP) }; menuMapType.append(menuItem1); //建立一個SATELLITE的MenuItem var menuItem2 = widget.menu.createMenuItem(2002); menuItem2.text = "SATELLITE"; menuItem2.onSelect = function() { SetMapType(google.maps.MapTypeId.SATELLITE) }; menuMapType.append(menuItem2); //建立一個HYBRID的MenuItem var menuItem3 = widget.menu.createMenuItem(2003); menuItem3.text = "HYBRID"; menuItem3.onSelect = function() { SetMapType(google.maps.MapTypeId.HYBRID) }; menuMapType.append(menuItem3); //建立一個TERRAIN的MenuItem var menuItem4 = widget.menu.createMenuItem(2004); menuItem4.text = "TERRAIN"; menuItem4.onSelect = function() { SetMapType(google.maps.MapTypeId.TERRAIN) }; menuMapType.append(menuItem4); </script>

google map 4種不同模式

輸入"taiwan taipei"

終於找到"台灣台北"了

參考網址：
http://code.google.com/intl/zh-TW/apis/maps/documentation/v3/
http://code.google.com/intl/zh-TW/apis/maps/documentation/v3/examples/map-simple.html
http://code.google.com/intl/zh-TW/apis/maps/documentation/v3/examples/geocoding-simple.html

回首頁