0

（都市の）最初のグーグルマップとコンボボックスのあるページがあります。ユーザーは地図上のマーカーをドラッグして場所を選択できます。次に、この値（lang、long）が非表示フィールドに保存され、サーバーに渡されます。ただし、コンボにはいくつかの都市エリアがリストされています。ユーザーがエリアを選択すると、グーグルマップが変更されます。都市マップが消え、選択したエリアのマップが表示されます。これはgetJSONを介して行われ、すべて正常に機能します。

私の問題は、この2番目のマップであるエリアマップを同じ機能で有効にする方法です（ドラッグ可能なマーカーの位置を更新します）。リスナーが最初に最初のマップにバインドされていることを理解しています。新しいマップで機能を有効にするためにこれらの関数をどこに配置するかを理解するのに十分なJavaScriptがわかりません。

私はこの答えに大きな助けを見つけましたが、それは私の問題を解決しません。

コードは次のとおりです

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

$(function() {

$("#id_area").change(function() {

    var url = '/areageo/'+this.value;

    $.getJSON(url, function(data) {

        if (data.lat){

            $('#mapCanvas').empty();
            // map options
            var options = {
                   zoom: 14,
                   center: new google.maps.LatLng(data.lat, data.lon),
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 };

                 // Creating the map
            var map = new google.maps.Map(document.getElementById('mapCanvas'), options);

                 // Adding a marker to the map
            var marker = new google.maps.Marker({
                   position: new google.maps.LatLng(data.lat, data.lon),
                   map: map,
                   title: 'Some title',
                   draggable: true,
                      });
            }

                 });  //getJSON end function

    });  //id_area change end function

});


         var geocoder = new google.maps.Geocoder();
         function geocodePosition(pos) {
           geocoder.geocode({
             latLng: pos
           }, function(responses) {
             if (responses && responses.length > 0) {
               updateMarkerAddress(responses[0].formatted_address);
             } else {
               updateMarkerAddress('Cannot determine address at this location.');
             }
           });
         }
         function updateMarkerStatus(str) {
           document.getElementById('markerStatus').innerHTML = str;
         }
         function updateMarkerPosition(latLng) {
           document.getElementById('info').innerHTML = [
             latLng.lat(),
             latLng.lng()
           ].join(', ');

           id_lat.value = [
             latLng.lat()];
           id_lon.value = [
             latLng.lng()];
         }

         function updateMarkerAddress(str) {
           document.getElementById('address').innerHTML = str;
         }

        // initial setup
         function initialize() {
           var latLng = new google.maps.LatLng(44.77184334415235, 20.55164378320319); // initial map position
           var map = new google.maps.Map(document.getElementById('mapCanvas'), {
             zoom: 12, // initial zoom
             center: latLng,
             mapTypeId: google.maps.MapTypeId.ROADMAP
           });

           var marker = new google.maps.Marker({
             position: latLng,
             title: 'Point A',
             map: map,
             draggable: true,

           });

           // Update current position info.
           updateMarkerPosition(latLng);
           geocodePosition(latLng);

           // Add dragging event listeners.
           google.maps.event.addListener(marker, 'dragstart', function() {
             updateMarkerAddress('Dragging...');
           });

           google.maps.event.addListener(marker, 'drag', function() {
             updateMarkerStatus('Dragging...');
             updateMarkerPosition(marker.getPosition());
           });

           google.maps.event.addListener(marker, 'dragend', function() {
             updateMarkerStatus('Drag ended');
             geocodePosition(marker.getPosition());
           });
         }


         // Onload handler to fire off the app.
         google.maps.event.addDomListener(window, 'load', initialize);
         </script>
4

1 に答える 1

1

簡単な答えは、地図を削除しないでください。ユーザーが郊外を選択したら、既存の地図をそのエリアにズームします（必要に応じてマーカーを移動して、表示されるようにします）。そうすれば、何も再定義する必要はありません。

マップがある場合は、その1つのマップですべてを実行してみてください。あなたはそれを破壊する必要は決してないはずです：ただ何か他のものを見せるためにそれを手に入れてください。

したがって、if (data.lat) {...ブロックはマップを中央にdata.lat,data.lon配置し、既存のマーカーをその場所に移動するだけで済みます。マーカーは引き続き同じマーカーであり、マップは同じマップであるため、リスナーなどを再作成する必要はありません。

于 2012-04-08T21:38:58.567 に答える