線上書籍

Home

[982]PHP網站開發 進階應用技巧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>

    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAiaUztwQS-JKG0vf5W_QNPhRjgqXnQAbwVQohZoocwCPRm4POpxSO7Yb0Dfgh3asVzIS3quES0hQflA"></script>

    <script type="text/javascript">
        google.load("maps", "2");

        //頁面載入完成後,執行以下函數(定位地圖起點)
        function initialize() {
            var map = new google.maps.Map2(document.getElementById("mymap"));
            //定義一個標記
            var point = new GLatLng(23.005438745204096, 120.20259618759155);
            //設定中心點
            map.setCenter(point, 17);
            //定義標記圖示
            var myIcon = new GIcon(G_DEFAULT_ICON);  
            //圖示的前景圖片網址。    
            myIcon.image = "icons/shoppingmall.png";       
            //圖示的前景圖片大小(以像素為單位)。            
            myIcon.iconSize = new GSize(32, 37);             //此圖示錨定至地圖的位置(相對於圖示圖片左上角)              
            myIcon.iconAnchor = new GPoint(16, 37); //資訊視窗錨定至此圖示的位置(相對於圖示圖片左上角)
            myIcon.infoWindowAnchor = new GPoint(16,37);

            markerOptions = { icon: myIcon ,draggable: true };

            var marker = new GMarker(point , markerOptions);
            //插入標記
            map.addOverlay(marker);

            GEvent.addListener(marker, "click", function() {
                //移動後要做的事情
                var marker_point = marker.getLatLng();
                map.openInfoWindowHtml(marker_point, "目前標記位置:<br />" + marker_point.toString());
            });

            GEvent.addListener(marker, "dragend", function() {
                //移動後要做的事情
                var marker_point = marker.getLatLng();
                map.openInfoWindowHtml(marker_point, "目前標記位置:<br />" + marker_point.toString());
            });

            //地圖屬性
            //map.setMapType(G_HYBRID_MAP);
            //開啟說明視窗
            //map.openInfoWindowHtml(point, "<b>這裡就是延平國中啦~<b>");

            InfoWindowOptions={maxWidth:150}
            
            var tab1 = new GInfoWindowTab("名稱", "這是7-11");
            var tab2 = new GInfoWindowTab("座標", "目前標記位置:<br />" + point.toString());
            var infoTabs = [tab1,tab2];
            
            marker.openInfoWindowTabsHtml(infoTabs,InfoWindowOptions);


            //縮放控件
            map.addControl(new GLargeMapControl());
            //比例尺
            map.addControl(new GScaleControl());
            //縮圖
            map.addControl(new GOverviewMapControl());

            var topleft=new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(50,5));
            //地圖切換
            map.addControl(new GMapTypeControl());

            map.removeMapType(G_SATELLITE_MAP);

            map.addMapType(G_PHYSICAL_MAP);

            GEvent.addListener(map, "moveend", function() {
                var center = map.getCenter();
                document.getElementById("message").innerHTML = center.toString();
            });


        }

        google.setOnLoadCallback(initialize);
    </script>

  </head>
  <body onunload="GUnload()">
    <div id="mymap" style="width:750px;height:350px;"></div>
    <div id='message'></div>



  </body>
</html>