Spring MVC-從數據庫向Google Map添加多個標記

Question

我正在嘗試在數據庫中的地圖上顯示多個標記。 我查看了其他示例，並在服務器上使用了Google的示例，但似乎無法使其與數據庫信息一起使用。

這是我到目前為止的內容：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
</head>
<body>
<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
    url="jdbc:mysql://localhost/project" user="root" password="root" />

<sql:query dataSource="${snapshot}" var="result">
SELECT * from House;
</sql:query>

<div id="map"></div>
<script type="text/javascript">
    var markerLat, markerLong;
    markerLat = [
        <c:forEach var="s" items="${result.rows}">
            <c:out value="${s.lat}"/>,
        </c:forEach>;
    markerLong = [
      <c:forEach var="s" items="${result.rows}">
          <c:out value="${s.lng}"/>,
      </c:forEach>;

    function initialize() {
        var map;
        var initlatlng = new google.maps.LatLng(markerLat[0],markerLong[0]);
        var mapOptions = {
            zoom: 6,
            center: new google.maps.LatLng(36,5),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map'), mapOptions);
        var infowindow = new google.maps.InfoWindow(); 
        var marker, i;

        for (i = 0; i < markerLat.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(markerLat[i], markerLong[i]),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(markers[i]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBiKZEYI58kG67y8dT50HG4ByxMmWHbwXA"
    async defer></script>

它給我一個錯誤，提示“未捕獲的ReferenceError：未定義google”

誰能告訴我我在做錯什么，還是讓我看看從數據庫向地圖添加多個標記的其他示例？

Answer 1

這段代碼正在異步加載Google Maps javascript API：

<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBiKZEYI58kG67y8dT50HG4ByxMmWHbwXA"
async defer></script>

您應該：

A.同步加載Google Maps Javascript API：

從腳本包括中刪除“異步延遲”
在使用google.maps命名空間之前，先加載Google Maps Javascript API。

B.異步加載它，並在加載后使用callback參數執行依賴於它的代碼：

刪除此行google.maps.event.addDomListener(window, 'load', initialize);
將API包含更改為：

<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBiKZEYI58kG67y8dT50HG4ByxMmWHbwXA
&callback=initialize"
async defer></script>

Spring MVC-從數據庫向Google Map添加多個標記

問題描述

1 個解決方案

解決方案1
0 已采納 2016-01-19 15:36:38

Spring MVC-從數據庫向Google Map添加多個標記

問題描述

1 個解決方案

解決方案1 0 已采納 2016-01-19 15:36:38

解決方案1
0 已采納 2016-01-19 15:36:38