Google API - Geocoder

目標：

可輸入多筆資料，透過Geocoder API協助進行地址與經緯度之間的轉換，並增加地圖標記，確認轉換無誤。

成果：


Code：(如果不好閱讀請自行複製到記事本)

<!DOCTYPE html>
<html>

<head>
    <title>Geocoder API實作</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script>
        var map;

        function initialize() {
            var mapProp = {
                center: new google.maps.LatLng(23.7468758, 120.9527377),
                zoom: 7,
                mapTypeId: google.maps.MapTypeId.HYBRID
            };
            map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
        }
        google.maps.event.addDomListener(window, 'load', initialize);

        var i;
        var split;

        function trans() {
            initialize();
            i = 0;
            $("#target").val("");
            var content = $("#source").val();
            split = content.split("\n");
            delayedLoop();
        }

        function delayedLoop() {
            if (split[i].length > 0) {
                addressToLatLng(split[i]);
            }
            else {
                var content = $("#target").val();
                $("#target").val(content + "請確實輸入地址!" + "\n");
            }

            if (++i >= split.length) {
                return;
            }
            window.setTimeout(delayedLoop, 1500);
        }

        function addressToLatLng(addr) {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                "address": addr
            }, function(results, status) {
                addr = "";
                if (status == google.maps.GeocoderStatus.OK) {
                    var content = $("#target").val();
                    $("#target").val(content + addr + results[0].geometry.location.lat() + "," + results[0].geometry.location.lng() + "\n");
                    var newmap = {
                        center: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                        zoom: 7,
                        mapTypeId: google.maps.MapTypeId.HYBRID
                    }
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                        animation: google.maps.Animation.BOUNCE
                    });
                    marker.setMap(map);

                }
                else {
                    var content = $("#target").val();
                    $("#target").val(content + addr + "查無經緯度" + "\n");
                }
            });
        }

        function clean() {
            $("#source").val("");
            $("#target").val("");
            initialize();
        }

        function reloadweb() {
            //沒有寫代表重載原本的頁面
            window.location.reload("")
        }
    </script>

    <style>
        header,
        section,
        article,
        nav,
        footer {
            display: block;
        }
        
        header,
        footer {
            text-align: center;
            width: 100%;
        }
        
        header {
            background-color: ;
            font-size: 36px;
            font-weight: bold;
        }
        
        section {
            width: 93.5%;
            background-color: ;
            padding: 20px;
            margin: 20px;
        }
        
        body {
            background-image: url(http://bgfons.com/upload/wood%20_texture553.jpg);
        }
    </style>
</head>
<header>
    <font color="yellow" face="標楷體">使用Geocoders API做地址與經緯度轉換</font>
</header>

<body>
    <p></p>
    <textarea style="font-weight: bold" rows="5" name="S1" cols="64.99" id="source"></textarea>
    <input type="button" value="開始轉換" name="B1" onclick="trans();" style="background-color:lightblue;">
    <input type="button" value="清除" name="CLEAN" onclick="clean();" style="background-color:lightblue;">
    <input type="button" value="重新整理" name="RELOAD" onclick="reloadweb();" style="background-color:lightblue;">
    <textarea style="font-weight: bold" rows="5" name="S2" cols="64.99" id="target" OnClick="this.select();(this.createTextRange()).execCommand('Copy'); alert('已複製到解貼簿囉')"></textarea>
    <p></p>
    <div id="googleMap" style="width:1263px;height:449px;"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</body>

</html>

留言

張貼留言