如何在google map api v3上添加切换按钮？

Question

我找到了库：geometrycontrols写入到api v2并允许添加按钮。如何使一个切换按钮在api v3中添加标记？我已经开始地图等

Answer 1

您可以添加任意的结构化<div>到地图：

var control = document.createElement('div'); 

您一个侦听器添加到该控件或其子女，如：

google.maps.event.addDomListener(control, 'click', function() {...}); 

你将控件放置在地图上：

control.index = 1; 
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control); 

有关详细信息，请参阅：

Custom Controls

Example

Answer 2

我不认为你需要任何监听器添加到地图都没有。只需将它添加到您的自定义控件中的HTML元素。

你一定要通过自定义控制您的自定义图标和按钮和版权添加到谷歌地图。否则，他们可能无法在移动设备上正确渲染。

我发现官方Google Maps JavaScript API Custom Control example是相当复杂的，我永远记得的位置选项。所以，我创建了一个tiny 1.72 KB add-on JS on GitHub库调用CONTROL-JS，使您可以简单地创建自定义的内容作为一个字符串，如var html = "<h1>Hi</h1>"然后将它传递给一个对象调用control，每一个位置的方法（IDE的智能提醒你可能位置）。

所以，你的情况，unsing CONTROL-JS只是做

var html = '<p id="control-text"> Zoom </p>' 

//Global method that is fired when the API is loaded and ready 
function initMap() { 
    map = new google.maps.Map(document.getElementById("map"), mapOptions); 
    //intelleSense/Auto-complete works on IDE's 
    control.topCenter.add(html); 
}; 

/* 
 
control.js v0.1 - Add custom controls to Google Maps with ease 
 
Created by Ron Royston, www.rack.pub 
 
https://github.com/rhroyston/control 
 
License: MIT 
 
control.topCenter.add.(html) 
 
*/ 
 
var control=function(){function o(o){this.add=function(T){var t=document.createElement("div");if(t.innerHTML=T,o)switch(o){case"TOP_CENTER":map.controls[google.maps.ControlPosition.TOP_CENTER].push(t);break;case"TOP_LEFT":map.controls[google.maps.ControlPosition.TOP_LEFT].push(t);break;case"TOP_RIGHT":map.controls[google.maps.ControlPosition.TOP_RIGHT].push(t);break;case"LEFT_TOP":map.controls[google.maps.ControlPosition.LEFT_TOP].push(t);break;case"RIGHT_TOP":map.controls[google.maps.ControlPosition.RIGHT_TOP].push(t);break;case"LEFT_CENTER":map.controls[google.maps.ControlPosition.LEFT_CENTER].push(t);break;case"RIGHT_CENTER":map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(t);break;case"LEFT_BOTTOM":map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(t);break;case"RIGHT_BOTTOM":map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(t);break;case"BOTTOM_CENTER":map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(t);break;case"BOTTOM_LEFT":map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(t);break;case"BOTTOM_RIGHT":map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(t)}else console.log("err")}}var T={};return T.topCenter=new o("TOP_CENTER"),T.topLeft=new o("TOP_LEFT"),T.topRight=new o("TOP_RIGHT"),T.leftTop=new o("LEFT_TOP"),T.rightTop=new o("RIGHT_TOP"),T.leftCenter=new o("LEFT_CENTER"),T.rightCenter=new o("RIGHT_CENTER"),T.leftBottom=new o("LEFT_BOTTOM"),T.rightBottom=new o("RIGHT_BOTTOM"),T.bottomCenter=new o("BOTTOM_CENTER"),T.bottomLeft=new o("BOTTOM_LEFT"),T.bottomRight=new o("BOTTOM_RIGHT"),T}();