谷歌地图，在点击按钮而不是页面加载时初始化和获取地图

Google Maps, initialize and fetch map when clicking button and not on page load

本文关键字：加载 初始化 地图 获取 按钮 谷歌地图      更新时间：2023-09-26

我创建了两个小提琴：

第一个 （https://jsfiddle.net/az5tk8ns/5/） 运行良好，并在页面加载时使用以下语法进行初始化： google.maps.event.addDomListener(window, 'load', initialize);

第二个小提琴（https://jsfiddle.net/az5tk8ns/8/）是完全相同的代码，只是谷歌画布和相关HTML包含在默认情况下隐藏的DIV中。我单击按钮以取消隐藏div 并初始化地图。 initialize();

问题是 API 中的地图部分工作得很好，因为我可以看到 API 计算的源、目的地和距离，我只是无法看到地图。

我与初始化调用有什么关系，以确保正确显示谷歌 MPA。

整个初始化语法为：

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(-28.5710903,26.0826083);
  var mapOptions = {
    zoom: 7,
    center: chicago
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  calcRoute();
}

一如既往地感谢您的帮助

你的问题不在于代码，而在于 CSS：

html, body, #map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<div id="testdiv">没有尺寸。 将其更改为对我有用：

html,body, #map-canvas, #testdiv {
  height: 100%;
  margin: 0px;
  padding: 0px
}

概念验证小提琴

代码片段：

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(-28.5710903, 26.0826083);
  var mapOptions = {
    zoom: 7,
    center: chicago
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  calcRoute();
}
var origin = "pietermaritzburg, south africa",
  destinations = ["", "durban, south africa", "amanzimtoti, south africa", "ixopo, south africa"]
service = new google.maps.DistanceMatrixService();
function calcRoute() {
  var waypts = [];
  for (var i = 1; i < destinations.length - 1; i++) {
    waypts.push({
      location: destinations[i],
      stopover: true
    });
  }
  var request = {
    origin: origin,
    destination: destinations[destinations.length - 1],
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var orig = document.getElementById("orig"),
        dest = document.getElementById("dest"),
        dist = document.getElementById("dist");
      orig.value = response.routes[0].legs[0].start_address;
      dest.value = response.routes[0].legs[0].end_address;
      var total_distance = 0.0;
      for (var i = 0; i < response.routes[0].legs.length; i++) {
        total_distance += response.routes[0].legs[i].distance.value;
      }
      dist.value = total_distance + " meters";
    }
  });
}
function testmap() {
  $('#testdiv').show();
  initialize();
}
html,
body,
#map-canvas,
#testdiv {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div style='display:none' id="testdiv">
  <div id="map-canvas"></div>
  <div id="mileage-details">Origin:
    <input id="orig" type="text" style="width:35em">
    <br>
    <br>Destination:
    <input id="dest" type="text" style="width:35em">
    <br>
    <br>Distance:
    <input id="dist" type="text" style="width:35em">
  </div>
</div>
<input type="button" onclick='testmap()' value="getmap">

相关文章：