将自定义控件添加到下拉列表中的Google地图

Question

我已阅读有关自定义地图控件的Google Maps V3 API文档.本文档介绍了如何创建一个简单的按钮.但是,我想要做的是创建我自己的下拉菜单作为自定义控件.我想使用此下拉菜单让用户选择一种语言,如法语或德语.

Google提供了一个内置的地图控件,称为MapType.此外,您可以使用内置样式google.maps.MapTypeControlStyle.DROPDOWN_MENU将此控件设置为下拉菜单.

因此,通过类比,我想创建一个名为MapLanguage的自定义控件,并让它使用下拉菜单,就好像我们可以访问google.maps.MapLanguageControlStyle.DROPDOWN_MENU之类的内容.如果有一种JQuery方法可以做到这一点,那就更好了,因为我已经在我的应用程序的其他地方使用了JQuery.

任何指向示例的指针都会很棒.

Answer 1

我需要同样的东西,这是一个基本的工作:

.container{
  width: 85px; 
  z-index: 1; 
  margin: 5px;
  cursor: pointer;
  text-align: left;
  z-index: 0;
}

.dropDownControl{
    direction: ltr; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    text-align: left; 
    position: relative; 
    font-family: Arial, sans-serif; 
    -webkit-user-select: none; 
    font-size: 13px; 
    padding-top: 1px; 
    padding-right: 6px; 
    padding-bottom: 1px; 
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    border-top-color: rgb(113, 123, 135); 
    border-right-color: rgb(113, 123, 135); 
    border-bottom-color: rgb(113, 123, 135); 
    border-left-color: rgb(113, 123, 135); 
    border-image: initial; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px; 
    box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px; 
    color: rgb(0, 0, 0); 
    padding-left: 6px; 
    font-weight: bold; 
    background-image: initial; 
    background-attachment: initial; 
    background-origin: initial; 
    background-clip: initial; 
    background-color: rgb(255, 255, 255); 
    background-position: initial initial; 
    background-repeat: initial initial;     
    z-index: 2;
}   

.dropDownArrow{
    -webkit-user-select: none; 
    border-width: 0px; 
    border-style: initial; 
    border-color: initial; 
    border-image: initial; 
    padding: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    position: absolute; 
    right: 6px; 
    top: 50%;
    margin-top: -2px; 
    width: 7px; 
    height: 4px; 
}

.dropDownOptionsDiv{
    background-color: white; 
    z-index: 0; 
    padding-top: 2px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    border-right-color: rgb(113, 123, 135); 
    border-bottom-color: rgb(113, 123, 135); 
    border-left-color: rgb(113, 123, 135); 
    border-image: initial; 
    border-top-width: 0px; 
    border-top-style: initial; 
    border-top-color: initial; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px; 
    box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px; 
    position: relative; 
    text-align: left; 
    display: none;
}

.dropDownItemDiv{
    font-family: Arial, sans-serif; 
    -webkit-user-select: none; 
    font-size: 13px; 
    padding-top: 2px; 
    padding-right: 5px; 
    padding-bottom: 3px; 
    padding-left: 5px; 
    background-color: rgb(255, 255, 255); 
    color: black;       
}
.dropDownItemDiv:hover, .checkboxContainer:hover{
    background-color: rgb(235, 235, 235);       

}
.dropDownControl:hover{
    background: -webkit-linear-gradient(top,rgb(255,255,255),rgb(230,230,230));
}
.separatorDiv{
    margin-top: 1px; 
    margin-right: 0px; 
    margin-bottom: 1px; 
    margin-left: 0px; 
    border-top-width: 1px; 
    border-top-style: solid; 
    border-top-color: rgb(235, 235, 235); 
}
.checkboxContainer{
    font-family: Arial, sans-serif; 
    -webkit-user-select: none; 
    font-size: 11px; 
    padding-top: 1px; 
    padding-bottom: 3px; 
    padding-left: 5px; 
    direction: ltr; 
    text-align: left; 
    background-color: rgb(255, 255, 255); 
    white-space: nowrap; 
    padding-right: 8px; 
    color: rgb(0, 0, 0); 
}       
.checkboxSpan{
    box-sizing: border-box; 
    position: relative; 
    line-height: 0; 
    font-size: 0px; 
    margin-top: 0px; 
    margin-right: 5px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    display: inline-block; 
    background-color: rgb(255, 255, 255); 
    border-width: 1px; 
    border-style: solid; 
    border-color: initial; 
    border-image: initial; 
    border-top-left-radius: 1px; 
    border-top-right-radius: 1px; 
    border-bottom-right-radius: 1px; 
    border-bottom-left-radius: 1px; 
    width: 13px; 
    height: 13px; 
    vertical-align: middle; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    border-color: rgb(198, 198, 198);       
}


.blankDiv{
    position: absolute; 
    left: 1px; 
    top: -2px; 
    width: 13px; 
    height: 11px; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    display: none; /*when = block -> this is the "check" symbol*/ 
}

.blankImg{
    position: absolute; 
    left: -52px; 
    top: -44px; 
    -webkit-user-select: none; 
    border-width: 0px; 
    border-style: initial; 
    border-color: initial; 
    border-image: initial; 
    padding: 0px; 
    margin: 0px; 
    -webkit-user-drag: none; 
    width: 68px; 
    height: 67px; 
}

.checkboxLabel{
    vertical-align: middle; 
    cursor: pointer;
}


<div class="container">
    <div class="dropDownControl" id="ddControl" title="A custom drop down select with mixed elements" onclick="(document.getElementById('myddOptsDiv').style.display == 'block') ? document.getElementById('myddOptsDiv').style.display = 'none' : document.getElementById('myddOptsDiv').style.display = 'block';"">
        My Box
        <img class="dropDownArrow" src="http://maps.gstatic.com/mapfiles/arrow-down.png"/>
    </div>
    <div class = "dropDownOptionsDiv" id="myddOptsDiv">
        <div class = "dropDownItemDiv" id="mapOpt"  title="This acts like a button or click event" onClick="alert('option1')">Option 1</div>
        <div class = "dropDownItemDiv" id="satelliteOpt" title="This acts like a button or click event" onClick="alert('option2')">Option 2</div>
        <div class="separatorDiv"></div>
        <div class="checkboxContainer" title="This allows for multiple selection/toggling on/off" onclick="(document.getElementById('terrainCheck').style.display == 'block') ? document.getElementById('terrainCheck').style.display = 'none' : document.getElementById('terrainCheck').style.display = 'block';">
        <span role="checkbox" class="checkboxSpan ">
            <div class="blankDiv" id="terrainCheck">
                <img class="blankImg" src="http://maps.gstatic.com/mapfiles/mv/imgs8.png" />
            </div>
        </span>             
        <label class="checkboxLabel">On/Off</label>             
    </div>          
    </div>
</div>

您还可以看到一个有效的例子

Answer 2

我没有示例，但似乎 google.maps 非常灵活，只要您对菜单进行编码，使其位于单个 div 中，您就可以将其推入地图控制数组，就像按下简单按钮一样。

K