首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用Google Maps API 3.34地图缩放不起作用

使用Google Maps API 3.34地图缩放不起作用
EN

Stack Overflow用户
提问于 2018-10-26 06:11:04
回答 1查看 234关注 0票数 -1

我有一个网站,利用谷歌地图API和覆盖从ESRI服务提供的地块线。在Google和Firefox中,地图缩放控件显示得很好。

Map in Chrome

突出显示发生在ESRI平铺上。

在IE11中,缩放控件消失了,地图是静态的(不能缩放或移动)。

Map in IE 11

如你所见,缩放控件丢失了,并且瓦片上的线条(黄线)与底图不对齐。这是因为瓦片被放大了,而地图却没有。有一个类似的问题,在2014年就有报道,但在3.16版本中得到了解决。

下面是我构建地图的代码:

代码语言:javascript
复制
///summary
///sets up the map
///Parameters
///-mapDivID string id for the div to place the map
///-coords object with lat and lng properties
///-zoom default zoom of map (I use 13)
///-directions optional object to display directions
function startmap(mapDivID, coords, zoom, directions) {
    var maps = new Array();
    var bounds = new Array();
    var directionsDisplay;
    var directionsService;
    // Get the div to put the map in and check to make sure it's there.
    var mapDiv = document.getElementById(mapDivID);
    if (mapDiv) {
        var options = {
            zoom: zoom,
            center: coords,
            zoomControl: true,
            zoomControlOptions: {
                postion: google.maps.ControlPosition.BOTTOM_RIGHT
            }
        };
        // we have multiple maps so we need to store them in an array by the divID so we don't overlap one or the other.
        var map = {};
        if (maps.indexOf(mapDivID) < 0) {
            maps[mapDivID] = new google.maps.Map(mapDiv, options);
            if (directions) {
                directionsDisplay = new google.maps.DirectionsRenderer;
                directionsService = new google.maps.DirectionsService;

                directionsDisplay.setMap(maps[mapDivID]);
                directionsDisplay.setPanel(document.getElementById('directions-panel'));
                var onChangeHandler = function (e) {
                    if (e.which && e.which == 13) {
                        calculateAndDisplayRoute();
                    }
                };
                document.getElementById('txtOrigin').addEventListener('keypress', onChangeHandler);
            }
        } 
        map = maps[mapDivID];

        if (bounds.indexOf(mapDivID) < 0) {
            bounds[mapDivID] = new google.maps.LatLngBounds();
        }

        return map;
    } else {
        // No map div
        console.error(mapDivID + ' not found');
    }
    return map;
}

startmap('map', {lat: -34.397, lng: 150.644}, 13, null);
代码语言:javascript
复制
#map { width: 100%; height: 100% }
代码语言:javascript
复制
<script src="http://maps.google.com/maps/api/js?libraries=drawing"></script>
<div id="map">map goes here</div>
EN

回答 1

Stack Overflow用户

发布于 2018-10-26 06:26:58

使用

代码语言:javascript
复制
gestureHandling: 'greedy'

代替:

代码语言:javascript
复制
zoomControlOptions: {
                postion: google.maps.ControlPosition.BOTTOM_RIGHT
            }

在您的屏幕中,将出现一个平移交互,您可以放大/缩小

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52998818

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档