Question

我有一个页面，我在一些定义的尺寸中显示图像。我现在想要通过单击按钮调用Google地图并在该维度内显示它。我怎么能在JavaScript和Angular JS中做到这一点？

P.S。我想可以通过创建新JSP并将其链接到按钮来完成。但是我想只更新图像部分而不是整个页面，因为它需要更多的时间来加载。

＆＃13;

"use strict";

angular.module('app', [])
    .controller('ctrl', ['$scope', function($scope){

	// variable to hold a map
	var map;
	
	// variable to hold current active InfoWindow
	var activeInfoWindow ;		

	// ------------------------------------------------------------------------------- //
	// initialize function		
	// ------------------------------------------------------------------------------- //
	  
		
		// map options - lots of options available here 
		var mapOptions = {
		  zoom : 8,
		  draggable: true,
		  center : new google.maps.LatLng(37.5622, 22.6141),
		  mapTypeId : google.maps.MapTypeId.ROADMAP
		};
		
		// create map in div called map-canvas using map options defined above
		map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
		// define two Google Map LatLng objects representing geographic points
		var kalamata = new google.maps.LatLng(37.0422, 22.1141);
		var athens 	= new google.maps.LatLng(37.9833, 23.7333);

		// place two markers
		fnPlaceMarkers(kalamata,"Kalamata");
		fnPlaceMarkers(athens,"Athens");
		
		window.setTimeout(function(){
		    google.maps.event.trigger(map, 'resize');
		},10);
		
		$scope.container = true;
	      
	      $scope.toggle = function(){
	        $scope.container = !$scope.container;
	      };
	      

	// ------------------------------------------------------------------------------- //
	// create markers on the map
	// ------------------------------------------------------------------------------- //
	function fnPlaceMarkers(myLocation,myCityName){
			
		var marker = new google.maps.Marker({
			position : myLocation
		});
	
		// Renders the marker on the specified map
		marker.setMap(map);	

		// create an InfoWindow
		var infoWnd = new google.maps.InfoWindow();			
		
		// add content to your InfoWindow
		infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' +  myCityName + '</div>');
		
		// add listener on InfoWindow - close last infoWindow  before opening new one 
		google.maps.event.addListener(marker, 'mouseover', function() {
			
			//Close active window if exists - [one might expect this to be default behaviour no?]				
			if(activeInfoWindow != null) activeInfoWindow.close();

			// Open InfoWindow
			infoWnd.open(map, marker);

			// Store new open InfoWindow in global variable
			activeInfoWindow = infoWnd;
		}); 							
	}

    }]);

＆＃13;

<img src=<%=request.getContextPath()%>/resources/images/io6.jpg style="width: 1245px; height: 290px;" ng-show="container">
<div id="googleMap" style="width:1245px;height:290px; display: inline-block;" ng-show="!container"></div>

＆＃13;

Answer 1

您可以在点击按钮时隐藏图像并显示谷歌地图

<img src="dummy.jpg" ng-show="!container">
<div id="googleMap" ng-show="container"></div>
<button ng-click="toggle()">Toggle</button>

$scope.toggle = function() {
    $scope.container = !$scope.container;
    if($scope.container){ 
      setTimeout(function( {google.maps.event.trigger(map, 'resize')});
    }
};

example here

用Google地图替换图片内容

1 个答案: