【问题标题】:Googlemaps getting offset谷歌地图得到抵消
【发布时间】:2012-09-05 13:51:58
【问题描述】:

大家好,任何人都曾尝试过类似的事件 它在一个 jquery 选项卡系统内,它可以单独工作或在网站上的任何其他地方工作,但是当在一个选项卡内时,它会以某种奇怪的方式获得这个偏移量!

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

<% 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);
    }
};
}

【问题讨论】:

  • 您能否发布代码的实时链接以便人们对其进行调试?
  • 我会找到一个保密的解决方案,所以不能发布实时链接

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


【解决方案1】:

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

【讨论】:

  • 刚刚在我的标签上调用了一个 onClick 事件,然后调用了 google.maps.event.trigger(map, 'resize');之后我添加了以下查找中心
【解决方案2】:
$("#liKort").click(function () {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(marker.position);
    });

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-05-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-07-04
    • 1970-01-01
    • 2012-12-19
    相关资源
    最近更新 更多