自定义 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屋!