js 调用百度地图api并在地图上进行打点添加标注


Posted in Javascript onMay 13, 2014

最近要做一个网页,具体内容是:上边有一个标题,下边分成两块,左边是地图。并且地图上有两个点,点击两个点有相应的提示信息,显示数据库里最新的两条数据信息。右边是一些文字说明。本人刚开始学习,做的也不是很好

总体效果如下所示:

js 调用百度地图api并在地图上进行打点添加标注 

首先新建map.php文件,代码如下

<!DOCTYPE html> 
<?php 
/* 
创建与数据库的连接 
*/ 
$conn=mysql_connect("","","") or die("can not connect to server"); 
mysql_select_db("hdm0410292_db",$conn); 
mysql_query("set names utf8"); 
//选择出两辆车插入的最新数据,并将两条语句存在数组里 
$sql0="select * from car_info where carID='20140508'order by id desc limit 1"; 
$sql1="select * from car_info where carID= '20140510' order by id desc limit 1"; 
$sql=array($sql0,$sql1); 
?> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>车联网信息展示</title> 
<style type="text/css"> 
html{ 
height:99%} 
body{ 
height:99.9%; 
width:99%; 
font-family:楷体_GB2312; 
font-size:25px} 
#container {height: 100%} 
</style> 
<script type="text/javascript" 
src="http://api.map.baidu.com/api?v=1.5&ak=你申请的秘钥"></script> 
</head> 
<body BGCOLOR="#CAFFFF"> 
<div id="container"></div> 
<script type="text/javascript"> var lon_center = 0; 
var lat_center = 0; 
var map = new BMap.Map("container"); 
<!-- 添加标注的函数,参数包括,点坐标,车ID,以及数据库里的其他信息--> 
function addMarker(point,index,s){ 
var fIcon = new BMap.Icon("car1.png", new BMap.Size(55, 43), { 
}); 
var sIcon = new BMap.Icon("car2.png", new BMap.Size(55, 43), { 
}); 
var myIcon = ""; 
// 创建标注对象并添加到地图 
if(index == 20140508) 
myIcon=fIcon; 
else 
myIcon=sIcon; 
var marker = new BMap.Marker(point, {icon: myIcon}); 
map.addOverlay(marker); 
marker.addEventListener("click",function(){ 
var opts={width:450,height:500,title:"详细信息"}; 
var infoWindow = new BMap.InfoWindow(s,opts); 
map.openInfoWindow(infoWindow,point); 
}); 
} 
<?php 
//遍历数组里的两条sql语句 
foreach ($sql as &$value) { 
$query=mysql_query($value); 
$row=mysql_fetch_array($query); 
?> 
var lon= <?php echo $row[longitude] ?>; 
var lat= <?php echo $row[latitude] ?>; 
<!-- 计算两个点的中心点,并将其作为地图初始化时的中心位置--> 
lon_center += lon; 
lat_center += lat; 
var id=<?php echo $row[id] ?>; 
var info="<br/>"+"carID: " + "<?php echo $row[carID]?>" + " <br/> " + 
"经度: " + "<?php echo $row[longitude]?>" + " <br/> " + 
"纬度: " + "<?php echo $row[latitude]?>" + " <br/> " + 
"速度: " + "<?php echo $row[speed]?>" + "Km/h" + " <br/> " + 
"加速度: " + "<?php echo $row[acceleration]?>" + " <br/> " + 
"方向: " + "<?php echo $row[direction]?>" + " <br/> " + 
"油量: " + "<?php echo $row[oil]?>" + "<br/>" + 
"地址: " + "<?php echo $row[street]?>"; 
var point = new BMap.Point(lon, lat); 
addMarker(point,<?php echo $row[carID] ?>,info); 
<?php 
} 
?> 
<!-- 计算两个点的中心点,并将其作为地图初始化时的中心位置--> 
var center = new BMap.Point(lon_center/2,lat_center/2); 
map.centerAndZoom(center, 17); 
map.enableScrollWheelZoom(); 
</script> 
</body> 
</html>

map.php文件主要是显示数据库里的两条信息,将这两条信息在地图上的相应的位置显示出来。

然后再建title.php,这个很简单,就是显示一个标题

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>信息展示</title> 
<style type="text/css"> html{ 
height:100%;} 
body{ 
height:10%; 
width:99%; 
font-family:楷体_GB2312; 
font-size:25px} 
</style> 
</head> 
<body BGCOLOR="#CAFFFF"> 
<H1 ALIGN="CENTER"> 信息展示 </H1> 
</body> 
</html>

然后在建立详细信息说明模块info.php
<!DOCTYPE html> 
<?php $conn=mysql_connect("","","") or die("can not connect to server"); 
mysql_select_db("",$conn); 
mysql_query("set names utf8"); 
$sql0="select * from car_info where carID='20140508'order by id desc limit 1"; 
$sql1="select * from car_info where carID= '20140510' order by id desc limit 1"; 
$sql=array($sql0,$sql1); 
function htmtocode($content){ 
$content=str_replace("\n", "<br>", str_replace(" ", " ", $content)); 
return $content; 
} 
?> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>信息展示</title> 
<style type="text/css"> 
html{ 
height:90%;} 
body{ 
height:90%; 
width:90%; 
font-family:楷体_GB2312; 
font-size:20px} 
</style> 
</head> 
<body BGCOLOR="#CAFFFF"> 
<H1 ALIGN="CENTER"> 信息展示 </H1> 
<?php foreach ($sql as &$value) { 
$query=mysql_query($value); 
$row=mysql_fetch_array($query); 
?> 
<H2>car <?php echo $row[carID]?> 详细信息</H2> 
<HR> 
CAR ID: <?php echo $row[carID]?><br> 
经度: <?php echo $row[longitude]?> <br> 
纬度: <?php echo $row[latitude]?> <br> 
速度: <?php echo $row[speed]?> Km/h <br> 
加速度: <?php echo $row[acceleration]?><br> 
方向: <?php echo $row[direction]?> <br> 
油量: <?php echo $row[oil]?><br> 
地址: <?php echo $row[street]?><br> 
时间: <?php echo $row[date]?> 
<?php } ?> 
</body> 
</html>

最后在写一个vanet.php文件,该文件主要是调用前三个文件
<!DOCTYPE html> <html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>信息展示</title> 
</head> 
<FRAMESET ROWS="10%,90%" FRAMEBORDER=1 > 
<FRAME SRC="title.php"></FRAME> 
<FRAMESET COLS="70%,30%"> 
<FRAME SRC="map.php"> 
<FRAME SRC="info.php"> 
</FRAMESET> 
</FRAMESET> 
</html>
Javascript 相关文章推荐
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
javascript基础知识
Jun 07 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 #Javascript
js浏览器本地存储store.js介绍及应用
May 13 #Javascript
js 获取时间间隔实现代码
May 12 #Javascript
Jquery跳到页面指定位置的方法
May 12 #Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 #Javascript
JS版的date函数(和PHP的date函数一样)
May 12 #Javascript
七个很有意思的PHP函数
May 12 #Javascript
You might like
把PHP安装为Apache DSO
2006/10/09 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
详解Node 定时器
2018/02/26 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
js实现小星星游戏
2020/03/23 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
法国时尚童装网站:Melijoe
2016/08/10 全球购物
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
大学生实习感言
2014/01/16 职场文书
出纳担保书范文
2014/04/02 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
公民授权委托书
2014/10/15 职场文书
新郎婚礼答谢词
2015/01/04 职场文书