如何在谷歌地图 api v3 上添加切换按钮？答案

【问题标题】：How to add toggle button on google map api v3?如何在谷歌地图 api v3 上添加切换按钮？
【发布时间】：2011-08-23 13:50:43
【问题描述】：

我找到了库：geometrycontrols，它被写入 api v2 并允许添加按钮。如何制作切换按钮以在 api v3 中添加标记？我已经启动了地图等。

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案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

【讨论】：

当我将它与切换 jQuery 元素结合使用时，自定义控件在再次显示 jQuery/jqlite 元素后消失。只有当我缩放时才会再次出现。到目前为止没有工作。

【解决方案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 智能感知提醒您可能的职位）。

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

【讨论】：