posts - 309, comments - 6940, trackbacks - 0, articles - 3
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

今天介紹大家如何結合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,然後可以做簡單的地址查詢功能

直接看範例

<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.397150.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>


评论

# re: [Mobile]Windows Mobile 6.5 Widget - Widget 結合 Google Maps JavaScript API V3  回复  更多评论   

2010-05-21 20:54 by 美体内衣
不错的代码!google map我以前也在项目中搞过一次。。

不过现在都忘了。。呵呵

# re: [Mobile]Windows Mobile 6.5 Widget - Widget 結合 Google Maps JavaScript API V3[未登录]  回复  更多评论   

2010-10-25 10:31 by zy
set_center没有这个函数,不知楼主实测过没

只有注册用户登录后才能发表评论。


网站导航: