将图片内容替换为谷歌地图

Question

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

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

"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;
		}); 							
	}
}]);

<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>

Answer 1

您只需单击按钮即可隐藏图像并显示Google地图

<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')});
}
};

这里的例子