0

マップ内のマーカーの位置にリンクされた動的に作成されたdivを備えたサイドバーを備えたGoogleMAPを使用してページを作成しています。

JQueryとGoogleMapsAPIv3でASP.NETMVCを使用しています。

これがその外観です。

MyPage

このページはスプラッシュウィンドウに読み込まれ、動的に生成されます。

バックグラウンドページで、ユーザーが入力フィールドに州または都市を入力し、コントローラーアクションで、そのエリアにいるすべての人を検索してJSONを返します。JSONを取得し、マップにマーカーを入力してから、サイドバーにdivのリストを作成します。

それらのdivに、クリックするとマップがマーカーの中央に配置される関数を追加したいと思います。

私はこの解決策のアイデアを思いつきましたが、それを終わらせることはできませんでした。

class="clickable"属性「Lat」と「Lng」を、それらが関連するマーカーの値と等しい値で追加し、JQueryでクリックイベントを取得してから、マップの中心をそのLatとLngで次のように設定しようとしました。 ：

$(".clickable div").click(function(){
    $('map_canvas').panTo($(this).attr('lat'), $(this).attr('lng'));
}

このアプローチには2つの問題がありました。-まず、JQueryで地図を取得する方法がわかりませんでした。likeを使用して2つの方法を見つけまし$('map_canvas').gMapたが、機能しませんでした。Stackoverflowで見つけたものをさらにいくつか試しましたが、機能しませんでした。

2番目-JQueryはDIVからのイベントクリックをキャッチしませんでした。Google ChromeコンソールでJQueryコードをテストしましたが、機能しましたが、コードがクリックをトリガーしませんでした。私はGoogleChromeのようなものを試し$(".clickable div").click(function(){ alert("test"); }ましたが、うまくいきましたが、私のスクリプトではうまくいきませんでした。

また、コードでを使用してリスナーを追加しようとしaddDomListenerましたが、それも回避できませんでした。

divがクリックされたときにマップを再作成せずにこれを行うための良い方法を教えてください。

また、divにLat属性とLng属性を追加するというアイデアも好きではありません。それがどのブラウザーでも機能するのか、それともその良い習慣なのかはわかりません。私はこれに対する解決策がありません。

これが私が使用しているコードです。（短くて読みやすくするために、一部を削除しました）

$(document).ready(function () {

    //Google Maps API V3 - Prepares the ajaxForm options.
    var options = {
        beforeSubmit: showRequestPesquisaAdvogados,
        success: showResponsePesquisaAdvogados,
        type: 'post',
        resetForm: false
    };
    $('#form-pesquisaAdvogado').ajaxForm(options);

    //$(".clickable").click(function () { alert($(this).attr('lat')) });
});

function showRequestPesquisaAdvogados(formData, jqForm, options) {
    $("#modal-processing-background").show(); //Shows processing splash window
}

function showResponsePesquisaAdvogados(responseText, statusText, xhr, $form) {

    $("#modal-processing-background").hide(); 
    //Hide processing window

    loadSplashWindow();
    CreateMap(responseText);
    CreateSideBar(responseText);
    }
}

function CreateMap(json) {

    var mapOptions = {
        center: new google.maps.LatLng(json[0].Endereco.Lat, json[0].Endereco.Lng),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        //  marker:true
    };

    var infoWindow = new google.maps.InfoWindow();

    var map = new google.maps.Map(document.getElementById("map-result"), mapOptions);

    for (i = 0; i < json.length; i++) {
        var data = json[i]
        var myLatlng = new google.maps.LatLng(data.Endereco.Lat, data.Endereco.Lng);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: data.Endereco.Logradouro
        });
        (function (marker, data) {                                
            // Attaching a click event to the current marker
            google.maps.event.addListener(marker, "click", function (e) {                    
                //  Prepare the infoWindows content. 
                var contentString = //my content; 
                infoWindow.setContent(contentString);
                infoWindow.open(map, marker);
            });

            //here I tried to add the listener to the div.
            google.maps.event.addDomListener($(".clickable")[i], 'click',
            function () {
                map.panTo(new google.maps.LatLng($(this).attr('lat'),
                     $(this).attr('lng')));
            });
        })(marker, data);
    }
}


function CreateSideBar(json) {
    $(".sideBarConteiner").empty();        

    for (i = 0; i < json.length; i++) {
        var contentString = 
            "<div class='clickable' lat='" + data.Endereco.Lat + 
            "' lng='" + data.Endereco.Lng + "' >" +
            //...div's content here
            "</div>";
        $(".sideBarConteiner").append(contentString);            
    }
}

コードをより良くしたり、より良い方法にするための提案があれば、私はプログラミングの経験が3か月しかないので、知らないうちに間違った方向に進んでいる可能性があります。より良い方法。

私の投稿は少し長いことを知っています、私はそれを明確にしたかっただけです。

よろしくお願いします。

よろしく、

セザール。

4

1 に答える 1

0

JavaScript でグローバル変数を作成し、後で再度呼び出すためにマップ情報を保持することで、これを行う方法を見つけました。これに、.var の一番上に var "map" を追加しました。

<script type="text/javascript">
    $.ajaxSetup({ cache: false }); //Forces IE to renew the cash for ajax.
    var zoom = 8;
    var mapOptions, map;

次に、正しいポイントにパンするメソッドを呼び出します。プロパティ Lat と Lng を div に追加してから、div を javascript 関数に渡し、そこから属性を取得します。

function CreateSideBar(json) {
    $(".sideBarConteiner").empty();        

    for (i = 0; i < json.length; i++) {
        var contentString = 
            "<div class='clickable' data-lat='" + data.Endereco.Lat + 
            "' data-lng='" + data.Endereco.Lng + "' onclick='MarkerFocus(this)'>" +
            //...div's content here
            "</div>";
        $(".sideBarConteiner").append(contentString);            
    }
}

そして私の機能では：

function MarkerFocus(obj) {        
var myLatlng = 
    new google.maps.LatLng($(obj).attr('data-lat'), $(obj).attr('data-lng')); 
map.panTo(myLatlng);
}

それは私のために働いた。あなたにも役立つことを願っています。

ヘルプとサポートに感謝します。

セザール

于 2013-02-26T15:17:59.550 に答える