创建后如何操作谷歌地图

How to manipulate Google Map after creation?

本文关键字：操作 谷歌地图 何操作 创建      更新时间：2023-09-26

我应该警告你，我对网站创建和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>

查看谷歌开发人员工具，我收到此错误"未捕获的类型错误：mymap.setZoom 不是一个函数。 我认为这意味着我得到的是地图区域而不是地图本身。

因此，是否可以抓取地图的实例以便我可以对其进行操作？

您

没有引用在initMap()中创建的正确map变量

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

您的实现在 newLocation() 函数中使用 mymap，它可以访问映射的div容器，而不是实际的map object本身，这就是为什么您无法更改 zoom 等属性的原因。

尝试将其结构化为这样，以便您拥有对 map 变量的正确引用。

<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>
相关文章：