以下是我的代码我试图根据内容将标记高度设置为自动标记。有没有办法可以在没有黑客的情况下实现它？
function initialize() {
//replace this variable with the json you generate in the google maps api wizard tool
//Styles Start
var styles = [ { "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [ { "color": "#444444" } ] }, { "featureType": "landscape", "elementType": "all", "stylers": [ { "color": "#f2f2f2" } ] }, { "featureType": "poi", "elementType": "all", "stylers": [ { "visibility": "on" } ] }, { "featureType": "poi", "elementType": "geometry.fill", "stylers": [ { "saturation": "-100" }, { "lightness": "57" } ] }, { "featureType": "poi", "elementType": "geometry.stroke", "stylers": [ { "lightness": "1" } ] }, { "featureType": "poi", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road", "elementType": "all", "stylers": [ { "saturation": -100 }, { "lightness": 45 } ] }, { "featureType": "road.highway", "elementType": "all", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit.station.bus", "elementType": "all", "stylers": [ { "visibility": "on" } ] }, { "featureType": "transit.station.bus", "elementType": "labels.text.fill", "stylers": [ { "saturation": "0" }, { "lightness": "0" }, { "gamma": "1.00" }, { "weight": "1" } ] }, { "featureType": "transit.station.bus", "elementType": "labels.icon", "stylers": [ { "saturation": "-100" }, { "weight": "1" }, { "lightness": "0" } ] }, { "featureType": "transit.station.rail", "elementType": "all", "stylers": [ { "visibility": "on" } ] }, { "featureType": "transit.station.rail", "elementType": "labels.text.fill", "stylers": [ { "gamma": "1" }, { "lightness": "40" } ] }, { "featureType": "transit.station.rail", "elementType": "labels.icon", "stylers": [ { "saturation": "-100" }, { "lightness": "30" } ] }, { "featureType": "water", "elementType": "all", "stylers": [ { "color": "#d2d2d2" }, { "visibility": "on" } ] } ];
//Styles End
//Create a styled map using the above styles
var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
var mapProp = {
center:new google.maps.LatLng(52.922592, -1.474605),//set the centre of the map. In my case it is the same as the position of the map pin.
zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
//Set the map to use the styled map
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var contentString = '<div id="google-popup">'+
'<p>Styled egege eg hrh rh jhh 454h 54h54h54dwwfwf fwwfe gh34h54 j54 j56j65jtj 45jh54j45j 54jh 5j54j54j54j5 eg egeg 54j54j45j54<a target="_blank" href="#">codeshare.co.uk</a><br /></p>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
//Create a marker pin to add to the map
var marker;
marker = new google.maps.Marker({
position: new google.maps.LatLng(52.922592, -1.474605),//set the position of the pin
map: map,
title: "Derby",
icon: "http://www.codeshare.co.uk/images/blue-pin.png", //if you comment this out or delete it you will get the default pin icon.
animation:google.maps.Animation.DROP
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize); #googleMap { width: 100%; height: 400px; top: 0; left: 0; right: 0; bottom: 0; }
/*style the box*/
.gm-style .gm-style-iw {
background-color: #687e9c !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height:100% !important;
display: block !important;
}
/*style the p tag*/
.gm-style .gm-style-iw #google-popup p{
padding: 10px;
}
/*style the arrow*/
.gm-style div div div div div div div div {
background-color: #687e9c !important;
padding: 0;
margin: 0;
padding: 0;
top: 0;
color: #fff;
font-size: 16px;
}
/*style the link*/
.gm-style div div div div div div div div a {
color: #687e9c;
font-weight: bold;
}<div id="googleMap"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.20&sensor=false"></script>
答案 0 :(得分：0)
从下面的类中删除高度height:100% !important;，以便它可以正常工作。弹出窗口的高度将根据弹出窗口的内容而增加。
.gm-style .gm-style-iw {
background-color: #687e9c !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
# Comment or remove the below height
#height:100% !important;
display: block !important;
}
function initialize() {
//replace this variable with the json you generate in the google maps api wizard tool
//Styles Start
var styles = [ { "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [ { "color": "#444444" } ] }, { "featureType": "landscape", "elementType": "all", "stylers": [ { "color": "#f2f2f2" } ] }, { "featureType": "poi", "elementType": "all", "stylers": [ { "visibility": "on" } ] }, { "featureType": "poi", "elementType": "geometry.fill", "stylers": [ { "saturation": "-100" }, { "lightness": "57" } ] }, { "featureType": "poi", "elementType": "geometry.stroke", "stylers": [ { "lightness": "1" } ] }, { "featureType": "poi", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road", "elementType": "all", "stylers": [ { "saturation": -100 }, { "lightness": 45 } ] }, { "featureType": "road.highway", "elementType": "all", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit.station.bus", "elementType": "all", "stylers": [ { "visibility": "on" } ] }, { "featureType": "transit.station.bus", "elementType": "labels.text.fill", "stylers": [ { "saturation": "0" }, { "lightness": "0" }, { "gamma": "1.00" }, { "weight": "1" } ] }, { "featureType": "transit.station.bus", "elementType": "labels.icon", "stylers": [ { "saturation": "-100" }, { "weight": "1" }, { "lightness": "0" } ] }, { "featureType": "transit.station.rail", "elementType": "all", "stylers": [ { "visibility": "on" } ] }, { "featureType": "transit.station.rail", "elementType": "labels.text.fill", "stylers": [ { "gamma": "1" }, { "lightness": "40" } ] }, { "featureType": "transit.station.rail", "elementType": "labels.icon", "stylers": [ { "saturation": "-100" }, { "lightness": "30" } ] }, { "featureType": "water", "elementType": "all", "stylers": [ { "color": "#d2d2d2" }, { "visibility": "on" } ] } ];
//Styles End
//Create a styled map using the above styles
var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
var mapProp = {
center:new google.maps.LatLng(52.922592, -1.474605),//set the centre of the map. In my case it is the same as the position of the map pin.
zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
//Set the map to use the styled map
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var contentString = '<div id="google-popup">'+
'<p>Styled egege eg hrsd csc scs cscscdsc sc s cscscscsd c cs cscs cscs c scsdddddddsdc sd csdfr ferfwef efewf hkikuilllih rh jhh 454h 54h54h54dwwfwf fwwfe gh34h54 j54 j56j65jtj 45jh54j45j 54jh 5j54j54j54j5 eg egeg 54j54j45j54<a target="_blank" href="#">codeshare.co.uk</a><br /></p>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
//Create a marker pin to add to the map
var marker;
marker = new google.maps.Marker({
position: new google.maps.LatLng(52.922592, -1.474605),//set the position of the pin
map: map,
title: "Derby",
icon: "http://www.codeshare.co.uk/images/blue-pin.png", //if you comment this out or delete it you will get the default pin icon.
animation:google.maps.Animation.DROP
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize); #googleMap { width: 100%; height: 400px; top: 0; left: 0; right: 0; bottom: 0; }
/*style the box*/
.gm-style .gm-style-iw {
background-color: #687e9c !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
#height:auto !important;
display: block !important;
}
/*style the p tag*/
.gm-style .gm-style-iw #google-popup p{
padding: 10px;
}
/*style the arrow*/
.gm-style div div div div div div div div {
background-color: #687e9c !important;
padding: 0;
margin: 0;
padding: 0;
top: 0;
color: #fff;
font-size: 16px;
}
/*style the link*/
.gm-style div div div div div div div div a {
color: #687e9c;
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.20&sensor=false"></script>
<div id="googleMap"></div>