Question

我有一页显示工作图片和位置。我想在页面加载时首先显示作业图片当点击地图加载而不是pic。

这可能是代码

<script>

var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
    zoom: 15,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'onclick', initialize);
</script>

<div id="panel">
  <input id="address" type="textbox" value="england london">
  <input type="button" value="Geocode" onclick="codeAddress();">
</div>
<div  id="map-canvas"> <img src="img/src.jpg" /></div>

但是当页面加载第一个地图加载和图片不显示时。

如何使用“按钮”在图像和地图之间切换并首先加载图像？

Answer 1

您初始化 geocoder 变量 {{1方法。因此，您可以在下面的方法initialize()之前调用此方法，例如

geocoder.geocode(...)

<强>供参考：另外，function codeAddress() { initialize(); //intialize geocoder var address = document.getElementById('address').value; geocoder.geocode( { 'address': address}, function(results, status) { .... ....元素需要map-canvas和height。所以设置像

这样的样式

width

在JSFiddle

中查看此内容

注意：

或者在页面加载时调用 #map-canvas { height: 100px; width: 100px: } ，以便在每次初始化Google地图时获得更好的效果。

initialize()

点击显示谷歌地图

1 个答案: