如何从数据库提取经纬度数据传入JavaScript代码供地图API调用

方案1：服务端模板直接注入（页面初始化即加载地图时推荐使用） #

这种方案适合使用PHP、Python Django/Flask、Java JSP、Node.js EJS等服务端模板渲染页面的场景，直接在服务端查询数据库后，将经纬度数据注入到前端HTML的JS代码中：

• 第一步：服务端查询数据库，将拿到的中心点经纬度、折点经纬度数据转成JSON格式，随页面渲染传递到前端模板
  示例（以Node.js Express + EJS模板为例）：

// 服务端逻辑
const mapData = await db.query('SELECT lat,lng FROM map_points WHERE scene_id = ?', [你的场景ID])
const centerPoint = mapData[0] // 地图中心点数据
const polylinePoints = mapData.slice(1) // 折线点集合
// 渲染页面时传递JSON序列化后的数据
res.render('地图页面模板路径', {
  center: JSON.stringify(centerPoint),
  polyline: JSON.stringify(polylinePoints)
})

• 第二步：前端模板中替换原有JS代码即可：

jsMaps.loader(function (){
    // 直接读取服务端注入的经纬度数据
    const mapCenter = <%- center %>
    const polyLineData = <%- polyline %>
    var tiles = new jsMaps.Native.Tiles();
    var map = jsMaps.api.init(
            '#map',
            'native',
            {
                center: {
                    latitude: mapCenter.lat,
                    longitude: mapCenter.lng
                },
                zoom: 14,
                mouse_scroll: true,
                zoom_control: true,
                map_type: true
            },tiles
    );
    // 直接使用注入的折线点集合
    var polyLine1 = polyLineData;
});

其他模板语法对应写法：

• PHP：<?php echo json_encode($center); ?>
• Python Flask Jinja2：{{ center|safe }}

方案2：前端异步接口拉取（动态加载地图场景推荐使用） #

适合需要用户交互后才加载地图、或者需要动态切换地图数据的场景，通过AJAX请求从服务端接口拉取经纬度数据：

• 第一步：服务端开发接口，返回JSON格式的经纬度数据，返回结构示例：

{
  "code": 200,
  "data": {
    "center": {"lat": 39.9042, "lng": 116.4074},
    "polyline": [
      {"lat": 39.9042, "lng": 116.4074},
      {"lat": 39.9142, "lng": 116.4174},
      {"lat": 39.9242, "lng": 116.4274},
      {"lat": 39.9342, "lng": 116.4374}
    ]
  }
}

• 第二步：前端JS发送请求拉取数据后再初始化地图：

// 发送请求获取经纬度数据
fetch('/你的服务端接口路径')
  .then(response => response.json())
  .then(result => {
    const { center, polyline } = result.data
    jsMaps.loader(function (){
        var tiles = new jsMaps.Native.Tiles();
        var map = jsMaps.api.init(
                '#map',
                'native',
                {
                    center: {
                        latitude: center.lat,
                        longitude: center.lng
                    },
                    zoom: 14,
                    mouse_scroll: true,
                    zoom_control: true,
                    map_type: true
                },tiles
        );
        var polyLine1 = polyline;
    });
})

注意事项 #

• 数据返回前需做格式校验，确保经纬度为合法数字类型，避免传入地图API时报错
• 若折线点数据量较大，可先做数据压缩再传输，降低请求体积

内容的提问来源于stack exchange，提问作者Redynan frozt