Question

我正在使用谷歌地图自定义控件。我想在地图之外（在页面上的另一个地方）的文本链接与控件进行交互。基本上我希望能够触发自定义控件的单击。

有没有人就如何实现这一目标提供建议或帮助？

这也与Using custom control with Google Maps KeyDragZoom - how to activate drag zoom?有关，决定提出一个更普遍的问题。

Answer 1

尝试按来源直接选择：

$('img[src=http://maps.gstatic.com/mapfiles/ftr/controls/dragzoom_btn.png]').click();

Answer 2

如果您在单击地图外部的链接时尝试打开/关闭KeyDragZoom，可以在链接上设置onclick事件以运行如下函数：

function toggleClickZoom() {
    var myKeyDragZoom = map.getDragZoomObject();
    myKeyDragZoom.buttonDiv_.onclick(document.createEvent('MouseEvent'));
}

Answer 3

我设法在地图外创建自定义放大和缩小按钮：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 60%; width:60%; margin:20px auto; border:1px solid; padding-left:100px; }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=ADD-YOUR-API-KEY-HERE&sensor=false&region=AU">
    </script>
    <script type="text/javascript">

function HomeControl(controlDiv, map) {

 google.maps.event.addDomListener(zoomout, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 0){
     map.setZoom(currentZoomLevel - 1);}

  });

   google.maps.event.addDomListener(zoomin, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 21){
     map.setZoom(currentZoomLevel + 1);}

  });

}
var map;

/**
 * The HomeControl adds a control to the map that simply
 * returns the user to Chicago. This constructor takes
 * the control DIV as an argument.
 * @constructor
 */

function initialize() {

  var mapDiv = document.getElementById('map-canvas');
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(-33.90224, 151.20215),
    panControl: false,
    zoomControl: false,
    streetViewControl: false,
    overviewMapControl: false,
     mapTypeControl: false,
     mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(mapDiv, mapOptions);

  // Create the DIV to hold the control and
  // call the HomeControl() constructor passing
  // in this DIV.
  var homeControlDiv = document.createElement('div');
  var homeControl = new HomeControl(homeControlDiv, map);

  homeControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(homeControlDiv);
}

google.maps.event.addDomListener(window, 'load', initialize);    
</script>

</head>
  <body>
    <div id="map-canvas"></div>
    <div id="zoomout" style="border:1px solid; width:150px; heoght:50px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div>
    <div id="zoomin" style="border:1px solid; width:150px; heoght:50px;cursor:pointer;">ZOOM ME IN</div>
  </body>
</html>

Answer 4

可接受的答案假定缩放控件在地图上。如果visualEnabled为false，则dragzoom_btn图像将不存在，buttonDiv_也将不存在。

在正式支持外部控件之前，此黑客似乎有效：

function onZoomClick() {
   var myKeyDragZoom = map.getDragZoomObject();
   myKeyDragZoom.hotKeyDown_ = !myKeyDragZoom.hotKeyDown_;
}

单击时，将打开缩放模式。再次单击或绘制矩形后，缩放模式将自动关闭。

Google Maps v3自定义控件 - 与地图外的控件进行交互

4 个答案: