简介：
从本地数据库mysql中，读取经纬度数据，通过百度API在地图上打点显示(最简示例)。本例在2020年进行了版本升级，有用户最近反映代码不能正常执行了，于是我猜想可能是语法升级了，验证后发现确实语法升级了，毕竟第一版写在2017年，于是对运行环境和语法做了更新。
一.开发环境
运行环境：PHPStudy（小皮）V8.1
该工具集成了Mysql+Apache+PHP，学习开发用非常方便。PHP版本是7.3.4。语法跟PHP5有了改变。
apache服务器下载地址：https://www.xp.cn/download.html
根据系统位数选择32或64安装即可。
如何使用PHPStudy：
1.下载安装
安装路径不要有中文文件夹，也不要有空格，不要安装在Program Files下，因为有空格会无法启动服务。
2.只需启动apache和mysql
3.测试Apache tomcat是否启动成功
单击网站选项卡，查看网站域名和端口和运行状态。并在浏览器测试域名，是否成功访问。
在浏览器输入：localhost，出现以下页面，表示成功。
4.查看mysql默认的数据库配置信息。
PHPStudy数据库配置默认如下：
| host(地址) | localhost |
| user（用户名） | root |
| password（密码） | root |
注意：本例代码中的数据库配置也是上述配置，所以如果你的mysql用户名密码于此一致，则不用修改PHP代码就可以运行。
二.代码实现
本项目全部源码下载：点击下载
1.导入Mysql数据库脚本
使用下方提供的脚本，在Navicat等mysql客户端中，执行以下脚本，即可自动创建数据库和数据表以及假数据。本脚本创建的数据库信息如下：
| 数据库名 | map |
| 表名 | wifi_state |
将下面脚本整体复制到Navicat中，运行即可自动创建数据库和表：
-- phpMyAdmin SQL Dump
-- version phpStudy 2014
-- http://www.phpmyadmin.net
--
-- 主机: localhost
-- 生成日期: 2017 年 03 月 15 日 08:37
-- 服务器版本: 5.5.53
-- PHP 版本: 5.4.45
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- 数据库: `map`
--
CREATE DATABASE `map` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `map`;
-- --------------------------------------------------------
--
-- 表的结构 `wifi_state`
--
CREATE TABLE IF NOT EXISTS `wifi_state` (
`id` int(10) NOT NULL,
`time` date NOT NULL,
`lat` varchar(123) NOT NULL,
`lon` varchar(123) NOT NULL,
`name` varchar(123) NOT NULL,
`encyptiontype` varchar(123) NOT NULL,
`rssi` varchar(123) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
--
-- 转存表中的数据 `wifi_state`
--
INSERT INTO `wifi_state` (`id`, `time`, `lat`, `lon`, `name`, `encyptiontype`, `rssi`) VALUES
(1, '2017-03-08', '39.915', '116.408', 'netgear41', 'unlocked', '0'),
(1, '2017-03-08', '39.910', '116.401', 'netgear41', 'unlocked', '0'),
(1, '2017-03-08', '39.917', '116.406', 'netgear41', 'unlocked', '0'),
(1, '2017-03-08', '39.912', '116.408', 'netgear41', 'unlocked', '0'),
(1, '2017-03-08', '39.910', '116.407', 'netgear41', 'unlocked', '0');
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
2.项目结构
项目文件夹名为map，然后放入主页bm.html和脚本setPoint.php，在放入依赖的js文件夹，js文件夹放入jquery-1.6.2.js。
js文件夹放入jquery-1.6.2.js。
3. 主页面：bm.html 代码
此页面为本程序主页面，正式使用时需要将此处替换为你的百度秘钥，为了方便，我将自己注册的百度地图秘钥放在源码中，方便你直接运行，但正式使用时，请修改下面一行秘钥：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申请的百度地图密钥"></script如果你需要Debug调试此程序，需要在浏览器中按F12键，并在下面一行打断点即可：
return eval('(' + str + ')');bm.html 完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
#l-map {
height: 100%;
width: 78%;
float: left;
border-right: 2px solid #bcbcbc;
}
#r-result {
height: 100%;
width: 20%;
float: left;
}
</style>
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lCSq5ICVsw3GXL0s5cPoTXBiGLKDRnI1"></script
<title>百度地图--读取数据库中的坐标打点示例</title>
</head>
<body>
<!--id必须为：allmap-->
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
//将字符串转为JSon
function str2JSON(str) {
str = $.trim(str);
if (str != "") {
// 浏览器F12调试，在此处打断点，看str中的值，是否是数据库中的值。若有错误，str中会有提示
return eval('(' + str + ')');
} else {
return Object();
}
}
//通过jquery的Ajax获取Mysql中的经纬度
function get_trj(fn) {
var url = "setPoint.php"
$.get(url, {
method: 'get_trj'
}, function (result) {//result为php返回的JSON字符串
result = str2JSON(result);
// alert(result);
fn(result); //这是回调函数，调用下面的 trj_callback 变量中方法，不懂得话，百度JQuery Ajax
});
}
// 百度地图API功能，参数"allmap"无需改动
var map = new BMap.Map("allmap");
//设置地图中心坐标是天安门
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 编写自定义函数,创建标注
function addMarker(point) {
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
var trj_callback = function (pts_array) {
//将获取的array转换为BMap.Point
var sContentArray = Array();
var infoWindowArray = Array();
for (var i = 0; i < pts_array.length; i++) {
//这是在地图上打点，往里面传个经纬度即可，自己完善下循环就可以了
addMarker(new BMap.Point(pts_array[i][0], pts_array[i][1]));
}
}
//这是程序的入口，调用，
get_trj(trj_callback);
</script>
jquery-1.6.2.js
依赖的脚本，可以从网上下载，为了避免大家使用的不一致，所以将JQuery同版本的免费下载地址发布在此。
下载地址：https://download.csdn.net/download/x541211190/12425361
4. 服务器脚本： setPoint.php 代码
此脚本实现了连接mysql，并读取数据库，将数据库结果返回。你需要根据自己的mysql情况修改数据配置或者查询sql。初次运行只需要确定下面的数据配置正确即可：
$db_config = array(
'host' => "localhost",
'user' => "root",
'password' => "root",
'database' => "map"setPoint.php 完整代码：
<?php
/**
* 数据库配置信息
*/
$db_config = array(
'host' => "localhost",
'user' => "root",
'password' => "root",
'database' => "map"
);
/**
* flush outputbuffer并将其输出到客户端，可实现即时输出
* @param unknown_type $str
*/
function qk_echo($str) {
echo $str;
ob_flush();//刷新缓存
flush();
}
/**
* Helper 类，用于接收http请求并对外提供服务
*/
class Helper{
private $db_config;
public function __construct($db_config){
$this->db_config=$db_config;
}
/**
* 对外提供api接口
* @param method api名称
*/
public function do_api(){
$method=$_GET['method'];
$result="";
switch ($method) {
case 'get_trj':
# code...
$result=$this->get_trj();
break;
default:
# code...
break;
}
qk_echo($result); //Response
}
/**
* 获取轨迹信息，以字符串的形式返回
*/
public function get_trj(){
//初始化数据库连接
$conn=mysqli_connect($this->db_config['host'], $this->db_config['user'],$this->db_config['password']);
//选择数据库
@mysqli_select_db($conn,$this->db_config['database']);
//$table_name="trajectory";
//$table_name="ap_max";
$table_name="wifi_state";
//$sql="select id,lng,lat,ssid,rssiMax,rssiMin,wifi_mac,testPointNum,wifi_mac_used from ".$table_name;
//$sql="select id,lon,lat,time,encyptiontype,rssi,name from ".$table_name;
$sql="select id,lon,lat,time,encyptiontype,rssi,name from wifi_state";
// 执行sql查询
$rs=mysqli_query($conn,$sql);
if (!$rs) {
printf("Error: %s\n", mysqli_error($conn));
exit();
}
$result=array();
while($row=mysqli_fetch_row($rs)){
//加入经纬度信息
//echo $row[1];
$result[]=array($row[1],$row[2],$row[3],$row[4],$row[5],$row[6]);
//$result[]=array($row[1],$row[2],$row[3],$row[4]);
}
//关闭数据集
@mysqli_close($rs);
//返回结果
return json_encode($result);
}
}
/*
//测试连接数据库用，debug时，连接成功后，注释掉
$link=mysqli_connect("localhost","root","root");
if(!$link) echo "连接错误，数据库host或用户名或密码不对";
else echo "连接成功";
*/
$helper=new Helper($db_config);
$helper->do_api();
$helper->get_trj();5.将项目部署到apache服务器上
找到apache Tomcat的发布目录，将项目复制到这个文件夹（WWW文件夹）中，点击重启Apache服务
6.浏览器测试
输入访问地址：localhost/map/bm.html
地图上显示出5个点，说明打点成功。
如果没有点，只有地图，说明从数据库中读取的点数据步骤出错。按F12进入调试模式，在图中标记处打断点。看str变量中的内容提示，根据提示修改问题。 可能出现的问题，无非是数据库的用户名、密码、地址不正确之类的。其他暂无发现，另外，再次提醒，本例中的PHP代码升级到了PHP7.3.4，如无法运行，看看断点中str中，是否有语法报错或语法警告，我测试后，已经没有任何语法错误和警告了。
结束语
本代码第一版写在三年前，三年中有不少读者咨询其中的问题，这几年也没有对代码进行维护升级，给很多用新版本PHP的读者带来了不便，所以2020年5月，重新调试和维护了本程序，希望能帮到更多的读者。喜欢本文请收藏和点赞，有问题可以在下方的评论区中留言，我会为大家解答。
本项目全部源码下载：点击下载
1260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
