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 相关文章推荐
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
js日期、星座的级联显示代码
Jan 23 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 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读写文件的方法(生成HTML)
2006/11/27 PHP
DISCUZ 分页代码
2007/01/02 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
JS 对象介绍
2010/01/20 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
pyenv命令管理多个Python版本
2017/03/26 Python
Python微信库:itchat的用法详解
2017/08/14 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
浅析python redis的连接及相关操作
2019/11/07 Python
python plotly画柱状图代码实例
2019/12/13 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
企业管理专业个人求职信范文
2013/09/24 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
便利店投资创业计划书
2014/02/08 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书