2014-02-18 34 views
1

我的頁面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"); 
    } 
}); 
+1

函數geocode()如何調用ED?沒有任何等待'postcodeViolet'變化的事件監聽器。 –

+1

嗨安託 - 道歉,代碼是在另一個文件 - 這只是簡單的觸發點擊搜索圖標或點擊返回。我編輯了我的問題。感謝您看看:) –

+0

好的,我用setTimeout設置了對'geocode()'的調用。它的工作原理。標記和圓圈移到新的位置。作爲我使用加迪夫的地址。我的網頁上也有同樣的內容。你正在使用哪種瀏覽器? –

回答

1

我得到一個JavaScript錯誤:未捕獲的類型錯誤:無法調用 '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."); 
     } 
    }); 
}