Question

我一直致力于该应用程序，用户可以使用该应用程序将他的个人资料中的访问过的城市/国家列为列表，并且这些地方也应该在地图上标记。我尝试使用谷歌地图API，但无论我在地图上看不到我设置标记的地方。我正在为我的项目使用JSP和Spring框架。如果你帮我找错了，我将不胜感激！

这是用户页面代码：

<%@page session="false"%>
<%@ taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>${title}</title>
    <jsp:include page="header.jsp"/>
    <script
        src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyDxS8WSvbLkzJPrH2TVqfVspGs4QgSLWy8">
    </script>
    <script>
    var map;
    function initialize() {
      var mapOptions = {
        zoom: 1,
        center: new google.maps.LatLng(48.295637, 26.6949621)
      };

      // Display a map on the page
      map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

      // Multiple Markers
      var markers = [
            ['Kyiv, Ukraine', 50.401699,30.252508],
            ['Lviv, Ukraine', 49.8326679,23.9421957]
      ];


      // Loop through our array of markers & place each one on the map  
        for( i = 0; i < markers.length; i++ ) {
            var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
            bounds.extend(position);
            marker = new google.maps.Marker({
                position: position,
                map: map,
                title: markers[i][0]
            });

            // Automatically center the map fitting all markers on the screen
            map.fitBounds(bounds);
        }

     // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
            this.setZoom(14);
            google.maps.event.removeListener(boundsListener);
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <jsp:include page="_menu.jsp" />

    <h1><c:forEach items="${nsur}" var="item" varStatus="loop">
        ${item}
        ${loop.last ? '' : ''}
    </c:forEach></h1>
    <p>${summary} <br> from ${residence}</p>

    <h2>
        <c:forEach items="${countriesCount}" var="item">
            ${item}
        </c:forEach> visited countries: 
    </h2>

    <c:forEach items="${countries}" var="item" varStatus="loop">
        ${item}
        ${loop.last ? '' : ', '}
    </c:forEach>

    <h2>
    <c:forEach items="${citiesCount}" var="item">
        ${item}
    </c:forEach> visited cities: 
        </h2>

    <c:forEach items="${cities}" var="item" varStatus="loop">
        ${item}
        ${loop.last ? '' : ', '}
    </c:forEach>

    <br/><br/><br/>
    <div id="map-canvas" style="height:300px; width:500px"></div>
    <jsp:include page="footer.jsp"/> 
</body>
</html>

Answer 1

首先，在for循环之前定义bounds变量：

var bounds = new google.maps.LatLngBounds();

并删除或更改boundsListener中的this.setZoom(14)，否则，由于缩放范围，标记在初始化屏幕中不可见。

var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
   //this.setZoom(14)
    google.maps.event.removeListener(boundsListener);
});

使用JSP在Google Map上使用多个标记

1 个答案: