Question

我在页面http://www.liquidlizard.net/users/trainer

上有一张地图

当用户在英国输入位置或邮政编码，然后点击搜索或点击输入时，地图就会移动到该点，但它的意思是带圆圈和标记。目前，只有在您通过鼠标拖动标记移动标记后，它才会在您执行搜索时正确响应。

我认为这与我的dragend功能有关，但我对javascript不太好。

任何人都可以帮助我吗？

var userLocation = "London";
var geocoder = new google.maps.Geocoder();
var circle;
var latLng;
var marker;
var latlng;
var styles = [
              {
                    stylers: [
                      { hue: "#00ffe6" },
                      { saturation: -20 }
                    ]
              }
            ];

function initialize()
{
    latlng = new google.maps.LatLng(51.71194988641549, -0.4821940203124768);

    $('#lattitude').val(51.71194988641549);
    $('#longitude').val(-0.4821940203124768);

    var myOptions = {
        zoom: 6,
        styles: styles,
        center: latlng,
        //panControl: true,
        zoomControl: true,
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

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

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


    google.maps.event.addListener(marker, 'dragend', function() {
        //circle.setVisible(false);
        var point = marker.getPosition();
        map.panTo(point);
        $('#lattitude').val(point.lat());
        $('#longitude').val(point.lng());
        drawCircle($("#miles").val()/0.0621371192*100);
    });
}


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

function drawCircle(radius) {

    if (circle != undefined)
        circle.setMap(null);

    newlatlong = new google.maps.LatLng(parseFloat($('#lattitude').val()), parseFloat($('#longitude').val()));

    var options = {
        strokeColor: '#d12d87',
        strokeOpacity: 0.35,
        strokeWeight: 1,
        fillColor: '#d12d87',
        fillOpacity: 0.35,
        map: map,
        center: newlatlong,
        radius: radius
    };

    circle = new google.maps.Circle(options);
}

function geocode(){
 geocoder.geocode({
        address: $('#postcodeViolet').val()+' UK'
    }, function(results, status){
        if(status == google.maps.GeocoderStatus.OK){
         var geoPoint = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
            map.setCenter(geoPoint);
            circle.setCenter(geoPoint);
            marker.setPosition(geoPoint);
           $('#lattitude').val(geoPoint.lat());
           $('#longitude').val(geoPoint.lng());
        } else{
            alert("Can not geolocate this address.");
        }
    });
}

也称为地理编码：

//User clicks to search location
$(".spyglassIcon").click(function() {
    geocode();
});

$('.formInputTextPostcode').bind("enterKey",function(e){
    $(".spyglassIcon").click();
});
$('.formInputTextPostcode').keyup(function(e){
    if(e.keyCode == 13)
    {
      $(this).trigger("enterKey");
    }
});

Answer 1

我收到一个javascript错误：未捕获的TypeError：无法调用undefined training的方法'setCenter'：108

这是因为你没有在导致问题的路径中创建圆圈，这应该解决：

function geocode(){
 geocoder.geocode({
        address: $('#postcodeViolet').val()+' UK'
    }, function(results, status){
        if(status == google.maps.GeocoderStatus.OK){
         var geoPoint = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
            map.setCenter(geoPoint);
            if (!!circle && !!circle.setCenter) circle.setCenter(geoPoint);
            marker.setPosition(geoPoint);
           $('#lattitude').val(geoPoint.lat());
           $('#longitude').val(geoPoint.lng());
        } else{
            alert("Can not geolocate this address.");
        }
    });
}

谷歌地图 - 标记不动，直到我手动移动一次

1 个答案: