Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/390.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Can';让谷歌地图地理代码工作_Javascript_Google Maps_Google Maps Api 3_Google Maps Markers - Fatal编程技术网

Javascript Can';让谷歌地图地理代码工作

Javascript Can';让谷歌地图地理代码工作,javascript,google-maps,google-maps-api-3,google-maps-markers,Javascript,Google Maps,Google Maps Api 3,Google Maps Markers,预期行为:我试图创建一个显示用户当前位置的地图,但当用户搜索某个位置时,该位置上会出现一个标记 当前行为:只有当前位置代码有效 我想不出这里有什么问题。这两个函数都非常通用 下面是javascript: if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showCurrentLocation); } else {

预期行为:我试图创建一个显示用户当前位置的地图,但当用户搜索某个位置时,该位置上会出现一个标记

当前行为:只有当前位置代码有效

我想不出这里有什么问题。这两个函数都非常通用

下面是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);
                }
            });
        }
在HTML中调用codeAddress():

<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文件。代码现在可以正常工作。

我看不到您在哪里调用
codeAddress()
我已经编辑了这个问题。当我加载jQuery时,您的代码对我有效。您是否加载jQuery?您是否通过它获得了所需的功能?我在这个文档中包含了jQuery,是的。是的,我得到了一个基于地理编码地址的标记(值为#pac input)