我想在谷歌地圖上的某個位置添加一個按鈕，例如緯度：62.323907 和經度：-150.109291。我可以添加按鈕，但無法單擊它。有沒有辦法在可以點擊的地圖上添加按鈕？在 CustomImageOverlay.prototype.onAdd() 中，我在此處創建 div 并在此處創建按鈕。我為 div 和按鈕提供 style.cursor = "pointer"。但是，該按鈕顯示在地圖上，位置正確，但無法單擊。光標也保持為可拖動的，它只允許我拖動而不是單擊。這是我的代碼：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; }
如何在地圖上的google api中添加一個按鈕
胡說叔叔
2022-10-27 16:35:52
