0

我正在使用 Google MAP 构建一个页面，该页面具有一个侧边栏，其中动态创建的 div 链接到地图中标记的位置。

我将 ASP.NET MVC 与 JQuery 和 Google Maps API v3 一起使用。

这是它的外观。

我的页面

此页面在启动窗口中加载并动态生成。

在后台页面中，用户在输入字段中键入州或城市，在我的控制器操作中，我搜索位于该区域的所有人并返回 JSON。我得到 JSON 并用标记填充地图，然后在侧栏中制作 div 列表。

我想向那些 div 添加一个功能，当单击它们时，地图将在标记处居中。

我想出了一个我无法完成的解决方案的想法。

我添加class="clickable"了属性“Lat”和“Lng”，其值等于与它们相关的标记中的值，我尝试使用 JQuery 获取他们的点击事件，然后使用它的 Lat 和 Lng 设置地图中心，如下所示：

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

这种方法有两个问题。- 首先，我不知道如何使用 JQuery 获取地图。我找到了两种使用 like 的方法，$('map_canvas').gMap但没有用。尝试了我在 Stackoverflow 中找到的更多东西，但也没有用。

第二 - JQuery 不会捕获来自 DIV 的事件点击。我在 Google Chrome 控制台上测试了 JQuery 代码并且它工作但我的代码不会触发点击。我$(".clickable div").click(function(){ alert("test"); }在谷歌浏览器上尝试过类似的东西并且它有效，但在我的脚本中它没有。

我还尝试addDomListener在我的代码中添加侦听器，但也无法解决。

任何人都可以告诉我什么是这样做的好方法，而无需在单击 div 时重新创建地图。

我也不喜欢将 Lat 和 Lng 属性添加到 div 的想法，我不知道这是否适用于任何浏览器，或者它是否是好的做法。我只是没有解决方案。

这是我正在使用的代码。（我删除了一些以使其更短且更易于阅读）

$(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 中创建一个全局变量并保留地图信息以便以后再次调用它。为此，我刚刚在 .

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

然后调用一个方法平移到正确的点。我将属性 Lat 和 Lng 添加到 div 中，然后在 javascript 函数中传递 div 并从中获取属性。

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 回答