谷歌地图获得抵消

时间:2012-09-05 13:51:58

标签: html jquery-ui google-maps google-maps-api-3

嘿大家都曾经尝试过类似事件 它位于一个jquery标签系统中,它可以单独使用,也可以在网站上的任何其他位置使用,但是当它位于标签内时,它会以某种奇怪的方式获得这种偏移!

如果您尝试过或有解决方案,请发布

Google maps offset

<% if (RentalCaseMap.Any()) { %>
<div id="Kort" class="tab-content">
   <div id="rental_map_canvas" style="width:656px; height:270px"></div>
   <script type="text/javascript" src="/scripts/rentalmap.js"></script>
</div>
<% } %>
....

<input type="hidden" id="HiddenGeoLat" value="<%=CurrentContent.GeoLat %>" />
<input type="hidden" id="HiddenGeoLng" value="<%=CurrentContent.GeoLng %>" />

然后脚本文件

$(window).load(function () {
initialize();
});
function initialize() {
    var jeudanStyles = [{ featureType: "all", elementType: "all", stylers: [{ saturation: -99}]}];

var jeudanMapType = new google.maps.StyledMapType(jeudanStyles,
        { name: "Jeudan" });

var myOptions = {
    zoom: 16,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.BOTTOM_CENTER
    },
    panControl: true,
    panControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: false,
    scaleControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_CENTER
    },
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_CENTER
    }
};
if (document.getElementById("rental_map_canvas") != null) {
    var map = new google.maps.Map(document.getElementById("rental_map_canvas"), myOptions);

    map.mapTypes.set('jeudan_map', jeudanMapType);
    map.setMapTypeId('jeudan_map');

    var locations = [
                { lat: 55.680884, lng: 12.581577, content: '<div class="jeudanparkering">Addresse: Gammel M&oslash;nt 1 - 3<br />Mandag - l&oslash;rdag 06.30-21.00.<br /><a href="../priser-og-aabningstider/">Mere info...</a></div>' }
            ];
    var marker, i;

    var image = new google.maps.MarkerImage('/images/maps-logo-small.png', new google.maps.Size(35, 40), new google.maps.Point(0, 0), new google.maps.Point(35, 40));
    var shadow = new google.maps.MarkerImage('/images/maps-logo-shadow-small.png', new google.maps.Size(74, 37), new google.maps.Point(0, 0), new google.maps.Point(34, 37));
    var shape = {
        coord: [1, 1, 1, 40, 35, 40, 35, 1],
        type: 'poly'
    };

    var infowindow = new google.maps.InfoWindow();

    for (i = 0; i < locations.length; i++) {

        marker = new google.maps.Marker({
            position: new google.maps.LatLng($("#HiddenGeoLat").val(), $("#HiddenGeoLng").val()), /*new google.maps.LatLng(locations[i].lat, locations[i].lng),*/
            map: map,
            shadow: shadow,
            icon: image,
            animation: google.maps.Animation.DROP,
            shape: shape
        });

        marker.content = locations[i].content;

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(this.content);
            infowindow.open(map, this);
        });
        map.setCenter(marker.position);
    }
};
}

2 个答案:

答案 0 :(得分:1)

您需要致电google.maps.event.trigger(map, 'resize');

答案 1 :(得分:0)

$("#liKort").click(function () {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(marker.position);
    });