如何在地图上添加谷歌 API 中的按钮

我想在谷歌地图上添加一个按钮，在某个位置，例如纬度：62.323907和经度：-150.109291。我可以添加按钮，但无法单击它。有没有办法在地图上添加可以单击的按钮？

在 CustomImageOverlay.prototype.onAdd(( 中，我在这里创建div，在这里创建按钮。我为div 和按钮提供了 style.cursor = "指针"。但是，该按钮会在地图上显示正确的位置，但无法单击。光标也保持为可拖动的光标，它只允许我拖动而不单击。

这是我的代码：

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>

overlayLayer窗格中的元素不接收 DOM 事件(如click(，而是将按钮追加到overlayMouseTarget窗格。

文档

叠加图层

类型：元素
此窗格包含折线、面、地面叠加和切片图层叠加。它不接收 DOM 事件。(窗格 1(。

改变：

panes.overlayLayer.appendChild(div);

自：

panes.overlayMouseTarget.appendChild(div);

代码片段：

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>

相关内容

最新更新

热门标签：