Question

我有一张地图从api获取数据，名为police.uk。它通过在地图上拖放一个点来获取数据，并显示半径1英里范围内的区域的犯罪。现在我正在尝试从用户（地理编码）获取邮政编码并加载该区域的数据。没有地理编码字段，我没有收到任何错误，但使用地理编码服务，它无法加载网址资源。这是我的代码。问题出在函数geocodeCrimeLocation中。如果有点长，我很抱歉。我只想清楚我正在实施什么。

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <!-- jQuery CDN -->
<script>
    var geocoder;
    var map;
    var latlng;
    var markers = [];
    var myPositionMarker = null;;
      //Initializing the map
      function initialize() {
        var lat = 52.629729;
        var lng = -1.131592;
        geocoder = new google.maps.Geocoder();
        latlng = new google.maps.LatLng(lat, lng);
        var mapOptions = {
            zoom: 8,
            center: latlng
        }
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        getCrimeByLocation(lat, lng);
      }

        function fitBoundsMap(){
            //Zoom and center the map to fit the markers  
            //This logic could be conbined with the marker creation.  
            //Just keeping it separate for code clarity.  
            var bounds = new google.maps.LatLngBounds();  
            for (index in markers) {  
                var data = markers[index];
                bounds.extend(data.position);  
            }  
            map.fitBounds(bounds);
        }
        function addMyPositionMarker(lat, lng) {
            if(myPositionMarker != null){
                myPositionMarker.setMap(null); // clearing prev req position
            }

            myPositionMarker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lng),
                map: map,
                draggable: true,
                zIndex: 99999,
                icon: 'http://i.stack.imgur.com/orZ4x.png'
            });

            google.maps.event.addListener(myPositionMarker,'dragend',function(event) {
                getCrimeByLocation(event.latLng.lat(), event.latLng.lng());
            });
        }
        //Calling the JSON data from the website
        function getCrimeByLocation(lat, lng, date){
            if(date == null){
                var d = new Date();
                date = d.getFullYear() + '-' + (d.getMonth()+1);
                //hardcoding as of now as jan 2014 data is not there, remove when req
                date = "2013-01";
            }
            $.getJSON( "http://data.police.uk/api/crimes-street/all-crime?lat="+lat+"&lng="+lng+"&date="+date, function( data ) {
            while(markers.length > 0){
                markers.pop().setMap(null);
            }

            //marking the requested position
            addMyPositionMarker(lat, lng);

            $.each( data, function( key, val ) {
            //var myLatlng = new google.maps.LatLng(val.location.latitude, val.location.longitude);
                var marker = new google.maps.Marker({
                position: new google.maps.LatLng(val.location.latitude, val.location.longitude),
                map: map,
                animation: google.maps.Animation.DROP,
                draggable: false,
                title: val.location.street.name
                });
                markers.push(marker); // saving markers for reference, so that we can remove them later;
            });

            if(markers.length > 0){
                fitBoundsMap();
            }
            });
        }

function geocodeCrimeLocation(date){
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
     if (status == google.maps.GeocoderStatus.OK) {
         map.setCenter(results[0].geometry.location);
         var latitude = json.results[0].geometry.location.lat;
         var longitude = json.results[0].geometry.location.lng;

         if(date == null){
            var d = new Date();
            date = d.getFullYear() + '-' + (d.getMonth()+1);
            date = "2013-01";
         }
    $.getJSON( "http://data.police.uk/api/crimes-street/all-crime?   lat="+latitude+"&lng="+longitude+"&date="+date, function(data) {
    while(markers.length > 0){
          markers.pop().setMap(null);
    }

//marking the requested position
addMyPositionMarker(latitude, longitude);

$.each( data, function( key, val ) {
    //var myLatlng = new google.maps.LatLng(val.location.latitude, val.location.longitude);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(val.location.latitude, val.location.longitude),
        map: map,
        animation: google.maps.Animation.DROP,
        draggable: false,
        title: val.location.street.name
    });
    markers.push(marker); // saving markers for reference, so that we can remove them later;
    });

if(markers.length > 0){
    fitBoundsMap();
}
});

} else {
     alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>

HTML：

<body onload="initialize()">
<!-- <div id="map-canvas" style="width: 320px; height: 480px;"></div> -->
<div id="map-canvas" style="width: 100%; height: 480px;"></div>
<div>
    <input id="address" type="textbox" placeholder = "Enter address, or postcode">
    <input type="button" value="Encode" onclick="geocodeCrimeLocation()">
</div>
</body>

如果有人可以提出修正错误的建议，那将非常感激。感谢

Answer 1

你应该在

上遇到明显的javascript错误

     var latitude = json.results[0].geometry.location.lat;
     var longitude = json.results[0].geometry.location.lng;

应该是：

     map.setCenter(results[0].geometry.location);
     var latitude = results[0].geometry.location.lat();
     var longitude = results[0].geometry.location.lng();

results [0] .geometry.location是google.maps.LatLng object

Answer 2

在这些代码行上（从地理编码器获取位置）：

var latitude = json.results[0].geometry.location.lat;
var longitude = json.results[0].geometry.location.lng;

你需要json吗？？我不明白为什么你会这样，除非我是密集的，因为对象结果被传递到函数中并且你设置中心关闭我认为正在工作的对象？

标记不会显示来自url json数据

2 个答案: