如何在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地图。否则，它们可能无法正常呈现，特别是在移动设备上。

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

所以，在你的情况下，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);
};

＆＃13;

＆＃13;

/*
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}();

＆＃13;

＆＃13;

＆＃13;