在 Spring MVC 中单击按钮时 Google Map API 不加载答案

【问题标题】：Google Map API Doesn't load on click of button in Spring MVC在 Spring MVC 中单击按钮时 Google Map API 不加载
【发布时间】：2015-06-07 20:04:26
【问题描述】：

我正在使用 angularjs 从 Spring 控制器和 Google 地图 API 检索数据以显示地图。我通过单击按钮调用控制器，然后显示地图，但它只是显示为空白！

这是我的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="angular.js@*" 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)的数据如下： [ { "title": "阿里巴格", “纬度”：“10.641400”， “液化天然气”：“72.872200”， “描述”：“测试 Desc1” } , { "title": "孟买", “纬度”：“18.964700”， “液化天然气”：“72.825800”， “描述”：“测试 Desc2” } , { "title": "浦那", “纬度”：“18.523600”， “液化天然气”：“73.847800”， “描述”：“测试 Desc3” } ]

如果我对数据进行硬编码，它就可以正常工作。但在这种情况下，它不能帮助我！

【问题讨论】：

标签： angularjs spring-mvc google-maps-api-3

【解决方案1】：

嗯...我让它工作了。我不应该做 JSON.stringify(data)。

【讨论】：