Question

我有一些谷歌地图代码，当您点击地图时自动填充带有纬度和经度的文本框。

现在我想知道你是否有办法让地图出现在弹出窗口中？我搜索了＃34;谷歌地图＆＃34;弹出框架和沿同一行的东西，但我找不到任何东西。

例如：我们假设有一个ID为＆＃34;位置＆＃34; 的文本框。单击文本框后，将出现一个谷歌地图弹出窗口，您可以在其中单击，坐标将自动输入到＆＃34;位置＆＃34; （已经有这部分代码）。如果您点击弹出窗口后面的屏幕上的任意位置，谷歌地图弹出窗口必须消失。

我想到的是谷歌地图是隐藏的;一旦文本框中出现＆＃34; onclick＆＃34; 事件，它就会显示弹出窗口，用户可以选择该位置。

我将添加代码。

＆＃13;

            var map;
            var marker = null;

            function initialize() {

                var mapOptions = {
                    zoom: 5,
                    disableDefaultUI: false,
                    center: new google.maps.LatLng(21.268899719967695, 39.2266845703125),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById('map'), mapOptions);

                
                google.maps.event.addListener(map, 'click', function(event) {
              
                    $("#Coordinate1").val(event.latLng.lat() + ", " + event.latLng.lng());
                    $("#Coordinate1").select();

                
                    if (marker) { marker.setMap(null); }

           
                     marker = new google.maps.Marker({ position: event.latLng, map: map});

                });

            }  

            google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

#map {
width:350px; 
height:200px;
}
#Coordinate1{
text-align:center;
border:1px #ccc solid;
}

＆＃13;

<div id="map"></div>
<input type="text" id="Coordinate1" value="Latitude, Longitude">

＆＃13;

谢谢。

Answer 1

您应该考虑实施一个分别拥有该地图的页面。在主页面中将其用作iframe，并在需要时显示/隐藏其容器。所以，解决问题的步骤：

实施地图页
添加一个弹出式容器，其中包含指向地图页面的iframe
通过Javascript

iframe

文本框上的Google地图弹出式弹出式菜单？

1 个答案: