Пользовательские элементы управления Google Maps v3 - взаимодействуйте с элементами управления вне карты - PullRequest
4 голосов
/ 27 августа 2011

Я использую пользовательский элемент управления Google Maps. Я хотел бы, чтобы текстовая ссылка вне карты (в другом месте на странице) взаимодействовала с элементом управления. По сути, я хочу иметь возможность вызвать щелчок на пользовательском элементе управления.

У кого-нибудь есть совет или помощь по поводу того, как этого можно достичь?

Это также относится к Использование пользовательского элемента управления с Google Maps KeyDragZoom - как активировать перетаскивание? , решил сделать вопрос более общим.

Ответы [ 4 ]

2 голосов
/ 31 августа 2011

Попробуйте напрямую выбрать его по источнику:

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

1 голос
/ 30 августа 2011

Если вы пытаетесь включить / выключить KeyDragZoom, когда нажимаете на ссылку за пределами карты, вы можете установить событие onclick для ссылки, чтобы запускать такую ​​функцию:

0 голосов
/ 09 мая 2019

Принятый ответ предполагает, что элемент управления масштабированием находится на карте. Если значение VisualEnabled равно false, изображение dragzoom_btn не будет существовать, равно как и кнопка Div _.

Пока официально не поддерживаются внешние элементы управления, этот хак работает:

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

При нажатии включается режим масштабирования. При повторном нажатии или рисовании прямоугольника режим масштабирования автоматически отключается.

0 голосов
/ 31 мая 2013

Мне удалось создать пользовательские кнопки увеличения и уменьшения за пределами карты:

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...