Как добавить кнопку переключения на карте Google 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);  

Подробнее см .:

Пользовательские элементы управления

Пример

Answer 2

Не думаю, что вам вообще нужно добавлять какого-либо слушателя на карту.Просто добавьте его к элементам HTML в вашем пользовательском элементе управления.

Вы, безусловно, хотите добавить свои собственные логотипы и кнопки и авторские права в Карты Google с помощью пользовательских элементов управления.В противном случае они, скорее всего, не будут отображаться должным образом, особенно на мобильных устройствах.

Официальный пример пользовательского элемента управления JavaScript API Карт Google для оказался довольно сложным, и я никогда не смогу вспомнить параметры положения.Итак, я создал JS-дополнение крошечный 1,72 КБ для библиотеки GitHub под названием CONTROL-JS, которое позволяет вам просто создавать свой пользовательский контент в виде строки, например, 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);
};

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