2011-01-31 6 views
3

私は、影響の半径とともに緯度/経度の位置を取得することによって、場所を選択する簡単なユーザーフレンドリーな方法を探しています。jQuery/Google Maps:半径コントロールのある位置ピッカー?

私は、Google広告で広告表示領域を選択しているときに同様のことをしています。私はこれにjQuery/Googleのソリューションがあるのだろうか?または私は実装することができます同様の何かを見たことがありますか?

ちょうど中心(緯度/経度)と半径が必要です。

P.S.これは英国のためのものです。

答えて

3

私はこのようなものに落ち着い:ので、あなたの答えに単語「何か」がわかります

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 

     <!-- TITLE --> 
     <title>Website Title</title> 

     <!-- META --> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

     <!-- JAVASCRIPT --> 
     <script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false'></script> 
     <script type="text/javascript" src="jquery-1.4.4.min.js"></script> 

     <script type="text/javascript"> 

      $(document).ready(function(){ 

       var Circle = null; 
       var Radius = $("#radius").val(); 

       var StartPosition = new google.maps.LatLng(54.19335, -3.92695); 

       function DrawCircle(Map, Center, Radius) { 

        if (Circle != null) { 
         Circle.setMap(null); 
        } 

        if(Radius > 0) { 
         Radius *= 1609.344; 
         Circle = new google.maps.Circle({ 
          center: Center, 
          radius: Radius, 
          strokeColor: "#0000FF", 
          strokeOpacity: 0.35, 
          strokeWeight: 2, 
          fillColor: "#0000FF", 
          fillOpacity: 0.20, 
          map: Map 
         }); 
        } 
       } 

       function SetPosition(Location, Viewport) { 
        Marker.setPosition(Location); 
        if(Viewport){ 
         Map.fitBounds(Viewport); 
         Map.setZoom(map.getZoom() + 2); 
        } 
        else { 
         Map.panTo(Location); 
        } 
        Radius = $("#radius").val(); 
        DrawCircle(Map, Location, Radius); 
        $("#latitude").val(Location.lat().toFixed(5)); 
        $("#longitude").val(Location.lng().toFixed(5)); 
       } 

       var MapOptions = { 
        zoom: 5, 
        center: StartPosition, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        mapTypeControl: false, 
        disableDoubleClickZoom: true, 
        streetViewControl: false 
       }; 

       var MapView = $("#map"); 
       var Map = new google.maps.Map(MapView.get(0), MapOptions); 

       var Marker = new google.maps.Marker({ 
        position: StartPosition, 
        map: Map, 
        title: "Drag Me", 
        draggable: true 
       }); 

       google.maps.event.addListener(Marker, "dragend", function(event) { 
        SetPosition(Marker.position); 
       }); 

       $("#radius").keyup(function(){ 
        google.maps.event.trigger(Marker, "dragend"); 
       }); 

       DrawCircle(Map, StartPosition, Radius); 
       SetPosition(Marker.position); 

      }); 

     </script> 

    </head> 

    <body> 

     <form> 

      Latitude: <input type="text" id="latitude" /> Longitude: <input type="text" id="longitude" /> 
      Radius: <input type="text" id="radius" value="320" /> 

      <div id="map" style="width:600px; height:400px; background-color:#000000;"> 


      </div> 

     </form> 

    </body> 

</html> 
+0

-1 doesntの仕事http://alta.ee/groomlake/map-picker.php –

+0

これは完成したコードではなく、テストされませんでした。あなたが提供したリンクも実際には機能しますが、なぜあなたはそれがそうではないと言いますか?それはあなたのために動作しない場合は、それを動作させるか、あなたは 'Gimmeh teh codez'人ですか?私が(特にコードを)与えることを余儀なくされた唯一の答えをダウン投票すると、完全なツールのように見えます。なぜ自分で答えを出さないのですか? –

+0

私は答える前に、あなたの答えを下げました。それは非常に貧しい答えです。あなたが言ったように、テストされていない(未確認の)、それはドキュメントとコメントが欠けています。質問に関連する何かのちょうどペースト。あなた以外の誰かがこの質問をしたなら、あなたの答えは受け入れられませんでした。位置ピッカーに関しては、コードが機能しないように入力が更新されない。期間。 テストされていないコードを提出したい場合は、免責事項を記入してください。 –

関連する問題