1

同じページに Google マップ API から 3 つのマップがあります。メインの 1 つで、他の 2 つよりも幅が広く、都市を検索するための検索フィールドがあります。その上にマーカーがあります。他の 2 つのマップに結果が表示された状態でマーカーを移動しながら、ユーザーにその領域を「スクリーニング」してもらいたいと思います。

たとえば、ユーザーがニューヨーク市を検索すると、メイン マップには都市がズーム 12 で表示されます。他の 2 つは同じポイントですが、ズームは 17 と 18 です。ユーザーが移動すると、それら 2 つの場所が更新されることを望みます。メインマップ上のマーカー。たとえば、マーカーをブルックリン橋の上にドラッグすると、メイン ウィンドウは移動しませんが、他の 2 つのウィンドウはブルックリン橋にフォーカスします。

次のコードは、テキストボックス id=location で検索した後、3 つのマップを同じポイントに集中させるのに非常にうまく機能していますが、マーカーのドラッグに応じて更新できない関数をどこに追加すればよいかわかりません。 .

HTML

<div id="gmap" style="width:500px; height:500px;"></div>
<div id="gmap_sat" style="width:250px; height:150px;"></div>
<div id="gmap_zoom" style="width:250px; height:150px;"></div>

JS

<script type="text/javascript">
$(function(){
var latlng = new google.maps.LatLng(<?php echo $latlng?>);

var map = new google.maps.Map(document.getElementById('gmap'),{
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});


var map_zoom = new google.maps.Map(document.getElementById('gmap_zoom'),{
    zoom: 15,
    center: latlng,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var map_sat = new google.maps.Map(document.getElementById('gmap_sat'),{
    zoom: 18,
    center: latlng,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.SATELLITE
});

var marker = new google.maps.Marker({
    position : latlng,
    map : map,
    title : 'Select a location',
    draggable : true
});

var geocoder = new google.maps.Geocoder();

google.maps.event.addListener(marker,'drag',function(){
    setPosition(marker);
});

$('#location').keypress(function(e){
    if(e.keyCode==13){
        var request = {
            address : $(this).val() 
        }
        geocoder.geocode(request,function(results, status){
            if(status == google.maps.GeocoderStatus.OK){
                var pos = results[0].geometry.location;
                map.setCenter(pos); 
                map_zoom.setCenter(pos);
                map_sat.setCenter(pos);
                marker.setPosition(pos);
                setPosition(marker);
            }
        });
        return false;
    }
})  
});

function setPosition(marker){
var pos = marker.getPosition(); 
$('#latitude').val(pos.lat());
$('#longitude').val(pos.lng());
}
</script>

助けてくれてありがとう

4

1 に答える 1

3

ドラジェンドイベントを利用する

<script>
    $(function(){
        var latlng = new google.maps.LatLng(43.723, -79.498);

        var map = new google.maps.Map(document.getElementById('gmap'),{
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });


        var map_zoom = new google.maps.Map(document.getElementById('gmap_zoom'),{
            zoom: 15,
            center: latlng,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var map_sat = new google.maps.Map(document.getElementById('gmap_sat'),{
            zoom: 18,
            center: latlng,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.SATELLITE
        });

        var marker = new google.maps.Marker({
            position : latlng,
            map : map,
            title : 'Select a location',
            draggable : true
        });

        var geocoder = new google.maps.Geocoder();

        google.maps.event.addListener(marker,'drag',function(){
            setPosition(marker);
        });

        google.maps.event.addListener(marker, 'dragend', function () {
            var newPosition = marker.getPosition();
            map_sat.setCenter(newPosition);
            map_zoom.setCenter(newPosition);
        });

        $('#location').keypress(function (e) {
            if(e.keyCode==13){
                var request = {
                    address : $(this).val() 
                }
                geocoder.geocode(request,function(results, status){
                    if(status == google.maps.GeocoderStatus.OK){
                        var pos = results[0].geometry.location;
                        map.setCenter(pos); 
                        map_zoom.setCenter(pos);
                        map_sat.setCenter(pos);
                        marker.setPosition(pos);
                        setPosition(marker);
                    }
                });
                return false;
            }
        })  
    });

    function setPosition(marker){
        var pos = marker.getPosition(); 
        $('#latitude').val(pos.lat());
        $('#longitude').val(pos.lng());
    }
      </script>
于 2013-09-05T13:11:16.957 に答える