Question

我应该警告你，我对网站创建和Javascript都很陌生。随着那个方式。因为我在我正在创建的网站上有一个谷歌地图小部件。它使地图创建变得非常简单，但如果我真的需要，我想我可以尝试自己编码。除此之外，我想在地图一侧添加按钮，这些按钮将转到我创建的一些标记。

我很难让地图对象在创建后对其进行操作。我似乎无法找到小部件调用地图对象的内容，因此我无法使用使我的地图变量成为全局对象的想法。

我只是想将默认缩放更改为开头。以下是我基本上尝试做的事情，但无论何时执行代码，但我的地图在我的屏幕上变成灰色框。

<html>  
<head>
<style>
  #map {
    width: 500px;
    height: 400px;
    margin: 0 auto 0 auto;
  }
</style>
</head>  
<script type="text/javascript"src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE"></script>
<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script>
<body>
<div id="map"></div>
<script>

  function initMap() {
    var map;
    var myOptions = {
      center: {lat: 40, lng: 50},
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      }
    var mapDiv = document.getElementById('map');
    map = new google.maps.Map(mapDiv, myOptions);
    }
    google.maps.event.addDomListener(window, 'load', init_map);
</script>

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

<script>
    function newLocation(newLat, newLng) {
    //var mymap = new google.maps.Map(document.getElementById('map'));
    var mymap = document.getElementById('map');
    mymap.setZoom(4);
    }
</script>
<INPUT TYPE="button" NAME="myButton" VALUE="Press This" onclick="newLocation(45,88)">
<body>
</html>

查看Google开发者工具，我收到此错误消息 “未捕获的TypeError：mymap.setZoom不是函数。”我认为这意味着我得到的地图区域不是地图本身。

因此可以抓取地图的实例，以便我可以操纵它吗？

Answer 1

您没有引用您在map

中创建的正确initMap()变量

我要更改的是将map变量设为全局变量，因此包括newLocation()在内的所有函数都可以访问此map变量。

您的实施正在mymap函数中使用newLocation()，这可以访问地图的div容器，而不是实际的map object本身，这就是您的原因无法更改zoom等属性。

尝试将其结构化，因此您可以正确引用地图变量。

<html>  
<head>
<style>
  #map {
    width: 500px;
    height: 400px;
    margin: 0 auto 0 auto;
  }
</style>
</head>  
<script type="text/javascript"src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE"></script>
<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script>
<body>
<div id="map"></div>
<script>
  var map;

  function initMap() {
    var myOptions = {
      center: {lat: 40, lng: 50},
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var mapDiv = document.getElementById('map');
    map = new google.maps.Map(mapDiv, myOptions);
  }

  google.maps.event.addDomListener(window, 'load', init_map);

  function newLocation(newLat, newLng) {
    map.setZoom(4);
  }
</script>

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

<INPUT TYPE="button" NAME="myButton" VALUE="Press This" onclick="newLocation(45,88)">
<body>
</html>

如何在创建后操纵Google Map？

1 个答案: