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>

你应该：

一个。同步加载Google Maps Javascript API：

删除＆＃34; async defer＆＃34;从脚本中包括
在使用google.maps命名空间之前加载Google Maps Javascript API。

B中。异步加载并使用callback参数执行加载后依赖于它的代码：

删除此行google.maps.event.addDomListener(window, 'load', initialize);
将API include更改为：

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

Spring MVC - 从数据库向Google Map添加多个标记

1 个答案: