google 經過地址獲取座標信息

時間 2019-11-24

原文原文鏈接

HTML:javascript

<!doctype html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Google Map V3</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="http://ditu.google.com.cn/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="js/index20.js"></script>
    <style>
    #map {height:580px; width:659px; margin:0 auto}
    </style>
</head>
<body>

    <form id="addressForm" action="###">
        <div style="margin:10px auto; width:659px;">
            <label for="address">Address:</label>
            <input type="text" name="address" id="address" />
            <input type="submit" id="addressButton" value="Get Coordinates" />
        </div>
    </form>
    
    <div id="map"></div>
    
</body>
</html>

JS :
html

(function() {
    // Defining some global variables
    var map, geocoder, marker, infowindow;
    window.onload = function() {
        // Creating a new map
        var options = {
            zoom: 3,
            center: new google.maps.LatLng(37.09, -95.71),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map'), options);
        // Getting a reference to the HTML form
        var form = document.getElementById('addressForm');
        // Catching the forms submit event
        form.onsubmit = function() {
            // Getting the address from the text input
            var address = document.getElementById('address').value;
            // Making the Geocoder call
            getCoordinates(address);
            // Preventing the form from doing a page submit
            return false;
        }
    }
    // Create a function the will return the coordinates for the address
    function getCoordinates(address) {
        // Check to see if we already have a geocoded object. If not we create one
        if (!geocoder) {
            geocoder = new google.maps.Geocoder();
        }
        // Creating a GeocoderRequest object
        var geocoderRequest = {
            address: address
        }
        // Making the Geocode request
        geocoder.geocode(geocoderRequest, function(results, status) {
            // Check if status is OK before proceeding
            if (status == google.maps.GeocoderStatus.OK) {
                console.log(results);
                layerCount = results[0].address_components.length;
                map.setZoom(layerCount*3+1);
                // Center the map on the returned location
                map.setCenter(results[0].geometry.location);
                // Check to see if we've already got a Marker object
                if (!marker) {
                    // Creating a new marker and adding it to the map
                    marker = new google.maps.Marker({
                        map: map
                    });
                }
                // Setting the position of the marker to the returned location
                marker.setPosition(results[0].geometry.location);
                // Check to see if we've already got an InfoWindow object
                if (!infowindow) {
                    // Creating a new InfoWindow
                    infowindow = new google.maps.InfoWindow();
                }
                // Creating the content of the InfoWindow to the address
                // and the returned position
                var content = '<strong>' + results[0].formatted_address + '</strong><br />';
                content += 'Lat: ' + results[0].geometry.location.lat() + '<br />';
                content += 'Lng: ' + results[0].geometry.location.lng();
                // Adding the content to the InfoWindow
                infowindow.setContent(content);
                // Opening the InfoWindow
                infowindow.open(map, marker);
            }
        });
    }
})();

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

google 經過地址獲取 座標信息

google 經過地址獲取座標信息