应用css3缩放属性后,Google地图图钉点击无效

时间:2013-11-26 13:43:37

标签: css3 google-maps css-transitions

应用css3缩放属性后,

Google地图图钉点击无效。我无法点击它。

我想应用缩放属性。

        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
            <script>
    // This example displays a marker at the center of Australia.
    // When the user clicks the marker, an info window opens.

    function initialize() {
        var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
        var mapOptions = {
            zoom: 4,
            center: myLatlng
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var contentString = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
                '<div id="bodyContent">'+
                '<p><b>Uluru</b>,</p>'+
                '</div>'+
                '</div>';

        var infowindow = new google.maps.InfoWindow({
                content: contentString
        });

        var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'Uluru (Ayers Rock)'
        });
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);

            </script>
    <style>
    html, body, #map-canvas {
                    height: 100%;
                    margin: 0px;
                    padding: 0px
                }

    #map-canvas{
            zoom: 0.7;
            -moz-transform: scale(0.7);
            -webkit-transform: scale(0.7);

    }
    </style>
        <body>
            <div id="map-canvas"></div>
        </body>

有人可以告诉我为什么在应用css3 zoom属性后我没有得到手形指针。

1 个答案:

答案 0 :(得分:0)

请参阅链接。 http://jsfiddle.net/6TkY4/1/

var mapOptions = {
                     center: new google.maps.LatLng(latitude, longitude),
                      zoom: 8,
                     mapTypeId: google.maps.MapTypeId.ROADMAP

                 };

If you want to change zoom size, then increase zoom property value in mapOptions.

另请参阅您的小提琴示例现在的作品。

http://jsfiddle.net/BHhrF/1/

不要在%值中设置div高度。请使用像素值。或者使用带有像素的外部div。内部div高度(%)。它会起作用。