Question

我不太了解javascript而且我对谷歌地图不太熟悉所以我在这里苦苦挣扎但是我有一张地图用圆圈画出来。我还有一个滑块，可以让你增加圆半径。

当有人移动标记时，我的圆圈会随着它移动，并且我的表单中相应的隐藏输入会更新，以便我可以获取latLng并保存到daabase。

但是当用户移动标记时，我也想获得一个人类可读的地址，所以我反向地理编码。这是我遇到问题的地方，反向地理编码好了，但现在我再也无法移动标记了。我知道这可能是一件简单的事情，但我甚至都不知道自己到底有多么不好意思。任何人都可以帮助我吗？

我的地图位于http://www.liquidlizard.net/users/trainer

这是我正在使用的代码的转储：

编辑 - 以及所要求的代码

<?php
echo $this->Html->script('https://maps.googleapis.com/maps/api/js?sensor=false', array('inline' => false));
?> 

<div class="alignCenter bottomBorder marginBot36">
    <div class="widthContainer padBot18 padTopt18">
        <?php echo $this->Html->image('icon-round-marker-pink.png', array('class'=>'midAlignImg'));?>
    </div>  
    <div class="widthContainer fontTwentySeven padBot18">
        Which locations do you cover?
    </div>
    <div class="singleColForm alignLeft fontFourteen" style="border:none">
        <div class="left"><?php echo $this->Html->image('mileradius.png');?></div>
        <div class="right" id="sliderHolder">
            <div id="slider"></div>
        </div>
        <div style="clear:both;height:18px"></div>
        <div id="map-canvas"></div>
        <div id="map-numOf-miles" class="alignCenter fontPurple fontNineteen">0 Miles</div>
    </div>
    <div class="addButton strong">ADD</div>
</div>
<?php // hidden inputs for locations
echo $this->Form->hidden('miles', array('id'=>'miles'));
echo $this->Form->hidden('location', array('id'=>'location'));
?>




<script type="text/javascript">
$(document).ready(function() {  


    //User clicks to add location
    $(".addButton").click(function() {
        $.post( "<?php echo $this->webroot;?>locations/add", { name: "John", time: "2pm" })
                .done(function( data ) {
                alert( "Data Loaded: " + data );
           });
    });

    //Google Maps
        var userLocation = "London";
        var geocoder = new google.maps.Geocoder();
        var circle;
        var latLng;
        var marker;

        $( "#slider" ).slider({
            slide: function(event, ui) {
                $("#map-numOf-miles").html(ui.value+' Miles');
                $("#miles").val(ui.value);
                circle.setRadius(ui.value/0.0621371192*100);
            }
        });

            //Google Maps
            function initialize() {
                var styles = [
                  {
                        stylers: [
                          { hue: "#00ffe6" },
                          { saturation: -20 }
                        ]
                  }
                ];

                geocoder.geocode( {"address": userLocation}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                            latLng = results[0].geometry.location;
                            //alert (latLng);
                            var mapOptions = {
                              center: latLng,
                              zoom: 6,
                              styles: styles,
                              mapTypeId: google.maps.MapTypeId.ROADMAP
                            };

                            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

                            marker = new google.maps.Marker({
                                map: map,
                                position: latLng,
                                draggable: true
                            });

                            circle = new google.maps.Circle({
                                map: map,
                                radius: 0, //your radius in meters
                                strokeColor: '#d12d87',
                                strokeOpacity: 0.35,
                                strokeWeight: 2,
                                fillColor: '#d12d87',
                                fillOpacity: 0.35,
                                center: latLng
                            });


                        $("#location").val(results[0].geometry.location);
                        google.maps.event.addListener(marker, "dragend", function(){  
                                var position = marker.getPosition();  
                                map.setCenter(position);
                                //update the hidden form with the new location
                                $("#location").val(position.lat() + " ," + position.lng());
                                //reverse geocode the latlng to get human readable address
                                var latlng = new google.maps.LatLng(position.lat(), position.lng());
                                  geocoder.geocode({'latLng': latlng}, function(results, status) {
                                    if (status == google.maps.GeocoderStatus.OK) {
                                      if (results[1]) {
                                          alert(results[1].formatted_address);
                                        map.setZoom(11);
                                        marker = new google.maps.Marker({
                                            position: latlng,
                                            map: map
                                        });
                                        infowindow.setContent(results[1].formatted_address);
                                        infowindow.open(map, marker);
                                      } else {
                                        alert('No results found');
                                      }
                                    } else {
                                      alert('Geocoder failed due to: ' + status);
                                    }
                                  });

                        });
                        google.maps.event.addListener(marker, "drag", function(){  
                                circle.setCenter(marker.getPosition());
                        });
                    } else {
                       alert("Geocode failed. Please edit your address (top of the page) and try again.");
                    }
             });
         }
        google.maps.event.addDomListener(window, "load", initialize);


});
</script>

Answer 1

Emil是正确的，infowindow没有定义，因此停止进一步执行。

您需要添加以下内容，取自https://developers.google.com/maps/documentation/javascript/geocoding#ReverseGeocoding

var infowindow = new google.maps.InfoWindow();

后

var geocoder = new google.maps.Geocoder();

Answer 2

这里有一个小问题：

infowindow.setContent(results[1].formatted_address);

infowindow未定义，因此未来的javascript将失败。

谷歌地图 - 反向地理编码

2 个答案: