1
我使用angularjs從Spring控制器和谷歌地圖API檢索數據來顯示地圖。 我點擊一個按鈕後調用控制器，然後顯示地圖，但它只顯示空白！谷歌地圖API不加載在單擊按鈕在Spring MVC
這是我的JSP代碼
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href='./css/style.css' rel="stylesheet" type="text/css"></link>
<link href='./css/css/font-awesome.css' rel="stylesheet" type="text/css"></link>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="js/angular.js"></script>
<script src="js/angular-ui-bootstrap-modal.js"></script>
<script src="js/app1.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<script data-require="[email protected]*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyCtrl">
<div class="panel-heading">
<i class="panel-title-icon fa fa-tasks"></i>
<div class="panel-heading-controls">
<button ng-click="openMap()" class="btn-panel">Show Map</button>
</div>
</div>
<div modal="showModalMap" style="width: 500px; height: 500px" >
<div id="dvMap1" style="width: 500px; height: 500px">
</div>
</div>
</div>
</body>
</html>
這裏是JS：
var app = angular.module("MyApp", ["ui.bootstrap.modal"]);
app.controller("MyCtrl", function($scope,$http) {
var urlBase="http://localhost:8080/TaskManagerApp";
$scope.showModal = false;
$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
$scope.openMap = function() {
$http.get(urlBase+'/drawmap').
success(function(data) {
drawMap(JSON.stringify(data));
});
$scope.showModalMap = true;
};
function draWMap(mapdata){
var markers = mapdata;;
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap1"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//***********ROUTING****************//
//Initialize the Path Array
var path = new google.maps.MVCArray();
//Initialize the Direction Service
var service = new google.maps.DirectionsService();
//Set the Path Stroke Color
var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
if ((i + 1) < lat_lng.length) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
path.push(src);
poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
}
});
}
}
}
});
數據傳遞給drawMap（屬於MapData）低於： [ { 「標題」： 「Alibaug」， 「lat」：「10.641400」， 「lng」：「72.872200」， 「描述」： 「測試DESC1」 } ， { 「標題」： 「孟買」， 「LAT」： 「18.964700」， 「LNG」： 「72.825800」， 「說明」：「測試DESC2 「 } ， { 」標題「： 」普納「， 」LAT「： 」18.523600「， 」LNG「： 」73.847800「， 」說明「： 」測試Desc3「 } ]
如果我硬編碼t他的數據，它工作正常。但在這種情況下，它不會幫助我！