相同的谷歌地图也在地图中修改后显示在两个选项卡中

Same Google map Displayed in two Tabs after modification in the map also

本文关键字：选项 两个 显示 修改 谷歌地图 地图      更新时间：2023-09-26

我的Jquery应用程序中有两个选项卡。在每个选项卡中，我都有谷歌地图。。。这些选项卡是通过单击侧边栏中的复选框动态创建的。。。例如，如果我点击第一个复选框，它将创建一个选项卡及其内容（谷歌地图）。。。如果我再次单击另一个复选框，它将创建另一个选项卡并创建其内容。。。

使用复选框创建选项卡时，会创建动态选项卡，并正确显示其谷歌地图。

这里我的问题是，当我点击选项卡（在选项卡之间导航）时，谷歌地图不会改变。。。实际上，我已经通过使用复选框创建了第一个选项卡和第二个选项卡。。。

如果我在Map中进行了一些更改后在选项卡之间切换。。。。然后切换到相同的选项卡意味着它将显示与Lat选项卡相同的Map…这里的问题是什么。。。

如何解决这个问题。。。。

//点击复选框时添加标签

function addTab(link,name) {
            // If tab already exist in the list, return
            if ($("#" + $(link).attr("value")).length != 0)
                return;
            // hide other tabs
            $("#tabs li").removeClass("current");
            $("#content div").hide();
            // add new tab and related content
            $("#tabs").append("<li class='current'><a class='tab' id='" +
                $(link).attr("value") + "' href='#'>" + name + 
                "</a><a href='#' class='remove'>x</a></li>");

             $("#content").append("<div id='" + $(link).attr("value") + "_content' style='width:100%; height:100%'></div>");
             var mid = $(link).attr("value")+"_content";
             tab1map(mid);
             $("#" + $(link).attr("value") + "_content").show();

        }

//选项卡单击可在选项卡之间导航。。。。

$('#tabs a.tab').live('click', function() {
            var tabName= $(this).attr("id");
                var contentname = tabName+ "_content";
                // hide all other tabs
                $("#content div").hide();
                $("#tabs li").removeClass("current"); 

                // show current tab
                $("#" + contentname).show();tab1map(contentname);
               $(this).parent().addClass("current");
            });

//地图调用。。。。

function tab1map(mid) {
       alert("Inside "+mid+" Map");
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById(mid),
        myOptions);
    $(mid).css("height","100%");
    var marker = new google.maps.Marker({
      position: latlng, 
      map: map,
      title:"Hello World!"
  });
  }

我解决了这些问题。。。。只需更改地图画布的<div> tag to <p>标记。。。然后调用以下行中的映射初始化函数。

$("#content").append("<p id='" + $(link).attr("value") + "_content' style='width:100%; height:100%'></p>");
var mid = $(link).attr("value")+"_content";
tab1map(mid);//Map initialization

看到代码会很有帮助，尽管我想说，听起来可能两个地图都使用了相同的元素id，这让任何将它们分开的尝试都很沮丧。

相关文章：