如何将 google maps api (v3 javascript) 缩放按钮自定义为我自己的图像。

最佳答案

我在聚会上迟到了，但这是我的两分钱。

你基本上有两个选择:

选项 1:您可以自己使用 HTML/CSS 创建控件，然后可以使用绝对位置或类似方法将其放置在 map 上的正确位置。尽管这在生产中有效，但我不喜欢这样，因为元素的 HTML/CSS 不会在显示 map 的同时加载。此外，您正在为控件分离 HTML/CSS 代码，因此更难在不同页面重用相同的 map 。例如“我是不是忘记添加控件了？”

选项 2: 您创建 a custom control 外观和感觉您喜欢的变焦 Controller 。下面是关于这个的实践代码。

简而言之，您需要先通过调用禁用普通的 UI Controller :

var mapOptions = {
    zoom: 12,
    center: chicago,
    /* Disabling default UI widgets */
    disableDefaultUI: true // <-- see this line
}

然后您只需创建 Controller 并使用它。

HTML:

... 
<div id="map-canvas"></div>
...

CSS:

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

JavaScript:

var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

/**
 * The ZoomControl adds +/- button for the map
 *
 */
function ZoomControl(controlDiv, map) {

  // Creating divs & styles for custom zoom control
  controlDiv.style.padding = '5px';

  // Set CSS for the control wrapper
  var controlWrapper = document.createElement('div');
  controlWrapper.style.backgroundColor = 'white';
  controlWrapper.style.borderStyle = 'solid';
  controlWrapper.style.borderColor = 'gray';
  controlWrapper.style.borderWidth = '1px';
  controlWrapper.style.cursor = 'pointer';
  controlWrapper.style.textAlign = 'center';
  controlWrapper.style.width = '32px'; 
  controlWrapper.style.height = '64px';
  controlDiv.appendChild(controlWrapper);

  // Set CSS for the zoomIn
  var zoomInButton = document.createElement('div');
  zoomInButton.style.width = '32px'; 
  zoomInButton.style.height = '32px';
  /* Change this to be the .png image you want to use */
  zoomInButton.style.backgroundImage = 'url("http://placehold.it/32/00ff00")';
  controlWrapper.appendChild(zoomInButton);

  // Set CSS for the zoomOut
  var zoomOutButton = document.createElement('div');
  zoomOutButton.style.width = '32px'; 
  zoomOutButton.style.height = '32px';
  /* Change this to be the .png image you want to use */
  zoomOutButton.style.backgroundImage = 'url("http://placehold.it/32/0000ff")';
  controlWrapper.appendChild(zoomOutButton);

  // Setup the click event listener - zoomIn
  google.maps.event.addDomListener(zoomInButton, 'click', function() {
    map.setZoom(map.getZoom() + 1);
  });

  // Setup the click event listener - zoomOut
  google.maps.event.addDomListener(zoomOutButton, 'click', function() {
    map.setZoom(map.getZoom() - 1);
  });  

}

function initialize() {
  var mapDiv = document.getElementById('map-canvas');

  var mapOptions = {
    zoom: 12,
    center: chicago,
    /* Disabling default UI widgets */
    disableDefaultUI: true
  }

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

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

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

initialize();

注意:此代码不包含任何花哨的图标等，仅包含占位符。因此，您可能需要调整它以满足您的需要。此外，请记住为 google maps api v3 javascript 添加 HTML5 普通标签和脚本包含。我只添加了 <div id="map-canvas"></div>因为对 body 休息的需求是显而易见的。

现场观看: Here is working jsfiddle example

干杯。

关于javascript - 自定义 Google Map API V3 缩放按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7916555/