自定义Google地图API V3缩放按钮 [英] Custom Google Map API V3 Zoom Buttons
问题描述
我如何自定义Google Maps api（v3 javascript）缩放按钮到我自己的图片。
我迟到了在派对上，但这里是我的两分钱。
您基本上有两种选择：
选项1：您可以自己创建使用HTML / CSS的控件，然后您可以使用绝对位置或类似方法将地图放置在正确的位置。尽管这在制作中有效，但我不喜欢这样做，因为元素的HTML / CSS不会在显示地图的同时加载。此外，您正在为控件分隔您的HTML / CSS代码，以便在不同的页面重复使用相同的地图更加困难。例如我忘了添加控件了吗？
选项2：您创建 自定义控件 ，它看起来和感觉您喜欢的缩放控制器。下面是一个关于这个实践的代码。
总之，您需要先调用以下命令禁用正常的UI控制器：
var mapOptions = {
zoom：12，
center：chicago，
/ *禁用默认UI小部件* /
disableDefaultUI ：true //< - see this line
}
然后您只需创建控制器并使用它。
HTML： $ b
.. 。
< 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）;
$ b $ / **
* ZoomControl为地图添加+/-按钮
*
* /
函数ZoomControl（controlDiv，map）{
//创建div&自定义缩放控件的样式
controlDiv.style.padding ='5px';
//为控件包装器设置CSS
var controlWrapper = document.createElement（'div'）;
controlWrapper.style.backgroundColor ='white';
controlWrapper.style.borderStyle ='solid';
controlWrapper.style.borderColor ='gray';
controlWrapper.style.borderWidth ='1px';
controlWrapper.style.cursor ='指针';
controlWrapper.style.textAlign ='center';
controlWrapper.style.width ='32px';
controlWrapper.style.height ='64px';
controlDiv.appendChild（controlWrapper）;
//为zoomIn设置CSS
var zoomInButton = document.createElement（'div'）;
zoomInButton.style.width ='32px';
zoomInButton.style.height ='32px';
/ *将其更改为您要使用的.png图片* /
zoomInButton.style.backgroundImage ='url（http://placehold.it/32/00ff00）';
controlWrapper.appendChild（zoomInButton）;
//为zoomOut设置CSS b $ b var zoomOutButton = document.createElement（'div'）;
zoomOutButton.style.width ='32px';
zoomOutButton.style.height ='32px';
/ *将其更改为您要使用的.png图片* /
zoomOutButton.style.backgroundImage ='url（http://placehold.it/32/0000ff）';
controlWrapper.appendChild（zoomOutButton）;
//设置click事件侦听器 - zoomIn
google.maps.event.addDomListener（zoomInButton，'click'，function（）{
map.setZoom（map.getZoom （）+ 1）;
}）;
//设置点击事件监听器 - zoomOut
google.maps.event.addDomListener（zoomOutButton，'click'，function（）{
map.setZoom（map.getZoom （） - 1）;
}）;
$ b函数initialize（）{
var mapDiv = document.getElementById（'map-canvas'）;
var mapOptions = {
zoom：12，
center：chicago，
/ *禁用默认UI小部件* /
disableDefaultUI：true
}
map = new google.maps.Map（mapDiv，mapOptions）;
//创建DIV来保存控件并调用ZoomControl（）构造函数
//传入此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（）;
注意：此代码不包含任何花哨的图标等，只是占位符。因此，您可能需要调整以适应您的需求。此外，请记住添加HTML5标准标签和脚本包括谷歌地图api v3的JavaScript。我只添加了< div id =map-canvas>< / div> ，因为对身体其余部分的需求非常明显。 b
$ b
现场观看： 这里是jsfiddle例子
干杯。
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.
You have basically two options:
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?"
Option 2: You create a custom control which looks and feels the zoom controllers you like. Below is an code about this in practice.
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();
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.
To see it live: Here is working jsfiddle example
Cheers.
这篇关于自定义Google地图API V3缩放按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
