Google Maps項目在移動設備上不起作用
[英]Google maps project does not work on mobile devices
問題描述
我使用Google Map的API構建了地圖。 它可以像我想要的那樣在台式機上運行，但不能在移動設備上加載。 我的網站反應靈敏，我將地圖畫布的寬度設置為100％。 我讀了一些帖子，建議我需要擺脫尺寸樣式后才能起作用，但是我還沒有為此感到幸運。 有人可以幫我這個地圖嗎？ 謝謝
這是我運行代碼的網頁。 http://stlresidences.com/test-map
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <style> #googft-mapCanvas { height: 600px; margin: 0; padding: 0; width: 100%; } .controls { margin-top: 10px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #pac-input { background-color: #fff; font-family: Roboto; font-size: 15px; font-weight: 300; margin-left: 12px; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 300px; } #pac-input:focus { border-color: #4d90fe; } .pac-container { font-family: Roboto; } #type-selector { color: #fff; background-color: #4d90fe; padding: 5px 11px 0px 11px; } #type-selector label { font-family: Roboto; font-size: 13px; font-weight: 300; } </style> <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script> <input id="pac-input" class="controls" type="text" placeholder="Enter Address Here"> <div id="googft-mapCanvas"></div> <script> function initialize() { google.maps.visualRefresh = true; var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) || (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/)); if (isMobile) { var viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no'); } var mapDiv = document.getElementById('googft-mapCanvas'); mapDiv.style.width = isMobile ? '100%' : '1000px'; mapDiv.style.height = isMobile ? '100%' : '300px'; var map = new google.maps.Map(mapDiv, { center: new google.maps.LatLng(38.64936217820852, -90.53628850000001), zoom: 9, mapTypeId: google.maps.MapTypeId.HYBRID }); map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open')); map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend')); layer = new google.maps.FusionTablesLayer({ map: map, heatmap: { enabled: false }, query: { select: "col26", from: "11Q0B7iRayT2JIOBl8_VRUmitimhX1W01byuFDnAv", where: "" }, options: { styleId: 2, templateId: 2 } }); if (isMobile) { var legend = document.getElementById('googft-legend'); var legendOpenButton = document.getElementById('googft-legend-open'); var legendCloseButton = document.getElementById('googft-legend-close'); legend.style.display = 'none'; legendOpenButton.style.display = 'block'; legendCloseButton.style.display = 'block'; legendOpenButton.onclick = function () { legend.style.display = 'block'; legendOpenButton.style.display = 'none'; } legendCloseButton.onclick = function () { legend.style.display = 'none'; legendOpenButton.style.display = 'block'; } } var marker = new google.maps.Marker({ position: new google.maps.LatLng(38.64936217820852, -90.53628850000001), map: map, draggable: true, title: "Your New Home", }); // Create the search box and link it to the UI element. var input = document.getElementById('pac-input'); var searchBox = new google.maps.places.SearchBox(input); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); // Bias the SearchBox results towards current map's viewport. map.addListener('bounds_changed', function() { searchBox.setBounds(map.getBounds()); }); // Listen for the event fired when the user selects a prediction and retrieve // more details for that place. searchBox.addListener('places_changed', function() { var places = searchBox.getPlaces(); if (places.length == 0) { return; } // For each place, get the icon, name and location. var bounds = new google.maps.LatLngBounds(); places.forEach(function(place) { if (place.geometry.viewport) { // Only geocodes have viewport. map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(11); // Why 17? Because it looks good. } // now let's move the marker marker.setPosition(place.geometry.location); }); //map.fitBounds(bounds); map.panTo(marker.getPosition()); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> <body> </body> </html>
2 個解決方案
解決方案1
2 已采納 2015-09-24 19:15:12
您已從FusionTable頁面復制了代碼，在該頁面上#googft-mapCanvas樣式將被覆蓋。
刪除以下兩行：
mapDiv.style.width = isMobile ? '100%' : '1000px';
mapDiv.style.height = isMobile ? '300px' : '300px';
也將其刪除（您的頁面中沒有#googft-legend ）
if (isMobile) {
var legend = document.getElementById('googft-legend');
var legendOpenButton = document.getElementById('googft-legend-open');
var legendCloseButton = document.getElementById('googft-legend-close');
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
legendCloseButton.style.display = 'block';
legendOpenButton.onclick = function () {
legend.style.display = 'block';
legendOpenButton.style.display = 'none';
}
legendCloseButton.onclick = function () {
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
}
}
此外：加載API的發行版
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry,places"></script>
目前，您加載的實驗API版本似乎非常不穩定
解決方案2
0 2015-09-24 18:54:12
您的問題可能是地圖的DIV尺寸有些動態，並且Google Maps無法在加載時繪制。 我建議您在頁面加載后（例如100ms）嘗試運行一段時間，以查看是否有幫助。 根據Google的建議，它通常是響應式地圖的最佳解決方案：
google.maps.event.trigger(map, 'resize')
這段代碼所做的基本上是對地圖說要重新繪制自身，因為其容器大小剛剛更改。
“Google地圖移動版”上的滾動如何運作？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.