Google Map Custom InfoWindow's Tail不能移动，也不能移除下拉阴影
Google Map Custom InfoWindow's Tail Won't move and can't remove dropshadow
我已经创建了一个自定义的Google Maps InfoWindow。
我设法将其自定义为我需要的方式并重新定位主要元素，但我似乎无法移动尾巴或删除尾巴的投影。
我在这里错过了什么?
谢谢。
我的代码
jQuery(document).ready(function($){
<!-- BASIC MAP SETUP-->
//set your google maps parameters
var latitude = -26.121153,
longitude = 28.318868,
map_zoom = 15;
<!-- END BASIC MAP SETUP-->
<!-- CUSTOM MARKER -->
//google map custom marker icon - .png fallback for IE11
var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
var marker_url = ( is_internetExplorer11 ) ? 'img/cd-icon-location.png' : 'img/cd-icon-location.svg';
<!-- END CUSTOM MARKER -->
<!-- CUSTOM STYLING - COLOURS -->
//we define here the style of the map
var style= [
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36
},
{
"color": "#000000"
},
{
"lightness": 40
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
},
{
"weight": 1.2
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#2D2D2D"
},
{
"lightness": 0
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 21
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 29
},
{
"weight": 0.2
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 18
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 19
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
}
];
<!-- END CUSTOM STYLING - COLOURS -->
<!-- CONTROLS -->
//set google map options
var map_options = {
center: new google.maps.LatLng(latitude, longitude),
zoom: map_zoom,
panControl: false,
zoomControl: false,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP, //ROADMAP (normal, default 2D map), SATELLITE (photographic map), HYBRID (photographic map + roads and city names), TERRAIN (map with mountains, rivers, etc.) //
scrollwheel: false,
styles: style,
}
<!-- END CONTROLS -->
<!-- INITIALISE MAP -->
var map = new google.maps.Map(document.getElementById('google-container'), map_options);
//add a custom marker to the map
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-26.121153, 28.318868), //position: new google.maps.LatLng(-26.121153, 28.318868),//
map: map,
visible: true,
<!-- icon:'../img/3.png',LINK TO CUSTOM ICON IMAGE -->
title:'Click to zoom' <!-- CHANGE CURSOR HOVER TITLE BOX -->
<!--animation:google.maps.Animation.BOUNCE, REMOVE THIS LINE TO STOP MARKER ANIMATION, LAST LINE TO NEVER HAVE , -->
});
<!-- END INITIALISE MAP -->
<!-- CUSTOM CONTROLS -->
//add custom buttons for the zoom-in/zoom-out on the map
function CustomZoomControl(controlDiv, map) {
//grap the zoom elements from the DOM and insert them in the map
var controlUIzoomIn= document.getElementById('cd-zoom-in'),
controlUIzoomOut= document.getElementById('cd-zoom-out');
controlDiv.appendChild(controlUIzoomIn);
controlDiv.appendChild(controlUIzoomOut);
// Setup the click event listeners and zoom-in or out according to the clicked element
google.maps.event.addDomListener(controlUIzoomIn, 'click', function() {
map.setZoom(map.getZoom()+1)
});
google.maps.event.addDomListener(controlUIzoomOut, 'click', function() {
map.setZoom(map.getZoom()-1)
});
}
<!-- END CUSTOM CONTROLS -->
<!-- ZOOM -->
var zoomControlDiv = document.createElement('div');
var zoomControl = new CustomZoomControl(zoomControlDiv, map);
//insert the zoom div on the top left of the map
map.controls[google.maps.ControlPosition.LEFT_TOP].push(zoomControlDiv);
<!-- END ZOOM -->
<!-- INFO WINDOW -->
var infowindow = new google.maps.InfoWindow({
content:"TST"
});
// InfoWindow content
var content = '<div id="iw-container">' +
'<div class="iw-content">' +
'<div class="iw-title">Contacts</div>' +
'<span class="iw-sub-title">-26.121153, 28.318868</span>'+
'</div>' +
'</div>';
// A new Info Window is created and set content
var infowindow = new google.maps.InfoWindow({
content: content,
// Assign a maximum value for the width of the infowindow allows
// greater control over the various content elements
maxWidth: 350
});
// This event expects a click on a marker
// When this event is fired the Info Window is opened.
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
// Event that closes the Info Window with a click on the map
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// *
// START INFOWINDOW CUSTOMIZE.
// The google.maps.event.addListener() event expects
// the creation of the infowindow HTML structure 'domready'
// and before the opening of the infowindow, defined styles are applied.
// *
google.maps.event.addListener(infowindow, 'domready', function() {
// Reference to the DIV that wraps the bottom of infowindow
var iwOuter = $('.gm-style-iw');
/* Since this div is in a position prior to .gm-div style-iw.
* We use jQuery and create a iwBackground variable,
* and took advantage of the existing reference .gm-style-iw for the previous div with .prev().
*/
var iwBackground = iwOuter.prev();
// Removes background shadow DIV
iwBackground.children(':nth-child(2)').css({'display' : 'none'});
// Removes white background DIV
iwBackground.children(':nth-child(4)').css({'display' : 'none'});
// Removes Tail Shadow
iwBackground.children(':nth-child(1)').css({'display' : 'none'});
// Moves the infowindow 115px to the right.
iwOuter.parent().parent().css({left: '115px'});
// Moves the shadow of the arrow 76px to the left margin.
iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: -115px !important'});
// Moves the arrow 76px to the left margin.
iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: !important'});
// Changes the desired tail shadow color.
iwBackground.children(':nth-child(3)').find('div').children().css({opacity: '1', 'background-color': 'rgba(60, 60, 60, 0.75)', 'z-index' : '1', 'left': '-55px !important'});
// Reference to the div that groups the close button elements.
var iwCloseBtn = iwOuter.next();
// Apply the desired effect to the close button
iwCloseBtn.css({opacity: '1', right: '110px', top: '14px', border: '5px solid #FFF'});
infowindow.open(map,marker); <!-- AUTOMATICALLY KEEPS INFO WINDOW OPEN UPON LOAD, REMOVE THIS LINE TO INITIATE OPEN INFO WINDOW ON CLICK-->
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
<!-- END INFO WINDOW -->
});
});
});/* ==================================================
Google Map
================================================== */
#google-container {
position: relative;
width: 100%;
height: 400px;
background-color: #E19A28;
}
#cd-google-map {
height: 370px;
position: relative;
}
#cd-zoom-in, #cd-zoom-out {
height: 32px;
width: 32px;
cursor: pointer;
margin-left: 50px;
background-color: rgba(225, 154, 40, 0.75);
background-repeat: no-repeat;
background-size: 32px 64px;
background-image: url("../img/cd-icon-controller.svg");
}
.no-touch #cd-zoom-in:hover, .no-touch #cd-zoom-out:hover {
background-color: #E19A28;
}
#cd-zoom-in {
background-position: 50% 0;
margin-top: 50px;
margin-bottom: 1px;
}
#cd-zoom-out {
background-position: 50% -32px;
}
/* ==================================================
Custom Google Map Info Window
================================================== */
.gm-style-iw {
height: 77px !important;
left: -95px !important;
top: 14px !important;
width: 167px !important;
background-color: rgba(65, 65, 65, 0.8);
}
#iw-container {
margin-bottom: 10px;
}
#iw-container .iw-content {
font-size: 13px;
line-height: 18px;
font-weight: 300;
margin-right: 1px;
padding: 15px 5px 20px 15px;
max-height: 140px;
overflow-y: auto;
overflow-x: hidden;
font-family: 'Lato', sans-serif !important;
}
.iw-title {
color: #FFF;
font-size: 16px;
font-weight: 300;
padding: 0 0 10px;
text-transform: uppercase;
}
.iw-sub-title {
color: #E19A28;
}
.iw-tail {
background-color: #999;
width: 4px;
height: 17px;
}<!-- Google Map -->
<div id="cd-google-map">
<div id="google-container"></div>
<div id="cd-zoom-in"></div>
<div id="cd-zoom-out"></div>
</div>
<!-- End Google Map -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- jQuery Core -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBp9-xuZm7kjfuskVqdCDHn0YeVzZOoC7c"></script> <!-- jQuery Core -->问题就在这里:
iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: -115px !important'});
应修改left: -115px。试着修改它，直到你把它放在左边。
相关文章：
- DOM范围克隆也不能免受DOM更改的影响
- 嵌入式谷歌地图仅在IE上加载，但既不能在Mozilla Firefox上加载，也不能在Google Chrome上加载
- RubyonRails应用程序不能包含样式表也不能包含js
- 拖放元素可以移动 x 但不能移动 y
- Jquery-Mobile:Changepage不起作用，如果我指定了pageid，我也不能将数据传递到另一个页面
- 既不能使用JavaScript也不能使用jQuery设置隐藏表单字段
- 即使链接了最新的Jquery库，Jquery也不能在页面上工作
- 即使导入了Jquery函数，也不能定义它
- 我不能直接访问对象中的字段，也不能使用getter函数访问
- 不能移动DOM元素到其他位置
- 即使在关闭后也不能从引导模式中清除错误消息
- 不能使用jquery禁用锚标签.没有"disabled&;也不能在ajax调用()期间使用e.p preven
- 谷歌地图不能点击，也不能在Magento主页上平移
- Ng-if和ng-class-even/odd不能很好地一起工作，也不能得到期望的结果
- 即使加载了UJS, Rails DELETE调用也不能工作
- 即使添加了很多延迟，Focus在IE中也不能工作
- 即使部署到服务器上，AngularJS应用程序也不能读取本地文本文件
- Javascript在chrome中工作，但即使在安全模式下也不能在Firefox中工作
- jQuery在firefox上不能很好地工作，在Safari上也不能工作
- Google Map Custom InfoWindow's Tail不能移动，也不能移除下拉阴影
