自定义 Google Map API V3 缩放按钮 [英] Custom Google Map API V3 Zoom Buttons

问题描述

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

How can I customize the google maps api (v3 javascript) zoom buttons to my own image.

推荐答案

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

I am late at the party, but here is my two cents.

你基本上有两个选择:

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

Option 1: You either create the controls using HTML/CSS yourself, which you can then place over the map to the correct position using position absolute or similar means. Even though this works in production, I don't like this, because your HTML/CSS for the element doesn't load at the same time than the map is displayed. Also you are separating your HTML/CSS code for the controls so it is harder to reuse the same map at different pages. e.g. "Did I forgot to add the controls?"

选项 2:您创建自定义控件 外观和感觉您喜欢的变焦控制器.下面是一段关于这方面的实践代码.

Option 2: You create a custom control which looks and feels the zoom controllers you like. Below is an code about this in practice.

简而言之，您需要首先通过调用禁用普通的 UI 控制器:

In short, you need to first disable the normal UI controllers by calling:

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

然后您只需创建控制器并使用它.

And then you just create the controller and use it.

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> 因为对身体其余部分的需求非常明显.

Note: This code doesn't contain any fancy icons and a like, just placeholders. Therefore, you might need to tune it to fit your needs. Moreover, remember to add HTML5 normal tags and script include for the google maps api v3 javascript. I added only <div id="map-canvas"></div> because a need for rest of the body is pretty obvious.

现场观看:这里是 jsfiddle 示例

To see it live: Here is working jsfiddle example

干杯.

这篇关于自定义 Google Map API V3 缩放按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！