无法让Google地图地理编码正常工作 [英] Can't get Google Maps Geocode to work

问题描述

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

Expected Behavior: I'm trying to have a map that displays user's current location but when the user searches for a location, a marker appears on the location.

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

Current Behavior: Only the current location code works.

我无法弄清楚这里有什么问题。这两个函数都是非常通用的。

I can't figure out what is the problem here. Both of these functions are very generic.

这是javascript：

Here is the 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中被调用：

The codeAddress() gets called here in the 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>

推荐答案

最后算出来了。这是一个愚蠢的错误。我在链接jQuery之前链接了我的Javascript文件。该代码现在正常工作。

Finally figured it out. It was a silly error. I had linked my Javascript file before linking the jQuery. The code works fine now.

这篇关于无法让Google地图地理编码正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！