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

How to add toggle button on google map api v3?

提问by luzny

I found library: geometrycontrolsthat is written to api v2 and allows adding buttons. How to make a toggle button to add a marker in the api v3? I have initiated map etc.

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

回答by Jiri Kriz

You can add an arbitrary structured <div>to the map:

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

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

You add a listener to this control or to its children, e.g.:

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

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

You position the control on the map:

您在地图上定位控件：

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

For details, see:

有关详细信息，请参阅：

Custom Controls

自定义控件

Example

例子

回答by Ronnie Royston

I don't think you need to add any listener to the map at all. Just add it to the HTML element(s) in your custom control.

我认为您根本不需要向地图添加任何侦听器。只需将其添加到自定义控件中的 HTML 元素即可。

You certainly want to add your custom logos and buttons and copyrights to Google Maps via custom controls. Otherwise, they will likely not render properly especially on mobile devices.

您当然希望通过自定义控件将自定义徽标、按钮和版权添加到 Google 地图。否则，它们可能无法正确呈现，尤其是在移动设备上。

I found the official Google Maps JavaScript API Custom Control exampleto be rather complicated and I can never remember the position options. So, I created a tiny 1.72 KB add-on JS on GitHublibrary called CONTROL-JS that enables you to simply create your custom content as a string, e.g., var html = "<h1>Hi</h1>"then pass it to an object called controlwhere every position is a method (IDE intellisense reminds you of the possible positions).

我发现官方的Google Maps JavaScript API 自定义控件示例相当复杂，我永远无法记住位置选项。因此，我在 GitHub库上创建了一个名为 CONTROL-JS的小型 1.72 KB 附加JS，它使您可以简单地将自定义内容创建为字符串，例如，var html = "<h1>Hi</h1>"然后将其传递给一个名为的对象control，其中每个位置都是一个方法（IDE 智能感知提醒您可能的位置）。

So, in your case, unsing CONTROL-JS just do

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