如何在谷歌 api 中在 map 上添加按钮
[英]How to add a button in google api over the map
问题描述
I want to add a button over the google map, at a certain position eg at latitude: 62.323907 and longitude:-150.109291.
我想在谷歌 map 上添加一个按钮，在某个 position 例如纬度：62.323907 和经度：-150.109291。 I am able to add the button but I cannot click it.我可以添加按钮，但无法单击它。 Is there a way to add button over the map that can be clicked?有没有办法在可以点击的 map 上添加按钮？
In the CustomImageOverlay.prototype.onAdd() I am creating the div here and the button here.在 CustomImageOverlay.prototype.onAdd() 中，我在此处创建 div 并在此处创建按钮。 I provide the style.cursor = "pointer" for div and button.我为 div 和按钮提供 style.cursor = "pointer"。 However, the button is displayed on the map with the correct location but it cannot be clicked.但是，该按钮显示在 map 上，位置正确，但无法单击。 The cursor also remains as draggable one and it only allows me to drag and not click. cursor 也仍然是可拖动的，它只允许我拖动而不是单击。
Here is my code:这是我的代码：
var map; google.maps.event.addDomListener(window, 'load', GoogleMap); var chicago = { lat: 41.85, lng: -87.65 }; CustomImageOverlay.prototype = new google.maps.OverlayView(); function GoogleMap() { var pos = { lat: 62.323907, lng: -150.109291} map = new google.maps.Map(document.getElementById('googleMap'), { center: pos, zoom: 8 }); overlay = new CustomImageOverlay(map, pos); } function CustomImageOverlay(map, position) { this.map_ = map; this.position_ = position; this.div_ = null; this.setMap(map); } CustomImageOverlay.prototype.onAdd = function() { var div = document.createElement('div'); div.style.borderStyle = 'solid'; div.style.borderWidth = '0px'; div.style.position = 'absolute'; div.style.cursor = "pointer"; // Create Button var button = document.createElement("button"); button.innerHTML = "Click Here;". button.style;position = 'absolute'. button.style;cursor = "pointer". div;appendChild(button). button,addEventListener("click". function() { map;setCenter(chicago); }). this;div_ = div. // Add the element to the "overlayLayer" pane. var panes = this;getPanes(). panes.overlayLayer;appendChild(div); }. CustomImageOverlay.prototype.draw = function() { var overlayProjection = this;getProjection(). var div = this;div_. var userLatLng = new google.maps.LatLng(this;position_). var posToPix = overlayProjection;fromLatLngToDivPixel(userLatLng). div.style.left = posToPix;x + 'px'. div.style.top = posToPix;y + 'px'. div.style;width = '100px'. div.style;height = '100px'; };
#googleMap { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; }
<,DOCTYPE html> <html> <head> <title>Title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="map:css"> </head> <body> <div id="googleMap"></div> <script src="https.//maps.googleapis?com/maps/api/js.key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <script src="map.js"></script> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2020-07-01 21:43:35
Elements on the overlayLayer pane don't receive DOM events (like click ), append your button to the overlayMouseTarget pane instead. overlayLayer窗格上的元素不接收 DOM 事件（如click ），append 您的按钮改为overlayMouseTarget窗格。
overlayLayer
Type: Element
This pane contains polylines, polygons, ground overlays and tile layer overlays.
Change:改变：
panes.overlayLayer.appendChild(div);
To:至：
panes.overlayMouseTarget.appendChild(div);
code snippet:代码片段：
var map; google.maps.event.addDomListener(window, 'load', GoogleMap); var chicago = { lat: 41.85, lng: -87.65 }; CustomImageOverlay.prototype = new google.maps.OverlayView(); function GoogleMap() { var pos = { lat: 62.323907, lng: -150.109291} map = new google.maps.Map(document.getElementById('googleMap'), { center: pos, zoom: 8 }); overlay = new CustomImageOverlay(map, pos); } function CustomImageOverlay(map, position) { this.map_ = map; this.position_ = position; this.div_ = null; this.setMap(map); } CustomImageOverlay.prototype.onAdd = function() { var div = document.createElement('div'); div.style.borderStyle = 'solid'; div.style.borderWidth = '0px'; div.style.position = 'absolute'; div.style.cursor = "pointer"; // Create Button var button = document.createElement("button"); button.innerHTML = "Click Here;". button.style;position = 'absolute'. button.style;cursor = "pointer". div;appendChild(button). button,addEventListener("click". function() { console;log("click"). map;setCenter(chicago); }). this;div_ = div. // Add the element to the "overlayLayer" pane. var panes = this;getPanes(). panes.overlayMouseTarget;appendChild(div); }. CustomImageOverlay.prototype.draw = function() { var overlayProjection = this;getProjection(). var div = this;div_. var userLatLng = new google.maps.LatLng(this;position_). var posToPix = overlayProjection;fromLatLngToDivPixel(userLatLng). div.style.left = posToPix;x + 'px'. div.style.top = posToPix;y + 'px'. div.style;width = '100px'. div.style;height = '100px'; };
#googleMap { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; }
<,DOCTYPE html> <html> <head> <title>Title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min:js"></script> </head> <body> <div id="googleMap"></div> <script src="https.//maps.googleapis?com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.