Question

我找到了一些自动完成的代码，它就像这样

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

function initialize() {

        var input = document.getElementById('address');
        var autocomplete = new google.maps.places.Autocomplete(input);
    }

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

<input id="address" type="text" size="50"/>

这在项目中完全适用于自动完成。

但是当我在我的实际项目中实现它时，它不起作用，我不知道在哪里放这些代码。

这是我的完整项目代码。一切正常，但自动完成无法正常工作

    <!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="CSS.css"/>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAfJKrk9pQNoNTIGTzj6f0jLXL78ryRnxQ&sensor=false"> 

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script src="http://maps.google.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
    <script src="http://maps.googleapis.com/maps/api/directions/output?parameters"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry"></script>
    <script>

        var myCenter = new google.maps.LatLng(3.213912, 101.727202); /
        var newmarker; //global variable to set new marker
        var map;
        var newlat;
        var newlng;
        var newmarkerpos;
        var rendererOptions = {
            draggable: true 
        };
        var start;
        var end;
        var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
        var directionsService = new google.maps.DirectionsService();
        var geocoder = new google.maps.Geocoder();

        //var infowindow1 = new google.maps.InfoWindow({
        //    content: '<div id="infowindow1" style="CSS.css"></div>'
        //});

        function initialize() {

            var input = document.getElementById('address');
            var autocomplete = new google.maps.places.Autocomplete(input);

            var mapProperty = {
                center: myCenter,                            
                zoom: 17,                                   
                mapTypeId: google.maps.MapTypeId.ROADMAP, 
                scaleControl: true,                         
                overviewMapControl: true           
            };

            map = new google.maps.Map(document.getElementById("googleMap")
              , mapProperty);

            var input = document.getElementById('address');
            var autocomplete = new google.maps.places.Autocomplete(input);

            var infowindow = new google.maps.InfoWindow({
                content: '<div id="infowindow" style="CSS.css">We are here!</div>'
            });


            directionsDisplay.setMap(map);

            var marker = new google.maps.Marker({
                position: myCenter,                     
                animation: google.maps.Animation.BOUNCE, 
                icon: '../Images/Icon4.png'
            });

            marker.setMap(map);

            directionsDisplay.setPanel(document.getElementById('directionspanel'));


            infowindow.open(map, marker);

            google.maps.event.addListener(marker, 'click', function () {
                map.setZoom(17);
                map.setCenter(marker.getPosition());
            });

            function placeMarker(location) {

                if (newmarker) {
                    newmarker.setPosition(location);
                    newmarker.setVisible(true);
                } else {
                    newmarker = new google.maps.Marker({
                        position: location,
                        map: map,
                        icon: '../Images/Icon4.png',
                        //draggable: true,
                    });

                }

                newlat = location.lat();    
                newlng = location.lng();

                newmarkerpos = new google.maps.LatLng(newlat, newlng);


            }


            google.maps.event.addListener(map, 'click', function (event) {
                placeMarker(event.latLng);
            }); 

            google.maps.event.addDomListener(home, 'click', function () {
                map.setZoom(17);
                map.setCenter(myCenter)
            });

        }

        function cal() {

            start = new google.maps.LatLng(3.213912, 101.727202);
            end = new google.maps.LatLng(newmarkerpos.lat(), newmarkerpos.lng());
            var request = {

                origin: start,
                destination: end,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });
            directionsDisplay.setMap(map);
            newmarker.setVisible(false);

        }

        function clearmap() {

            newmarker.setVisible(false);
            newmarkerpos = null;
            directionsDisplay.setMap(null);
            document.getElementById("directionspanel").innerHTML = "";
            document.getElementById('address').value = "";

        }

        function geocode() {
            var address = document.getElementById('address').value;

            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var geolat = results[0].geometry.location.lat();
                    var geolng = results[0].geometry.location.lng();

                    start = new google.maps.LatLng(3.213912, 101.727202);
                    end = new google.maps.LatLng(geolat, geolng);
                    var request = {

                        origin: start,
                        destination: end,
                        travelMode: google.maps.TravelMode.DRIVING
                    };
                    directionsService.route(request, function (response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setDirections(response);
                        }
                    });
                    directionsDisplay.setMap(map);
                    newmarker.setMap(null);

                    map.setCenter(results[0].geometry.location);
                    newmarker = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,
                        zoom: 15,
                        icon: '../Images/Icon4.png',
                        draggable: true,

                    });


                }
            });

        }

        google.maps.event.addDomListener(window, 'load', initialize); 
    </script>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>Our Location</h1>
    <div id="googleMap" style="width:800px; height:450px;">
    </div> 
<!--    <div id="dvdistance" style="width:400px; height:100px; border:solid">
    see ///***
    </div>-->
    <div id="geocoding">
        <input id="address" type="text" placeholder="Enter an address" size="33" />
        <input type="button" value="geocode" onclick="geocode()" />
    </div>
    <button type="button" id="home" style:"CSS.css" >HOME</button>
    <button type="button" id="clearmap" onclick="clearmap()" style:"CSS.css">CLEAR MAP</button>
    <input type="button" id="cal" onclick="cal()" value="GET DIRECTION" />
    <div id="directionspanel" style:"CSS.css"></div>

</body>
</html>

我在设置地图后放置了自动完成功能。但现在汽车完成无法正常工作。有什么问题？我应该把它放在哪里？

Answer 1

我发现了这个问题。这是剧本。

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAfJKrk9pQNoNTIGTzj6f0jLXL78ryRnxQ&sensor=false"> <!--key is registred at google console-->

</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

我删除了所有其他脚本，只留下了这些2.令人惊讶的是它有效，我仍然不知道为什么。我的所有其他功能也都很有效。

Google地图自动填充功能即使工作代码也无法正常工作

1 个答案: