如何以SQL为数据库、借助JSP在Google Map上添加多个标记？

嘿，你已经搞定静态标记的部分啦！接下来要换成从SQL数据库动态拉取数据、用JSP渲染的话，其实分三步就能搞定，我给你详细说说：

1. 先准备SQL数据库表 #

首先你得有个存储地点信息的表，至少要包含纬度、经度，还可以加标记标题、详情这些字段。比如创建一个locations表：

CREATE TABLE locations (
    id INT PRIMARY KEY AUTO_INCREMENT,
    title VARCHAR(100) NOT NULL,
    lat DECIMAL(10, 8) NOT NULL,
    lng DECIMAL(11, 8) NOT NULL,
    description TEXT
);

然后往表里插一些测试数据，方便后续调试：

INSERT INTO locations (title, lat, lng, description) VALUES
('北京', 39.9042, 116.4074, '中国首都'),
('上海', 31.2304, 121.4737, '国际化大都市'),
('广州', 23.1291, 113.2644, '南方门户');

2. 用JSP从数据库读取数据并转成JSON #

接下来写一个JSP页面（比如getLocations.jsp），用来连接数据库、查询数据，然后把数据输出成JSON格式——这样前端JS就能直接解析使用：

<%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ page import="org.json.JSONArray" %>
<%@ page import="org.json.JSONObject" %>

<%
    // 数据库连接参数，记得换成你自己的实际信息
    String dbUrl = "jdbc:mysql://localhost:3306/your_database_name?useSSL=false&serverTimezone=UTC";
    String dbUser = "your_username";
    String dbPass = "your_password";
    
    JSONArray locationsArray = new JSONArray();
    
    try {
        // 加载MySQL JDBC驱动
        Class.forName("com.mysql.cj.jdbc.Driver");
        Connection conn = DriverManager.getConnection(dbUrl, dbUser, dbPass);
        
        String query = "SELECT title, lat, lng, description FROM locations";
        Statement stmt = conn.createStatement();
        ResultSet rs = stmt.executeQuery(query);
        
        // 把查询结果转成JSON数组
        while (rs.next()) {
            JSONObject location = new JSONObject();
            location.put("title", rs.getString("title"));
            location.put("lat", rs.getDouble("lat"));
            location.put("lng", rs.getDouble("lng"));
            location.put("description", rs.getString("description"));
            locationsArray.put(location);
        }
        
        // 关闭资源
        rs.close();
        stmt.close();
        conn.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
    
    // 输出JSON数据给前端
    out.print(locationsArray.toString());
    out.flush();
%>

小贴士：这里用到了org.json工具类来生成JSON，你需要把对应的jar包放到项目的WEB-INF/lib目录下。如果不想用第三方包，也可以手动拼接JSON字符串，但工具类会更省心、不易出错。

3. 修改前端Google Maps代码，动态加载标记 #

现在把你原来的静态标记代码改成从JSP获取数据，然后循环创建标记：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var delay = 100;
    var infowindow = new google.maps.InfoWindow();
    // 可以设置默认地图中心，或者后续根据数据动态调整
    var latlng = new google.maps.LatLng(30.0000, 110.0000); 
    var mapOptions = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // 初始化地图，要确保页面里有id为map的容器
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    // 用AJAX从JSP拉取数据
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'getLocations.jsp', true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            var locations = JSON.parse(xhr.responseText);
            // 循环遍历数据，创建每个标记
            locations.forEach(function(location) {
                var markerLatLng = new google.maps.LatLng(location.lat, location.lng);
                var marker = new google.maps.Marker({
                    position: markerLatLng,
                    map: map,
                    title: location.title
                });

                // 给标记绑定点击弹窗事件
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent('<h3>' + location.title + '</h3><p>' + location.description + '</p>');
                    infowindow.open(map, marker);
                });
            });
        }
    };
    xhr.send();
</script>
<!-- 页面里需要一个承载地图的div -->
<div id="map" style="width: 100%; height: 600px;"></div>

一些实用提醒 #

• 记得把MySQL的JDBC驱动jar包也放到WEB-INF/lib里，不然数据库连接会失败。
• 生产环境里别把数据库密码硬编码在JSP里，最好用配置文件或者连接池来管理，更安全。
• 可以给AJAX请求加个加载动画，提升用户等待体验。

内容的提问来源于stack exchange，提问作者Amit Gandole