javascript - 向 Google Maps API 添加北/南/东/西控件

Question

我正在尝试将北/南/东/西控件添加到我网站上的谷歌地图 API。

它们应该如下所示:

目前我的 map JS 代码如下所示:

function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
    zoom: 12,
    center: {lat: 52.237442, lng: 21.003692},
    mapTypeControl: false,
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_CENTER
    },
    scaleControl: false,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.RIGHT_BOTTOM
    }
};

var map = new google.maps.Map(mapCanvas, mapOptions);

var locations = [
    ['palace', 52.231871, 21.005841],
    ['arkadia', 52.257305, 20.984481],
    ['stadium', 52.215147, 21.035074]
];

var marker, i;
var infowindow = new google.maps.InfoWindow();


for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
            map.setZoom(14);
            map.setCenter(marker.getPosition());
        }
    })(marker, i));
}}google.maps.event.addDomListener(window, 'load', initialize);

我尝试使用本教程:http://www.daveoncode.com/2008/11/17/playing-with-google-maps-api-part-two-create-custom-controls/

但它似乎太旧了(无法识别“GControl”对象)。无论如何，我不确定我是否尝试以一种好的方式应用它。

Answer 1

使用 Custom Controls Example 中的代码在 the documentation

这会将四个控件放在 map 上:

• N @TOP_CENTER
• W @LEFT_CENTER
• @RIGHT_CENTER
• S @BOTTOM_CENTER

然后为其添加点击监听器，并通过向指定方向移动 map 跨度的 1/2 来处理点击事件。

代码片段:

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    zoom: 12,
    center: {
      lat: 52.237442,
      lng: 21.003692
    },
    mapTypeControl: false,
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.RIGHT_BOTTOM
    },
    scaleControl: false,
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.RIGHT_BOTTOM
    }
  };

  var map = new google.maps.Map(mapCanvas, mapOptions);

  var locations = [
    ['palace', 52.231871, 21.005841],
    ['arkadia', 52.257305, 20.984481],
    ['stadium', 52.215147, 21.035074]
  ];

  var marker, i;
  var infowindow = new google.maps.InfoWindow();


  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
        map.setZoom(14);
        map.setCenter(marker.getPosition());
      }
    })(marker, i));
  }

  var controlText = [
    ['N', google.maps.ControlPosition.TOP_CENTER],
    ['W', google.maps.ControlPosition.LEFT_CENTER],
    ['E', google.maps.ControlPosition.RIGHT_CENTER],
    ['S', google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  for (var i = 0; i < controlText.length; i++) {
    var divLabel = controlText[i][0];
    var divName = document.createElement('div');
    var newDiv = new MakeControl(divName, divLabel, map);
    map.controls[controlText[i][1]].push(divName);
    google.maps.event.addDomListener(divName, 'click', function() {
      alert(controlText[i][0]);
    });
  }

}
google.maps.event.addDomListener(window, 'load', initialize);
/**
 * Creates a series of custom controls to demonstrate positioning
 * of controls within a map.
 */

/**
 * MakeControl adds a control to the map.
 * This constructor takes the controlDIV name and label text as arguments.
 * @constructor
 * @param {!Element} controlDiv  The name of the DIV element for the control.
 * @param {string} label  Text to display within the DIV element.
 */
function MakeControl(controlDiv, label, map) {

  // Set up the control border.
  var controlUI = document.createElement('div');
  controlUI.title = label;
  controlUI.className = 'controlUI';
  controlUI.style.cursor = 'pointer';
  controlDiv.appendChild(controlUI);

  // Set up the inner control.
  var controlText = document.createElement('div');
  controlText.innerHTML = label;
  controlText.className = 'controlText';
  controlUI.appendChild(controlText);
  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    var bounds = map.getBounds();
    var span = bounds.toSpan();
    switch (label) {
      case "N":
        map.setCenter(new google.maps.LatLng(map.getCenter().lat() + span.lat() / 2, map.getCenter().lng()));
        break;
      case "S":
        map.setCenter(new google.maps.LatLng(map.getCenter().lat() - span.lat() / 2, map.getCenter().lng()));
        break;
      case "E":
        map.setCenter(new google.maps.LatLng(map.getCenter().lat(), map.getCenter().lng() + span.lng() / 2));
        break;
      case "W":
        map.setCenter(new google.maps.LatLng(map.getCenter().lat(), map.getCenter().lng() - span.lng() / 2));
        break;
    }
  });
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
.controlUI {
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  margin-bottom: 22px;
  text-align: center;
}
.controlText {
  color: rgb(25, 25, 25);
  font-family: Roboto, Arial, sans-serif;
  font-size: 12px;
  line-height: 18px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>