Google Maps 和 ASP .NET MVC - 将地图置于标记的中心

Question

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

我正在使用带有 JQuery 和 Google Maps API v3 的 ASP.NET MVC。

这里是它的外观。

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

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

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

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

我添加了class="clickable" 和属性“Lat”和“Lng”，其值等于它们相关的标记中的值，我尝试使用 JQuery 获取它们的点击事件，然后使用它的经纬度是这样的：

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

我在使用这种方法时遇到了 2 个问题。 - 首先，我不知道如何使用 JQuery 获取地图。 我发现了两种使用 $('map_canvas').gMap 之类的方法，但它没有用。尝试了一些我在 Stackoverflow 中找到的东西，但也没有奏效。

第二 - JQuery 不会捕获来自 DIV 的事件点击。 我在 Google Chrome 控制台上测试了 JQuery 代码并且它工作但我的代码不会触发点击。 我在 Google Chrome 上尝试了类似 $(".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 个月的编程经验，我可能会在不知不觉中走错方向，所以如果您认为，请随时更改某些内容会是更好的方法。

我知道我的帖子有点长，我只想说清楚。

提前感谢您的支持。

问候，

塞萨尔。

Answer 1

我找到了一种方法，方法是在 javascript 中创建一个全局变量并保留地图信息以便以后再次调用它。 为此，我刚刚在 .

顶部添加了一个 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 中，然后在 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);
}

它对我有用。希望对你也有帮助。

感谢大家的帮助和支持。

塞萨尔