Question

我是谷歌地图/ API的新手，我想用javascript创建一个谷歌搜索框。此外，我希望这个谷歌搜索框自动完成。这些纬度/次数的列表将存储在javascript文件中。通过阅读此文件，将为谷歌地图创建特定的搜索框。

Answer 1

这很好用

<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    <style>
        #gmap_canvas {
            height: 700px;
            position: relative;
            width: 900px;
        }
        .actions {
            background-color: #FFFFFF;
            bottom: 30px;
            padding: 10px;
            position: absolute;
            right: 30px;
            z-index: 2;

            border-top: 1px solid #abbbcc;
            border-left: 1px solid #a7b6c7;
            border-bottom: 1px solid #a1afbf;
            border-right: 1px solid #a7b6c7;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
        }
        .actions label {
            display: block;
            margin: 2px 0 5px 10px;
            text-align: left;
        }
        .actions input, .actions select {
            width: 85%;
        }
        .button {
            background-color: #d7e5f5;
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5));
            background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
            background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
            background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
            background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
            background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
            border-top: 1px solid #abbbcc;
            border-left: 1px solid #a7b6c7;
            border-bottom: 1px solid #a1afbf;
            border-right: 1px solid #a7b6c7;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
            -webkit-box-shadow: inset 0 1px 0 0 white;
            -moz-box-shadow: inset 0 1px 0 0 white;
            box-shadow: inset 0 1px 0 0 white;
            color: #1a3e66;
            font: normal 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
            line-height: 1;
            margin-bottom: 5px;
            padding: 6px 0 7px 0;
            text-align: center;
            text-shadow: 0 1px 1px #fff;
            width: 150px;
        }
        .button:hover {
            background-color: #ccd9e8;
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccd9e8), color-stop(100%, #c1d4e8));
            background-image: -webkit-linear-gradient(top, #ccd9e8, #c1d4e8);
            background-image: -moz-linear-gradient(top, #ccd9e8, #c1d4e8);
            background-image: -ms-linear-gradient(top, #ccd9e8, #c1d4e8);
            background-image: -o-linear-gradient(top, #ccd9e8, #c1d4e8);
            background-image: linear-gradient(top, #ccd9e8, #c1d4e8);
            border-top: 1px solid #a1afbf;
            border-left: 1px solid #9caaba;
            border-bottom: 1px solid #96a3b3;
            border-right: 1px solid #9caaba;
            -webkit-box-shadow: inset 0 1px 0 0 #f2f2f2;
            -moz-box-shadow: inset 0 1px 0 0 #f2f2f2;
            box-shadow: inset 0 1px 0 0 #f2f2f2;
            color: #163659;
            cursor: pointer;
        }
        .button:active {
            border: 1px solid #8c98a7;
            -webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
            -moz-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
            box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
        }
    </style>
    <script type="text/javascript">
        var geocoder;
        var map;
        function initialize() {
            geocoder = new google.maps.Geocoder();

            var myLatlng = new google.maps.LatLng(40, 111);
            var myOptions = {// default map options
                center: new google.maps.LatLng(40, 111),
                zoom: 6,
                center: myLatlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
        }

        function findAddress() {
            var address = document.getElementById("gmap_where").value;

            geocoder.geocode({'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) { // and, if everything is ok

                    var addrLocation = results[0].geometry.location;
                    map.setCenter(addrLocation);

                    document.getElementById('lat').value = results[0].geometry.location.lat();
                    document.getElementById('lng').value = results[0].geometry.location.lng();

                    var addrMarker = new google.maps.Marker({
                        position: addrLocation,
                        map: map,
                        title: results[0].formatted_address,
                        icon: 'map_g.png'
                    });
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>

</head>
<body>
    <div id="gmap_canvas"></div>
    <div class="actions">
        <div class="button">
            <label for="gmap_where">Where:</label>
            <input id="gmap_where" type="text" name="gmap_where" /></div>
        <div id="button2" class="button" onclick="findAddress();
        return false;">Search for address</div>

        <input type="hidden" id="lat" name="lat" value="40.7143528" />
        <input type="hidden" id="lng" name="lng" value="-74.0059731" />
    </div>

</body>

针对特定纬度和经度的Google MAPS搜索框

1 个答案: