Javascript 如何在一个页面中显示多个带有弹出按钮的谷歌地图_Javascript_Html_Popup_Maps

Javascript 如何在一个页面中显示多个带有弹出按钮的谷歌地图

javascript html maps

Javascript 如何在一个页面中显示多个带有弹出按钮的谷歌地图,javascript,html,popup,maps,Javascript,Html,Popup,Maps,在下面的脚本中，我希望在一个页面中提供多个地图，但当我单击相应的按钮时，它们必须出现在弹出窗口中。因此，该页面中将有几个按钮，每个按钮对应一个地图，地图将显示在弹出窗口中第一个按钮正常，但第二个按钮不工作。我可以做些什么来让它工作并添加其他内容谢谢 <html> <title></title> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sens

在下面的脚本中，我希望在一个页面中提供多个地图，但当我单击相应的按钮时，它们必须出现在弹出窗口中。因此，该页面中将有几个按钮，每个按钮对应一个地图，地图将显示在弹出窗口中

第一个按钮正常，但第二个按钮不工作。我可以做些什么来让它工作并添加其他内容

谢谢

<html>
<title></title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>

<script type="text/javascript">
    $(function () {
        $("#btnShow").click(function () {
            $("#dialog").dialog({
                modal: true,
                title: "Map",
                width: 600,
                hright: 450,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                open: function () {

    var latlng1 = new google.maps.LatLng(18.520266,73.856406);
    var latlng2 = new google.maps.LatLng(28.579943,77.330006);
    var myOptions1 =
    {
        zoom: 15,
        center: latlng1,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    var myOptions2 =
    {
        zoom: 10,
        center: latlng2,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    var map1 = new google.maps.Map(document.getElementById("map_canvas_1"), myOptions1);
    var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);

    var myMarker1 = new google.maps.Marker(
    {
        position: latlng1,
        map: map1,
        title:"Local"
   });

    var myMarker2 = new google.maps.Marker(
    {
        position: latlng2,
        map: map2,
        title:"Local"
    });

                }
            });
        });
    });
</script>

</head>
<body>


<input id="btnShow" type="button" value="Open Map 1"/>
<div id="dialog" style="display: none">
<div id="map_canvas_1" style="height: 380px; width: 580px;"></div>
</div>

<br /><br />

<input id="btnShow" type="button" value="Open Map 2"/>
<div id="dialog" style="display: none">
<div id="map_canvas_2" style="height: 380px; width: 580px;"></div>
</div>


</body>
</html>


$（函数（）{
$（“#btnShow”）。单击（函数（）{
$（“#对话框”）。对话框({
莫代尔：是的，
标题：“地图”，
宽度：600，
人权：450，
按钮：{
关闭：函数（）{
$（this.dialog（'close'）；
}
},
打开：函数（）{
var latlng1=新的google.maps.LatLng（18.520266,73.856406）；
var latlng2=新的google.maps.LatLng（28.579943,77.330006）；
变型肌肽1=
{
缩放：15，
中心：latlng1，
mapTypeId:google.maps.mapTypeId.SATELLITE
};
变型肌肽2=
{
缩放：10，
中心：latlng2，
mapTypeId:google.maps.mapTypeId.SATELLITE
};
var map1=new google.maps.Map（document.getElementById（“Map\u canvas\u 1”），myOptions1）；
var map2=new google.maps.Map（document.getElementById（“Map\u canvas\u 2”），myOptions2）；
var myMarker1=新的google.maps.Marker(
{
位置：latlng1，
地图：地图1，
标题：“本地”
});
var myMarker2=新的google.maps.Marker(
{
位置：latlng2，
地图:map2,，
标题：“本地”
});
}
});
});
});

此解决方案不是真正的解决方案，而是解决您的问题。

看一看它以了解发生了什么，然后您可以重构以获得更短的代码（如果您有两个以上的映射，这一点很重要）。查看官方文件可能会有所帮助

    <html>
    <title></title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
    </head>

    <script type="text/javascript">
        $(function () {
            $("#btnShow_map1").click(function () {

                $("#dialog_map1").dialog({
                    modal: true, 
                    title: "Map",
                    width: 600,
                    hright: 450,
                    buttons: {
                        Close: function () {
                            $(this).dialog('close');
                        }
                    },
                    open: function () {

                        var latlng1 = new google.maps.LatLng(18.520266,73.856406);
                        var myOptions1 =
                        {
                            zoom: 15,
                            center: latlng1,
                            mapTypeId: google.maps.MapTypeId.SATELLITE
                        };


                        var map1 = new google.maps.Map(document.getElementById("map_canvas_1"), myOptions1);

                        var myMarker1 = new google.maps.Marker(
                        {
                            position: latlng1,
                            map: map1,
                            title:"Local"
                       });

                    }
                });
            });

            $("#btnShow_map2").click(function () {

                $("#dialog_map2").dialog({
                    modal: true, 
                    title: "Map",
                    width: 600,
                    hright: 450,
                    buttons: {
                        Close: function () {
                            $(this).dialog('close');
                        }
                    },
                    open: function () {

                        var latlng2 = new google.maps.LatLng(28.579943,77.330006);
                        var myOptions2 =
                        {
                            zoom: 10,
                            center: latlng2,
                            mapTypeId: google.maps.MapTypeId.SATELLITE
                        };  


                        var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);

                        var myMarker2 = new google.maps.Marker(
                        {
                            position: latlng2,
                            map: map2,
                            title:"Local"
                        });

                    }
                });
            });
        });
    </script>

    </head>
    <body>


    <input id="btnShow_map1" type="button" value="Open Map 1"/>
    <div id="dialog_map1" style="display: none">
    <div id="map_canvas_1" style="height: 380px; width: 580px;"></div>
    </div>

    <br /><br />

    <input id="btnShow_map2" type="button" value="Open Map 2"/>
    <div id="dialog_map2" style="display: none">
    <div id="map_canvas_2" style="height: 380px; width: 580px;"></div>
    </div>


    </body>
</html>


$（函数（）{
$（“显示地图1”）。单击（函数（）{
$（“#dialog_map1”）。dialog({
莫代尔：是的，
标题：“地图”，
宽度：600，
人权：450，
按钮：{
关闭：函数（）{
$（this.dialog（'close'）；
}
},
打开：函数（）{
var latlng1=新的google.maps.LatLng（18.520266,73.856406）；
变型肌肽1=
{
缩放：15，
中心：latlng1，
mapTypeId:google.maps.mapTypeId.SATELLITE
};
var map1=new google.maps.Map（document.getElementById（“Map\u canvas\u 1”），myOptions1）；
var myMarker1=新的google.maps.Marker(
{
位置：latlng1，
地图：地图1，
标题：“本地”
});
}
});
});
$（“显示地图2”）。单击（函数（）{
$（“#dialog_map2”）。dialog({
莫代尔：是的，
标题：“地图”，
宽度：600，
人权：450，
按钮：{
关闭：函数（）{
$（this.dialog（'close'）；
}
},
打开：函数（）{
var latlng2=新的google.maps.LatLng（28.579943,77.330006）；
变型肌肽2=
{
缩放：10，
中心：latlng2，
mapTypeId:google.maps.mapTypeId.SATELLITE
};  
var map2=new google.maps.Map（document.getElementById（“Map\u canvas\u 2”），myOptions2）；
var myMarker2=新的google.maps.Marker(
{
位置：latlng2，
地图:map2,，
标题：“本地”
});
}
});
});
});

不能使用一个id将事件处理程序绑定到多个项。为此使用类

发件人：

指定元素的唯一id。命名规则：

必须至少包含一个字符
不能包含任何空格字符
在HTML中，所有值都不区分大小写

对于初学者，您不应该在同一HTML页面中有两倍的id。事件处理程序将始终引用一个或另一个。通过删除第一个按钮HTML来测试这一点，看看第二个按钮是否真的打开了第二个地图。我打开了，第二个按钮没有打开控制台中的任何错误？没有！在我看来什么都没有。只是按钮不起作用，就像我说的那样。删除第一个按钮/对话框html并删除

var map1=new google.maps…..

解决了问题并显示了第二个地图。当然，这并不能完全解决你的问题。