相关疑难解决方法(0)

Google Map Infowindow无法正常显示

单击标记时,infowindow在我的地图上显示不正确.该网站在这里.

您还会注意到地图控件也未正确显示.

    var map;
    var locations = <?php print json_encode(di_get_locations()); ?>;
    var markers = []
    jQuery(function($){
        var options = {
            center: new google.maps.LatLng(51.840639771473, 5.8587418730469),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), options);

        for (var i=0; i < locations.length;i++) {
            makeMarker(locations[i]);
        }
        centerMap();

    });
    function makeMarker(location) {
        var markerOptions = {map: map, position: new google.maps.LatLng(location.lat, location.lng)};
        var marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
        var content = '';

        var infowindow = new google.maps.InfoWindow(
          { content: "test",
            size: new google.maps.Size(50,50),
            disableAutoPan : …
Run Code Online (Sandbox Code Playgroud)

google-maps infowindow google-maps-api-3

28
推荐指数
1
解决办法
2万
查看次数

Google Maps api v3工具:视觉扭曲?

我只是注意到gMap视图工具正在显示...而不是异常.他们的地区似乎仍然得到了恰当的定义 - 我可以很好地与他们互动,这只是他们的外表看起来搞砸了.

我没有将任何CSS应用到任何地图片段,并且我应用于地图容器的唯一的CSS是width:100%; height:100%; z-index:0;(我通常这样做).

我确实有它在页面上的其他元素position:absolute;,并position:fixed;和一些高z-indexS(500 1000).它们是否有可能导致Map工具的视觉扭曲?

我在Chrome,Chrome Canary,Ffx,Safari和Opera(在Mac OSX上)的最新版本中看到了同样奇怪的视觉失真.

我检查了dev工具/ firebug,没有意外的CSS被应用到地图的容器或直接应用到它的工具.

Google Maps Api v3:地图界面工具

这是确切的HTML(我剥离了其他元素和css,但仍然发生了奇怪的事情):

<html style="width:100%;height:100%;">
    <head>
        <link rel="stylesheet" href="shared/bootstrap/css/foundation.min.css">
        <link rel="stylesheet" href="shared/bootstrap/css/v2.2.2.min.css">
        <script
            type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?key=...">
        </script>
        <script type="text/javascript">
            function ginit() {
                var vancouver = new google.maps.LatLng(49.285415,-123.114982);
                var mapOptions = {
                    center: vancouver,
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(
                    document.getElementById("map"),
                    mapOptions
                );
                var infowindow = new google.maps.InfoWindow(),
                    marker;
            }//ginit()
        </script>
    </head>
    <body onload="ginit();" style="width:100%;height:100%;">
        <div id="map" style="width:100%;height:100%;"></div>
    </body> …
Run Code Online (Sandbox Code Playgroud)

css appearance css-position google-maps-api-3

22
推荐指数
2
解决办法
7839
查看次数