2026/9/8 8:26:06
FEATURED · 精选文章 
简介基于PHP、MySQL与HTML的百度地图打点示例面向初学Web开发或需要快速实现地图标记功能的开发者演示了从MySQL读取经纬度数据、经PHP处理后交给百度地图API在地图上渲染标记的完整流程。压缩包共4个文件包含SQL建表与测试数据脚本、PHP数据接口、HTML展示页面及JavaScript辅助文件整体仅66KB结构精简可直接导入数据库并部署运行。目前已有720人学习下载。通过该示例可掌握PHP与MySQL交互的安全写法如预处理语句、百度地图BMap对象与BMap.Marker的调用方式以及前端接收动态数据并动态创建标记的思路。资源还涉及地理位置字段的索引设计适合作为基于位置服务LBSWeb应用的入门参考。 打开这个“PHPMYSQLHTML百度地图打点示例.rar”压缩包之前我先说个题外话。大多数找这类Demo的人并不是不会写PHP也不是不会建MySQL表而是卡在“数据从数据库出来之后到底怎么变成地图上一个一个的红点”这个环节上。这个压缩包解开之后其实东西不多一个SQL文件、一个PHP接口文件、一个HTML页面但就是这三样把一条完整的数据链路跑通了MySQL负责存坐标PHP负责把坐标吐给前端百度地图JavaScript API负责渲染和打点。说白了“打点”就是根据经纬度在地图上放标记最典型的场景是门店展示、设备位置管理、巡检打卡、物流轨迹回放这类LBS应用。这篇文章我不打算逐行翻译源码而是把这个示例背后真正值钱的东西拆给你看为什么数据库字段要那样设计、PHP接口返回什么格式最合适、百度地图API在循环打点的时候有哪些坑、以及我在实际部署中踩过的问题。适合刚写完增删改查、想碰地图功能的PHP开发者也适合做毕设或内部管理系统时需要“地图页”的同学。1. 整体思路先理清这个示例里的三层架构1.1 数据层、接口层、展示层各管什么先看这个Demo的文件构成典型的PHP时代三层结构数据层一个建表语句通常叫map_points或类似名字用来存点位名称、经纬度、地址描述。接口层一个PHP文件负责连接MySQL、查表、把结果转成JSON输出给前端。展示层一个HTML文件引入百度地图API用JavaScript请求PHP接口拿到数据后循环在地图上打点。为什么这个结构到现在还没过时因为它的职责边界很清楚。数据库里只管“存”PHP文件只管“取和转格式”HTML只管“画”。你以后想加一个点位直接往表里插数据页面刷新就出来了你想换地图服务商只需要改HTML那一层SQL和PHP完全不用动。这种松耦合的思路比把所有逻辑堆在一个文件里要健康得多。1.2 为什么用PHPMySQLHTML这个组合而不是前后端分离现在很多新项目一上来就是VueSpring Boot或者Next.js但对于“内部工具”“毕设项目”“临时管理后台”这类场景PHPMySQLHTML反而是最省事的方案。你不需要Node环境不需要构建工具不需要配跨域phpstudy或宝塔装好就能跑。尤其“打点”这个需求本质上就是一次“查数据库→输出JSON→前端渲染”的流程用不着引入一整套工程化体系。这个示例最大的价值就是告诉你哪怕不用框架用最原始的PHP数组配合json_encode也能干净利落地把后端数据喂给百度地图。先跑通这条路你以后就算换框架思路也是一模一样的。2. 数据库和PHP接口把坐标从MySQL里安全取出来2.1 建表时经纬度字段千万别用float这个示例的SQL文件里面建表语句值得细看。我这里写一个典型版本CREATE TABLE map_points ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(50) NOT NULL COMMENT 点位名称, address varchar(255) DEFAULT NULL COMMENT 详细地址, lng decimal(10,6) NOT NULL COMMENT 经度, lat decimal(10,6) NOT NULL COMMENT 纬度, create_time datetime DEFAULT NULL, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;经纬度用decimal(10,6)而不是float这是很多新手容易忽略的细节。decimal是精确类型能存到小数点后6位对应地图上大概0.1米的精度float是浮点型存储时会有误差当点位多了、坐标值大了之后误差可能累积到肉眼可见的程度。别小看这一个小数点打点位置偏出去几十米在门店导航这种场景里是致命的。2.2 写一个标准的点位查询接口PHP接口文件的核心逻辑不复杂但要注意的地方不少?php header(Content-Type: application/json; charsetutf-8); $mysqli new mysqli(localhost, root, root, map_demo); $mysqli-set_charset(utf8mb4); $result $mysqli-query(SELECT id, name, address, lng, lat FROM map_points); $points []; while ($row $result-fetch_assoc()) { $points[] [ name $row[name], address $row[address], lng floatval($row[lng]), lat floatval($row[lat]) ]; } echo json_encode($points, JSON_UNESCAPED_UNICODE);这里有两个细节。第一floatval一定要加因为从MySQL里取出来的decimal字段默认是字符串如果直接塞进JSON前端JavaScript拿到的是字符串而不是数字百度地图API的BMap.Point虽然能接受字符串但后续做坐标计算时很可能会出问题。第二JSON_UNESCAPED_UNICODE不加的话中文点位名称会变成\uXXXX格式的转义字符虽然JavaScript能解析但浏览器里直接看接口返回结果是乱的排查问题时不方便。2.3 PHP输出JSON时两个容易忽略的细节第一个是响应头。header(Content-Type: application/json; charsetutf-8);这行不做浏览器会按HTML去解析接口返回中文乱码和格式错乱都可能有。第二个是连接数据库时set_charset(utf8mb4)必须写。MySQL字符集设置不统一是最隐蔽的乱码来源——数据库表是utf8mb4连接字符集是latin1存进去中文能显示取出来就成了问号。还有一个兼容性提醒phpstudy或宝塔默认带的PHP版本往往偏高PHP 7.4或8.x老示例里经常出现的mysql_connect()函数在PHP 7.0之后已经删除了所以这个示例正确写法是mysqli或PDO。如果下载的源码还在用mysql_connect()必须改成mysqli_connect()才能在新环境跑起来。3. HTML地图页面从加载API到循环打点3.1 AK申请和JS API引入方式百度地图JavaScript API现在需要先在百度地图开放平台申请AK访问密钥申请的时候要填Referer白名单本地调试填localhost上线后改成你的域名。这一步卡住的人不少话说回来申请AK本身是免费的流程也很简单就是等审核稍微花点时间。引入方式一般是这样script srchttps://api.map.baidu.com/api?v3.0ak你的AK/script这里要注意src一定要用https://开头。早年很多示例写的是http://现在百度地图API已经全面要求HTTPS环境用HTTP引用会直接加载失败地图白屏。另外v3.0是API版本有些老教程用的v2.0两者的初始化方式基本一致但3.0对适配性更好建议直接用3.0。3.2 地图初始化与视口自适应页面里要有这么一段div idmap stylewidth:100%;height:600px;/div然后初始化var map new BMap.Map(map); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.enableScrollWheelZoom(true);centerAndZoom的第一参是起始中心点第二参是缩放级别数字越大越精细。这里建议先给一个默认城市中心点等所有点位加载完成后再用map.setViewport(points)自动调整视野范围把全部标记点框进去。这个API接收一个坐标点数组会自动计算合适的中心和缩放级别比手动指定坐标省事得多。3.3 循环打点的两个经典坑拿到接口返回的数据后循环打点是最容易出现bug的地方。第一个坑是闭包陷阱// 错误写法 for (var i 0; i data.length; i) { var marker new BMap.Marker(new BMap.Point(data[i].lng, data[i].lat)); marker.addEventListener(click, function() { alert(data[i].name); // 不管点哪个弹出的都是最后一个 }); map.addOverlay(marker); }这个问题源于JavaScript的var没有块级作用域循环结束之后变量i已经变成了data.length。解决办法很简单把var i改成let i或者用闭包包一层。这里我推荐用let写起来干净。第二个坑是BMap.Point的参数忘了转数字。MySQL里decimal取出来是字符串如果你在PHP侧忘了floatval前端拿到就是116.404这种字符串。JS里做加法没问题但BMap.Point对参数类型比较敏感有时候会定位错乱。所以PHP侧处理好类型转换前端就少很多麻烦。3.4 手机端定位与PC端的兼容差异这个示例虽然核心是打点但很多人接下来会想做“显示我当前位置”。这里提醒一下百度地图JavaScript API的geolocation在PC端和手机端表现差异很大。手机上访问的页面浏览器会询问定位权限用户同意之后才能拿到GPSPC端则是根据IP和WiFi信号定位精度可能差几百米甚至几公里。另外测试手机端定位时不要在微信内置浏览器里试——微信默认禁止网页调用定位权限必须在系统浏览器或App内嵌WebView里测。这也是为什么网上那么多人搜“不同手机的百度地图定位功能测试”因为这活确实麻烦。4. 整包跑通实录从解压到看到地图上的点4.1 环境准备与目录部署这个Demo跑起来的前提是有一个能跑PHP和MySQL的环境。如果你机器上什么环境都没有最快的方式是装一个phpstudy勾选Apache MySQL PHP三个组件启动后就是一个能用的LAMP环境。macOS上如果是M4芯片的新机器phpstudy老版本可能识别不了自带的PHP版本需要手动添加PHP 8.0的版本这个过程网上教程很多这里不展开。把压缩包解压之后整个目录丢进Web服务器根目录。phpstudy默认根目录是WWW宝塔是/www/wwwroot/你的站点目录。目录名建议不要带中文和空格避免一些莫名其妙的问题。4.2 按步骤操作导入SQL、改配置、开页面我把完整步骤列一下启动Apache和MySQL服务。打开phpMyAdmin新建一个数据库名字随意比如map_demo。选择这个数据库导入压缩包里带的.sql文件。用文本编辑器打开PHP接口文件把new mysqli(host, user, password, dbname)中的用户名、密码、库名改成你自己的。打开HTML文件把ak你的AK替换成你申请好的百度地图AK。浏览器访问http://localhost/你的目录名/xxx.html。不出意外的话你就能看到地图页面并且有几个红色标记点落在上面。点击标记会弹出点位名称和地址。整个过程从零到跑通熟练的话十分钟搞定。4.3 数据量变大之后怎么办示例里数据量小一条查询就把所有点位返回了。但如果你以后要打几百上千个点前端一次性渲染所有Marker会有性能压力地图滑动时会掉帧卡顿。这时候有两个优化方向。一个是后端分页或按视野区域查询前端拖动地图时重新请求接口百度地图有map.getBounds()方法可以拿到当前视野的经纬度范围。另一个是用海量点图层百度地图提供BMap.PointCollection用来渲染大量坐标点几百个普通Marker优化成这个之后流畅度会好很多。这个示例虽然没写这些但你心里先有个概念以后遇到卡顿知道往哪个方向查。5. 常见问题排查速查表与避坑心得5.1 问题速查表现象可能原因解决办法地图白屏控制台报错AK未申请或Referer白名单未加localhost检查AK和域名白名单改为HTTPS引入页面空白接口直接返回.json源码没装PHP环境或目录访问权限不对确认Apache已启动且能解析PHP文件打出来的点位置偏了几百米坐标系不一致GPS坐标需转成BD09用百度坐标转换API中文乱码页面、PHP连接、MySQL库字符集不一致页面用utf-8连接用utf8mb4库表也用utf8mb4点能显示但点击没反应闭包陷阱或事件绑定位置不对循环内用let声明遍历变量API加载慢或失败网络环境对百度域名访问受限检查网络确保能访问api.map.baidu.com5.2 我的三点核心心得这个示例我前后带过几个人一起看每次都会发现大家卡在同样的地方。第一AK和字符集这两个问题占掉了一半的排查时间。申请AK时白名单只写localhost千万别觉得“以后要上线再改”——先让它跑起来比什么都重要。字符集的事记住一条规则HTML文件meta写utf-8PHP连接数据库后执行set_charset(utf8mb4)MySQL表本身也统一用utf8mb4三处一致就不会乱码。第二经纬度坐标系的坑早晚会踩。如果点位数据来自手机GPS或别的地图软件拿到的是WGS84坐标或GCJ02坐标直接扔到百度地图上会偏一两百米。百度地图用的是BD09坐标系需要调用百度坐标转换API把坐标转过来再入库。这个示例用的是现成的百度坐标所以没有这个问题但你自己采集数据时一定要留意。第三调试这类页面时控制台是唯一的真理来源。点不出现、地图白屏第一时间按F12看Console和Network。尤其是Network看接口请求是否返回200返回的数据是不是完整JSON——光这一步就能排除掉一半的问题。最后再分享一个扩展思路这个打点示例改造成“用户可提交坐标”也不难后端加一个接收POST请求的PHP文件前端加一个点击地图获取经纬度的监听事件就能做成“地图选址”功能。很多门店入驻、设备报修的后台就是从这套最基础的打点逻辑长出来的。先跑通它后面抄近路的时候你才知道路在哪儿。本文还有配套的精品资源点击获取
PHP+MySQL+百度地图打点示例：从数据库到地图标记的完整数据链路解析
简介基于PHP、MySQL与HTML的百度地图打点示例面向初学Web开发或需要快速实现地图标记功能的开发者演示了从MySQL读取经纬度数据、经PHP处理后交给百度地图API在地图上渲染标记的完整流程。压缩包共4个文件包含SQL建表与测试数据脚本、PHP数据接口、HTML展示页面及JavaScript辅助文件整体仅66KB结构精简可直接导入数据库并部署运行。目前已有720人学习下载。通过该示例可掌握PHP与MySQL交互的安全写法如预处理语句、百度地图BMap对象与BMap.Marker的调用方式以及前端接收动态数据并动态创建标记的思路。资源还涉及地理位置字段的索引设计适合作为基于位置服务LBSWeb应用的入门参考。 打开这个“PHPMYSQLHTML百度地图打点示例.rar”压缩包之前我先说个题外话。大多数找这类Demo的人并不是不会写PHP也不是不会建MySQL表而是卡在“数据从数据库出来之后到底怎么变成地图上一个一个的红点”这个环节上。这个压缩包解开之后其实东西不多一个SQL文件、一个PHP接口文件、一个HTML页面但就是这三样把一条完整的数据链路跑通了MySQL负责存坐标PHP负责把坐标吐给前端百度地图JavaScript API负责渲染和打点。说白了“打点”就是根据经纬度在地图上放标记最典型的场景是门店展示、设备位置管理、巡检打卡、物流轨迹回放这类LBS应用。这篇文章我不打算逐行翻译源码而是把这个示例背后真正值钱的东西拆给你看为什么数据库字段要那样设计、PHP接口返回什么格式最合适、百度地图API在循环打点的时候有哪些坑、以及我在实际部署中踩过的问题。适合刚写完增删改查、想碰地图功能的PHP开发者也适合做毕设或内部管理系统时需要“地图页”的同学。1. 整体思路先理清这个示例里的三层架构1.1 数据层、接口层、展示层各管什么先看这个Demo的文件构成典型的PHP时代三层结构数据层一个建表语句通常叫map_points或类似名字用来存点位名称、经纬度、地址描述。接口层一个PHP文件负责连接MySQL、查表、把结果转成JSON输出给前端。展示层一个HTML文件引入百度地图API用JavaScript请求PHP接口拿到数据后循环在地图上打点。为什么这个结构到现在还没过时因为它的职责边界很清楚。数据库里只管“存”PHP文件只管“取和转格式”HTML只管“画”。你以后想加一个点位直接往表里插数据页面刷新就出来了你想换地图服务商只需要改HTML那一层SQL和PHP完全不用动。这种松耦合的思路比把所有逻辑堆在一个文件里要健康得多。1.2 为什么用PHPMySQLHTML这个组合而不是前后端分离现在很多新项目一上来就是VueSpring Boot或者Next.js但对于“内部工具”“毕设项目”“临时管理后台”这类场景PHPMySQLHTML反而是最省事的方案。你不需要Node环境不需要构建工具不需要配跨域phpstudy或宝塔装好就能跑。尤其“打点”这个需求本质上就是一次“查数据库→输出JSON→前端渲染”的流程用不着引入一整套工程化体系。这个示例最大的价值就是告诉你哪怕不用框架用最原始的PHP数组配合json_encode也能干净利落地把后端数据喂给百度地图。先跑通这条路你以后就算换框架思路也是一模一样的。2. 数据库和PHP接口把坐标从MySQL里安全取出来2.1 建表时经纬度字段千万别用float这个示例的SQL文件里面建表语句值得细看。我这里写一个典型版本CREATE TABLE map_points ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(50) NOT NULL COMMENT 点位名称, address varchar(255) DEFAULT NULL COMMENT 详细地址, lng decimal(10,6) NOT NULL COMMENT 经度, lat decimal(10,6) NOT NULL COMMENT 纬度, create_time datetime DEFAULT NULL, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;经纬度用decimal(10,6)而不是float这是很多新手容易忽略的细节。decimal是精确类型能存到小数点后6位对应地图上大概0.1米的精度float是浮点型存储时会有误差当点位多了、坐标值大了之后误差可能累积到肉眼可见的程度。别小看这一个小数点打点位置偏出去几十米在门店导航这种场景里是致命的。2.2 写一个标准的点位查询接口PHP接口文件的核心逻辑不复杂但要注意的地方不少?php header(Content-Type: application/json; charsetutf-8); $mysqli new mysqli(localhost, root, root, map_demo); $mysqli-set_charset(utf8mb4); $result $mysqli-query(SELECT id, name, address, lng, lat FROM map_points); $points []; while ($row $result-fetch_assoc()) { $points[] [ name $row[name], address $row[address], lng floatval($row[lng]), lat floatval($row[lat]) ]; } echo json_encode($points, JSON_UNESCAPED_UNICODE);这里有两个细节。第一floatval一定要加因为从MySQL里取出来的decimal字段默认是字符串如果直接塞进JSON前端JavaScript拿到的是字符串而不是数字百度地图API的BMap.Point虽然能接受字符串但后续做坐标计算时很可能会出问题。第二JSON_UNESCAPED_UNICODE不加的话中文点位名称会变成\uXXXX格式的转义字符虽然JavaScript能解析但浏览器里直接看接口返回结果是乱的排查问题时不方便。2.3 PHP输出JSON时两个容易忽略的细节第一个是响应头。header(Content-Type: application/json; charsetutf-8);这行不做浏览器会按HTML去解析接口返回中文乱码和格式错乱都可能有。第二个是连接数据库时set_charset(utf8mb4)必须写。MySQL字符集设置不统一是最隐蔽的乱码来源——数据库表是utf8mb4连接字符集是latin1存进去中文能显示取出来就成了问号。还有一个兼容性提醒phpstudy或宝塔默认带的PHP版本往往偏高PHP 7.4或8.x老示例里经常出现的mysql_connect()函数在PHP 7.0之后已经删除了所以这个示例正确写法是mysqli或PDO。如果下载的源码还在用mysql_connect()必须改成mysqli_connect()才能在新环境跑起来。3. HTML地图页面从加载API到循环打点3.1 AK申请和JS API引入方式百度地图JavaScript API现在需要先在百度地图开放平台申请AK访问密钥申请的时候要填Referer白名单本地调试填localhost上线后改成你的域名。这一步卡住的人不少话说回来申请AK本身是免费的流程也很简单就是等审核稍微花点时间。引入方式一般是这样script srchttps://api.map.baidu.com/api?v3.0ak你的AK/script这里要注意src一定要用https://开头。早年很多示例写的是http://现在百度地图API已经全面要求HTTPS环境用HTTP引用会直接加载失败地图白屏。另外v3.0是API版本有些老教程用的v2.0两者的初始化方式基本一致但3.0对适配性更好建议直接用3.0。3.2 地图初始化与视口自适应页面里要有这么一段div idmap stylewidth:100%;height:600px;/div然后初始化var map new BMap.Map(map); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.enableScrollWheelZoom(true);centerAndZoom的第一参是起始中心点第二参是缩放级别数字越大越精细。这里建议先给一个默认城市中心点等所有点位加载完成后再用map.setViewport(points)自动调整视野范围把全部标记点框进去。这个API接收一个坐标点数组会自动计算合适的中心和缩放级别比手动指定坐标省事得多。3.3 循环打点的两个经典坑拿到接口返回的数据后循环打点是最容易出现bug的地方。第一个坑是闭包陷阱// 错误写法 for (var i 0; i data.length; i) { var marker new BMap.Marker(new BMap.Point(data[i].lng, data[i].lat)); marker.addEventListener(click, function() { alert(data[i].name); // 不管点哪个弹出的都是最后一个 }); map.addOverlay(marker); }这个问题源于JavaScript的var没有块级作用域循环结束之后变量i已经变成了data.length。解决办法很简单把var i改成let i或者用闭包包一层。这里我推荐用let写起来干净。第二个坑是BMap.Point的参数忘了转数字。MySQL里decimal取出来是字符串如果你在PHP侧忘了floatval前端拿到就是116.404这种字符串。JS里做加法没问题但BMap.Point对参数类型比较敏感有时候会定位错乱。所以PHP侧处理好类型转换前端就少很多麻烦。3.4 手机端定位与PC端的兼容差异这个示例虽然核心是打点但很多人接下来会想做“显示我当前位置”。这里提醒一下百度地图JavaScript API的geolocation在PC端和手机端表现差异很大。手机上访问的页面浏览器会询问定位权限用户同意之后才能拿到GPSPC端则是根据IP和WiFi信号定位精度可能差几百米甚至几公里。另外测试手机端定位时不要在微信内置浏览器里试——微信默认禁止网页调用定位权限必须在系统浏览器或App内嵌WebView里测。这也是为什么网上那么多人搜“不同手机的百度地图定位功能测试”因为这活确实麻烦。4. 整包跑通实录从解压到看到地图上的点4.1 环境准备与目录部署这个Demo跑起来的前提是有一个能跑PHP和MySQL的环境。如果你机器上什么环境都没有最快的方式是装一个phpstudy勾选Apache MySQL PHP三个组件启动后就是一个能用的LAMP环境。macOS上如果是M4芯片的新机器phpstudy老版本可能识别不了自带的PHP版本需要手动添加PHP 8.0的版本这个过程网上教程很多这里不展开。把压缩包解压之后整个目录丢进Web服务器根目录。phpstudy默认根目录是WWW宝塔是/www/wwwroot/你的站点目录。目录名建议不要带中文和空格避免一些莫名其妙的问题。4.2 按步骤操作导入SQL、改配置、开页面我把完整步骤列一下启动Apache和MySQL服务。打开phpMyAdmin新建一个数据库名字随意比如map_demo。选择这个数据库导入压缩包里带的.sql文件。用文本编辑器打开PHP接口文件把new mysqli(host, user, password, dbname)中的用户名、密码、库名改成你自己的。打开HTML文件把ak你的AK替换成你申请好的百度地图AK。浏览器访问http://localhost/你的目录名/xxx.html。不出意外的话你就能看到地图页面并且有几个红色标记点落在上面。点击标记会弹出点位名称和地址。整个过程从零到跑通熟练的话十分钟搞定。4.3 数据量变大之后怎么办示例里数据量小一条查询就把所有点位返回了。但如果你以后要打几百上千个点前端一次性渲染所有Marker会有性能压力地图滑动时会掉帧卡顿。这时候有两个优化方向。一个是后端分页或按视野区域查询前端拖动地图时重新请求接口百度地图有map.getBounds()方法可以拿到当前视野的经纬度范围。另一个是用海量点图层百度地图提供BMap.PointCollection用来渲染大量坐标点几百个普通Marker优化成这个之后流畅度会好很多。这个示例虽然没写这些但你心里先有个概念以后遇到卡顿知道往哪个方向查。5. 常见问题排查速查表与避坑心得5.1 问题速查表现象可能原因解决办法地图白屏控制台报错AK未申请或Referer白名单未加localhost检查AK和域名白名单改为HTTPS引入页面空白接口直接返回.json源码没装PHP环境或目录访问权限不对确认Apache已启动且能解析PHP文件打出来的点位置偏了几百米坐标系不一致GPS坐标需转成BD09用百度坐标转换API中文乱码页面、PHP连接、MySQL库字符集不一致页面用utf-8连接用utf8mb4库表也用utf8mb4点能显示但点击没反应闭包陷阱或事件绑定位置不对循环内用let声明遍历变量API加载慢或失败网络环境对百度域名访问受限检查网络确保能访问api.map.baidu.com5.2 我的三点核心心得这个示例我前后带过几个人一起看每次都会发现大家卡在同样的地方。第一AK和字符集这两个问题占掉了一半的排查时间。申请AK时白名单只写localhost千万别觉得“以后要上线再改”——先让它跑起来比什么都重要。字符集的事记住一条规则HTML文件meta写utf-8PHP连接数据库后执行set_charset(utf8mb4)MySQL表本身也统一用utf8mb4三处一致就不会乱码。第二经纬度坐标系的坑早晚会踩。如果点位数据来自手机GPS或别的地图软件拿到的是WGS84坐标或GCJ02坐标直接扔到百度地图上会偏一两百米。百度地图用的是BD09坐标系需要调用百度坐标转换API把坐标转过来再入库。这个示例用的是现成的百度坐标所以没有这个问题但你自己采集数据时一定要留意。第三调试这类页面时控制台是唯一的真理来源。点不出现、地图白屏第一时间按F12看Console和Network。尤其是Network看接口请求是否返回200返回的数据是不是完整JSON——光这一步就能排除掉一半的问题。最后再分享一个扩展思路这个打点示例改造成“用户可提交坐标”也不难后端加一个接收POST请求的PHP文件前端加一个点击地图获取经纬度的监听事件就能做成“地图选址”功能。很多门店入驻、设备报修的后台就是从这套最基础的打点逻辑长出来的。先跑通它后面抄近路的时候你才知道路在哪儿。本文还有配套的精品资源点击获取 
