Javascript 创建后如何操作谷歌地图？_Javascript_Google Maps_Google Maps Api 3

Javascript 创建后如何操作谷歌地图？

javascript google-maps google-maps-api-3

Javascript 创建后如何操作谷歌地图？,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我应该提醒你，我对网站创建和Javascript非常陌生。别挡道了。正因为如此，我在创建的网站上有一个谷歌地图小部件。它使地图的创建变得非常简单，但是如果我真的需要，我想我可以自己尝试编码。除此之外，我想在地图的一侧添加按钮，这些按钮将指向我创建的一些标记在创建贴图对象后，我很难让贴图对象对其进行操作。我似乎找不到widget称之为map对象的东西，因此我无法使用将map变量设置为全局对象的想法我只是想改变默认的缩放开始。下面是我基本上要做的，但每当代码被执行时，我的地图就会变成屏幕上的灰色

我应该提醒你，我对网站创建和Javascript非常陌生。别挡道了。正因为如此，我在创建的网站上有一个谷歌地图小部件。它使地图的创建变得非常简单，但是如果我真的需要，我想我可以自己尝试编码。除此之外，我想在地图的一侧添加按钮，这些按钮将指向我创建的一些标记

在创建贴图对象后，我很难让贴图对象对其进行操作。我似乎找不到widget称之为map对象的东西，因此我无法使用将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>

  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>


#地图{
宽度：500px；
高度：400px；
边距：0自动0自动；
}
加载（“地图”，“2.x”）；load（“jquery”，“1.3.1”）；
函数initMap（）{
var映射；
变量myOptions={
中心：{lat:40，lng:50}，
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP，
}
var mapDiv=document.getElementById（'map'）；
map=新的google.maps.map（mapDiv，myOptions）；
}
google.maps.event.addDomListener（窗口'load'，初始化映射）；
功能新建位置（新建LAT、新建LNG）{
//var mymap=new google.maps.Map（document.getElementById（'Map'）；
var mymap=document.getElementById（'map'）；
mymap.setZoom（4）；
}

看看谷歌开发工具，我发现了这个错误 “未捕获的TypeError:mymap.setZoom不是一个函数。”我想这意味着我得到的是地图区域，而不是地图本身

因此，是否可以获取映射的实例以便我可以对其进行操作？

您没有引用在

initMap（）中创建的正确map
变量
我要更改的是将map
变量设置为全局变量，这样您的所有函数，包括newLocation（）
都可以访问此map
变量
您的实现正在newLocation（）
函数中使用mymap
，这可以访问映射的div
容器，而不是实际的map对象本身，这就是您无法更改属性（如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>


#地图{
宽度：500px；
高度：400px；
边距：0自动0自动；
}
加载（“地图”，“2.x”）；load（“jquery”，“1.3.1”）；
var映射；
函数initMap（）{
变量myOptions={
中心：{lat:40，lng:50}，
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var mapDiv=document.getElementById（'map'）；
map=新的google.maps.map（mapDiv，myOptions）；
}
google.maps.event.addDomListener（窗口'load'，初始化映射）；
功能新建位置（新建LAT、新建LNG）{
map.setZoom（4）；
}
map
是地图对象mymap
只是一个引用map-DOM元素的变量。您需要将代码移动到initMap
函数中，或者全局声明map
变量，以便可以在newLocation
函数中访问它（当然，使用map.setZoom（4）
而不是mymap.setZoom（4）
）.不幸的是，以上只是我尝试使用新位置的一个例子。地图和标记的整个创建都是由一个小部件完成的。因为我对这一切都不熟悉，所以我无法破译所有的spahgetti，这是页面的来源。这就是我相信你可以用这个小部件做的。如果你需要更多的交互性/自定义行为，为什么不忘记这个插件并集成你自己的谷歌地图代码呢？我相信如果你不知道怎么做，你可以在Wordpress中找到关于如何做的信息……这很好。但正如他所说，他对javascript“非常陌生”，你可能想解释一下什么不起作用，以及你是如何修复的。唉，我知道这是一个解决方案。然而，我并没有真正创建谷歌地图，这个wordpress小部件是。因此，我认为我无法将map变量状态更改为global。事实上，我在页面源代码中找不到他们所说的。这就是为什么我希望以其他方式获取它，并在newLocation函数中处理我所需要的内容。@orangestorm87我们只能用给出的信息提供指导：）我想我现在只是想问，在创建地图实例后是否可以获取它？如果是的话，有什么好的资源可以让我看看如何做到这一点@BobbyW@orangestorm87当你说你在Wordpress插件中找不到代码时，你从哪里得到问题的代码？