仅在完全加载Google Map API后如何显示？

Question

我正在尝试使用Google Maps API的Places搜索功能。

我的问题是，地图完全加载后，搜索框会移动，API容器的高度也会更改。

我已经演示了这个问题。 尝试刷新页面，您将观察到上述行为。

我发现了类似的问题，建议是-

google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
});

要么

window.onload = map_initialize;

但是，他们似乎都无法解决这种转变行为。

Answer 1

一种选择是将input设置为display:none ，在空闲事件上将其添加到地图，然后显示它。

function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
        lat: -33.8688,
        lng: 151.2195
    },
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  // 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);
  google.maps.event.addListenerOnce(map, 'idle', function() {
    input.style.display = "block";
  });

概念证明

代码段：

 // This example adds a search box to a map, using the Google Place Autocomplete // feature. People can enter geographical searches. The search box will return a // pick list containing a mix of places and predicted search terms. function initAutocomplete() { var map = new google.maps.Map(document.getElementById('map'), { center: { lat: -33.8688, lng: 151.2195 }, zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); // 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); google.maps.event.addListenerOnce(map, 'idle', function() { input.style.display = "block"; }); // Bias the SearchBox results towards current map's viewport. map.addListener('bounds_changed', function() { searchBox.setBounds(map.getBounds()); }); var markers = []; // 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; } // Clear out the old markers. markers.forEach(function(marker) { marker.setMap(null); }); markers = []; // For each place, get the icon, name and location. var bounds = new google.maps.LatLngBounds(); places.forEach(function(place) { var icon = { url: place.icon, size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(25, 25) }; // Create a marker for each place. markers.push(new google.maps.Marker({ map: map, icon: icon, title: place.name, position: place.geometry.location })); if (place.geometry.viewport) { // Only geocodes have viewport. bounds.union(place.geometry.viewport); } else { bounds.extend(place.geometry.location); } }); map.fitBounds(bounds); }); } google.maps.event.addDomListener(window, 'load', initAutocomplete);

 html, body { height: 100%; margin: 0; padding: 0; } #map { height: 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; } #target { width: 345px; }

 <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> <input id="pac-input" class="controls" type="text" placeholder="Search Box" style="display:none"> <div id="map"></div>

Answer 2

您可以在加载google maps JS api <script>标签中简单地使用defer attribute ，并使用回调函数来初始化地图。

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Google map demo</title> <style type="text/css"> html, body, #map_canvas { width: 100%; height: 700px; margin: 0; padding: 0; } .infowindow * { font-size: 90%; margin: 0 } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=initialize" defer></script> </head> <body> <div id="map_canvas"></div> </body> <script type="text/javascript"> function initialize() { alert("map api loaded"); // initialize map var myOptions = { zoom: 2, center: new google.maps.LatLng(37.422104808, -122.0838851) }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </html>

仅在完全加载Google Map API后如何显示？

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-09-02 03:06:25

解决方案2
0 2015-09-03 05:12:10

仅在完全加载Google Map API后如何显示？

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-09-02 03:06:25

解决方案2 0 2015-09-03 05:12:10

解决方案1
1 已采纳 2015-09-02 03:06:25

解决方案2
0 2015-09-03 05:12:10