无法使 Google 地图地理编码工作

Question

预期行为：我正在尝试制作显示用户当前位置的地图，但当用户搜索某个位置时，该位置上会出现一个标记。

当前行为：只有当前位置代码有效。

我想不通这是什么问题。这两个函数都很通用。

这里是 javascript:

if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showCurrentLocation);
        }
        else
        {
           alert("Geolocation API not supported.");
        }

        function showCurrentLocation(position)
        {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var coords = new google.maps.LatLng(latitude, longitude);

            var mapOptions = {
            zoom: 15,
            center: coords,
            mapTypeControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        //create the map, and place it in the HTML map div
        map = new google.maps.Map(
        document.getElementById("mapPlaceholder"), mapOptions
        );

        var styles = [{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"},{"lightness":20}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"simplified"},{"lightness":20},{"hue":"#007bff"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"visibility":"simplified"},{"color":"#929292"}]},{"featureType":"poi.park","elementType":"all","stylers":[{"color":"#D9EDC5"}]},{"featureType":"poi.school","elementType":"geometry.fill","stylers":[{"color":"#f2e5c1"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#386FAB"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"saturation":"-100"},{"visibility":"on"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#A0BDDD"},{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#7FA6CF"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.fill","stylers":[{"invert_lightness":true},{"color":"#336396"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.stroke","stylers":[{"color":"#003e7e"}]},{"featureType":"road.highway.controlled_access","elementType":"labels.text","stylers":[{"invert_lightness":true},{"lightness":"16"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#D2E5F9"},{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#6699D0"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"color":"#B0C1D3"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"visibility":"on"},{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"on"},{"lightness":40}]},{"featureType":"water","elementType":"all","stylers":[{"lightness":20},{"hue":"#007fff"}]}];

        map.setOptions({styles: styles});

        //place the initial marker
        var marker = new google.maps.Marker({
        position: coords,
        map: map,
        title: "Current location!"
        });

        /*new marker

        var coords2 = new google.maps.LatLng(24.837568, 67.081005);
        var marker2 = new google.maps.Marker({
            position: coords2,
            map: map,
            title: "DA public school"
        });*/


        }


        //set the geocoder
        var geocoder = new google.maps.Geocoder();
        //geocode function
        function codeAddress() 
        {
            // grab the address from user input field
            var address = $('#pac-input').val();
            geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) 
                {
                    map.setCenter(results[0].geometry.location);
                    var marker2 = new google.maps.Marker({
                        map: map, 
                        position: results[0].geometry.location
                    });
                } 
                else 
                {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }

codeAddress() 在 HTML 中被调用：

<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<input type="button" class="controls" id="locate" onClick="codeAddress()" value="Locate">
<div id="mapPlaceholder"></div>

Answer 1

终于想通了。这是一个愚蠢的错误。我在链接 jQuery 之前链接了我的 Javascript 文件。代码现在可以正常工作了。

无法使 Google 地图地理编码工作

Can't get Google Maps Geocode to work

javascript

google-maps

google-maps-api-3

google-maps-markers