时间戳

首页 > 解决方案 > 如何在地图上的google api中添加一个按钮

javascript - 如何在地图上的google api中添加一个按钮

问题描述

我想在谷歌地图上的某个位置添加一个按钮，例如纬度：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;
  }
<!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>

标签： javascripthtmlgoogle-mapsdom

解决方案

窗格上的元素overlayLayer不接收 DOM 事件（如click），而是将您的按钮附加到overlayMouseTarget窗格。

文档

overlayLayer
类型：元素
此窗格包含折线、多边形、地面叠加层和平铺层叠加层。它不接收 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>

推荐阅读