为了账号安全,请及时绑定邮箱和手机立即绑定

Google Map Infowindow无法正确显示

/ 猿问

Google Map Infowindow无法正确显示

繁星coding 2019-11-19 15:10:31

单击标记时,信息窗口未正确显示在我的地图上。网站在这里。


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


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

          });



        google.maps.event.addListener(marker, 'click', function(e) {

            infowindow.open(map,marker);

        });

    }

    function centerMap() {

      map.setCenter(markers[markers.length-1].getPosition());

    }

注意:我使用的是Google Maps JS V3。


查看完整描述

3 回答

?
手掌心

这个问题是由style.css中的这种格式引起的:


img {

    height: auto;

    max-width: 100%;/* <--the problem occurs here*/

}

将其添加到style.css的末尾以对地图内的图像应用默认值:


#map_canvas img{max-width:none}


查看完整回答
反对 回复 2019-11-19
?
守着一只汪

问题可能是您正在使用img{ max-width: 100%; }通用性。


试试这个到你的CSS


.gmnoprint img {

    max-width: none; 

}


查看完整回答
反对 回复 2019-11-19
?
慕用2447696

我尝试了大多数Internet答案,但是这些命令没有用(不起作用),我添加了自定义CSS,并且可以看到地图缩放控件,还可以启用标记单击。这个答案对于这个问题也很有用



    .gmnoprint {

        显示:阻止!重要

    }

    .gmnoprint.gm-bundled-control.gm-bundled-on-bottom {

        显示:块!重要;

    }

    .gm-tilt {

        显示:无;

    }

    .gm-iv-address {

        高度:56像素;

    }


查看完整回答
反对 回复 2019-11-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信