如何将map定义为全局变量以在另一个javascript函数中调用

时间:2015-05-22 09:42:55

标签: google-maps google-maps-api-3

所以我被困在搜索此解决方案几个小时请帮忙,这是我的代码,

    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Simple markers</title>
        <style>
          html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
          }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false"></script>
        <script type="text/javascript">
            var map;
            var marker;

            function initialize() {
                var myLatlng = new google.maps.LatLng(-25.363882,131.044922);

                var mapOptions = {
                    zoom: 10,
                    disableDefaultUI: true,
                    center: myLatlng
                }

                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                marker = new google.maps.Marker({
                  position: myLatlng,
                  map: map,
                  title: 'Hello World!'
                });
            }
            function see(){
                alert(map);
                var newLatlng = new google.maps.LatLng(-25.363882,133.044922);
                map.setCenter(newLatlng);
            }
    google.maps.event.addDomListener(window, 'load', initialize);
see();
      </script>
      </head>
      <body>
        <div id="map-canvas"></div>
      </body>
    </html>

变量map被称为undefined。在搜索之后,他们说在分配地图之前调用地图(global variable 'map' is undefined)。如何修复这个已知的问题?请帮忙

我的目标是使用javascript函数更新标记位置。任何帮助都会很棒,谢谢(

1 个答案:

答案 0 :(得分:1)

就像其他帖子所说的那样,在引用地图时尚未分配地图。这是因为只有在页面加载完成后才会调用初始化函数。在该功能中会发生以下情况。

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

在此之前,即使你改变了地图,地图也是未定义的。因此,您可以在按下按钮时调用您的函数作为推荐的其他帖子,也可以在初始化函数结束时调用see()。要么工作。在这里,我将see()放在初始化函数的末尾。

<html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Simple markers</title>
        <style>
          html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
          }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false"></script>
        <script type="text/javascript">
            var map;
            var marker;

            function initialize() {
                var myLatlng = new google.maps.LatLng(-25.363882,131.044922);

                var mapOptions = {
                    zoom: 10,
                    disableDefaultUI: true,
                    center: myLatlng
                }

                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                marker = new google.maps.Marker({
                  position: myLatlng,
                  map: map,
                  title: 'Hello World!'
                });
                see();
            }
            function see(){
                alert(map);
                var newLatlng = new google.maps.LatLng(-25.363882,133.044922);
                map.setCenter(newLatlng);
            }
    google.maps.event.addDomListener(window, 'load', initialize);
      </script>
      </head>
      <body>
        <div id="map-canvas"></div>
      </body>
    </html>