单击文本框时会弹出 Google 地图吗？

Question

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

现在我想知道是否有办法让地图出现在弹出窗口中？ 我搜索了“谷歌地图”弹出框和同一条线上的东西，但我找不到任何东西。

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

我想到的是谷歌地图是隐藏的； 一旦文本框出现“onclick”事件，它将显示弹出窗口，用户可以选择位置。

我会添加代码。

 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);

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

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

谢谢你。

Answer 1

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

• 实现地图页面
• 添加一个弹出容器，其中将包含一个指向地图页面的iframe
• 通过 Javascript 处理iframe页面和主页之间的通信