当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - google maps marker strangely stretched issue

问题描述:

I am experiencing a strange behavior of google maps (see attached image) does anyone know how that could come? Has anyone experienced that before?

code below

<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>

网友答案:

I've seen various forms of stretched tiles and distorted controls, but this is the first time I see stretched markers and shadows. If we're lucky, adding these lines to your CSS or styles will unstretch the map and markers.

 #map_geolocation label { width: auto; display:inline; }
 #map_geolocation img { max-height: none; max-width: none; }

I tried your attached code and it looks OK the way it is.

网友答案:

Are you using twitter bootstrap? If so, try to add the following stylesheet.

div#map_geolocation img {
  max-width:none;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: