我正在经历谷歌地图的奇怪行为(见附图)有谁知道这可能会如何?以前有没有人经历过这个?
代码
<script>
<!--
var map_geolocation;
function savePosition_geolocation(point)
{
var input = document.getElementById("id_geolocation");
input.value = point.lat().toFixed(6) + "," + point.lng().toFixed(6);
map_geolocation.panTo(point);
}
function load_geolocation() {
var point = new google.maps.LatLng(50.728632, 9.111587);
var options = {
zoom: 13,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
// mapTypeControl: true,
// navigationControl: true
};
map_geolocation = new google.maps.Map(document.getElementById("map_geolocation"), options);
var marker = new google.maps.Marker({
map: map_geolocation,
position: new google.maps.LatLng(50.728632, 9.111587),
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function(mouseEvent) {
savePosition_geolocation(mouseEvent.latLng);
});
google.maps.event.addListener(map_geolocation, 'click', function(mouseEvent){
marker.setPosition(mouseEvent.latLng);
savePosition_geolocation(mouseEvent.latLng);
});
}
$(function() {
load_geolocation();
});
//-->
</script>
<input type="hidden" name="geolocation" value="50.728632,9.111587" id="id_geolocation" /><div id="map_geolocation" style="width: 400px; height: 300px"></div>
答案 0 :(得分:15)
我见过各种形式的拉伸瓷砖和扭曲的控件,但这是我第一次看到拉伸的标记和阴影。如果我们很幸运,将这些行添加到CSS或样式中将会拉伸地图和标记。
#map_geolocation label { width: auto; display:inline; }
#map_geolocation img { max-height: none; max-width: none; }
我尝试了你附加的代码,它看起来很好。
答案 1 :(得分:9)
您使用的是Twitter bootstrap吗? 如果是这样,请尝试添加以下样式表。
div#map_geolocation img {
max-width:none;
}
答案 2 :(得分:0)
对于那些在 Google Maps JavaScript API 的较新版本(v3.33 +)2018-2019中遇到此问题的人。我建议检查这篇文章: https://stackoverflow.com/a/54140395/8658147。