希望从其他功能访问地图对象

Question

我已经用信息框初始化了一个地图，现在当我尝试从另一个函数访问地图变量时（通过点击链接获取位置捕获我的位置）我得到地图没有定义我知道它之前被执行该变量可用，但我无法找到解决方法。 任何指针/帮助将不胜感激，提前谢谢您

jQuery( document ).ready(function($) {
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false";
    // document.body.appendChild(script);
	var map;
	initialize();

    });   
	  function showPosition(){
		  // Try HTML5 geolocation
		  if(navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(function(position) {
			var map;
			var bounds = new google.maps.LatLngBounds();
			
			var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
			//jQuery('#findMe').data('pos',pos);
				
				marker = new google.maps.Marker({   
					map: map,
					position: pos,
					zoom:7

				});
				// infowindow = new google.maps.InfoWindow({
					// map: map,
					// position: pos,
					// content: 'You Are Here'
				 // });
				 map.setCenter(pos);
				 
			}, function() {
			  handleNoGeolocation(true);
			});
		  } else {
			// Browser doesn't support Geolocation
			handleNoGeolocation(false);
		  }
		  return false;
    }
   function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap',
		zoom: 8
    };
	
	
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);
      
    var markers = [['',35.2152241,-80.84801900000002,''],
['',35.1995636,-80.82525329999999,''],
['',35.1585635,-80.79616499999997,''],
['',35.201245,-80.86516999999998,''],
['',35.19604558956503,-80.84856033325195,''],
['',35.197692,-80.82809299999997,''],
['',35.0658382,-80.76834389999999,''],
['',35.1786109,-80.851946,' '],
['',35.1304041,-80.8324773,''],
['',35.201245,-80.86516999999998,'  '],
['',35.2136068,-80.79125290000002,' '],
];
 
var infoWindowContent = [['<div class="info_content">test content<\/div>'],
['<div class="info_content">test content<\/div>'],
['<div class="info_content">test content<\/div>'],
['<div class="info_content">test content<\/div>'],
['<div class="info_content">test content<\/div>'],
['<div class="info_content">test content<\/div>'],
['<div class="info_content">test content<\/div>'],
['<div class="info_content">test content<\/div>'],
['<div class="info_content">test content<\/div>'],
['<div class="info_content">test content<\/div>'],
];
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        var itype = markers[i][3];
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });
          
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        map.fitBounds(bounds);
    }
    }
		

#map_canvas{
width:100%;height:400px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.0&sensor=false"></script>

<a href='#' class='detectLoc' onclick="return showPosition()">Get My lcoation</a>
    <div id="map_canvas" class="mapping"></div>

Answer 1

您需要有一个全局变量来存储“地图”。同样在这里，您已经在每个函数中声明了变量映射。这将遮蔽全局变量，而局部变量将始终使用，导致未定义。在下面的代码中，我添加了一个全局地图变量，并在函数 showPosition() 和 initialize()

中注释了地图变量的重新声明

var map;    // global map variable

jQuery( document ).ready(function($) {
        var script = document.createElement('script');
        script.src = "http://maps.googleapis.com/maps/api/js?sensor=false";
        // document.body.appendChild(script);
        var map;
        initialize();

        });   
          function showPosition(){
              // Try HTML5 geolocation
              if(navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                //var map;
                var bounds = new google.maps.LatLngBounds();

                var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                //jQuery('#findMe').data('pos',pos);

                    marker = new google.maps.Marker({   
                        map: map,
                        position: pos,
                        zoom:7

                    });
                    // infowindow = new google.maps.InfoWindow({
                        // map: map,
                        // position: pos,
                        // content: 'You Are Here'
                     // });
                     map.setCenter(pos);

                }, function() {
                  handleNoGeolocation(true);
                });
              } else {
                // Browser doesn't support Geolocation
                handleNoGeolocation(false);
              }
              return false;
        }
       function initialize() {
        //var map;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
            mapTypeId: 'roadmap',
            zoom: 8
        };


        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        map.setTilt(45);

        var markers = [['',35.2152241,-80.84801900000002,''],
    ['',35.1995636,-80.82525329999999,''],
    ['',35.1585635,-80.79616499999997,''],
    ['',35.201245,-80.86516999999998,''],
    ['',35.19604558956503,-80.84856033325195,''],
    ['',35.197692,-80.82809299999997,''],
    ['',35.0658382,-80.76834389999999,''],
    ['',35.1786109,-80.851946,' '],
    ['',35.1304041,-80.8324773,''],
    ['',35.201245,-80.86516999999998,'  '],
    ['',35.2136068,-80.79125290000002,' '],
    ];

    var infoWindowContent = [['<div class="info_content">test content<\/div>'],
    ['<div class="info_content">test content<\/div>'],
    ['<div class="info_content">test content<\/div>'],
    ['<div class="info_content">test content<\/div>'],
    ['<div class="info_content">test content<\/div>'],
    ['<div class="info_content">test content<\/div>'],
    ['<div class="info_content">test content<\/div>'],
    ['<div class="info_content">test content<\/div>'],
    ['<div class="info_content">test content<\/div>'],
    ['<div class="info_content">test content<\/div>'],
    ];
        var infoWindow = new google.maps.InfoWindow(), marker, i;

        for( i = 0; i < markers.length; i++ ) {
            var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
            var itype = markers[i][3];
            bounds.extend(position);
            marker = new google.maps.Marker({
                position: position,
                map: map,
                title: markers[i][0]
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infoWindow.setContent(infoWindowContent[i][0]);
                    infoWindow.open(map, marker);
                }
            })(marker, i));

            map.fitBounds(bounds);
        }
        }