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变量以及其作用域详解
Jul 18 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
老生常谈ES6中的类
Jul 31 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
js 概率计算(简单版)
Sep 12 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
React实现全选功能
Aug 25 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
IE8 原生JSON支持
2009/04/13 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
用js实现放大镜效果
2020/10/28 Javascript
gearman的安装启动及python API使用实例
2014/07/08 Python
Python中取整的几种方法小结
2017/01/06 Python
python判断完全平方数的方法
2018/11/13 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
Yahoo-PHP面试题3
2012/01/14 面试题
国际政治个人自荐信范文
2013/11/26 职场文书
联谊会主持词
2014/03/26 职场文书
学校捐款活动总结
2015/05/09 职场文书
钢琴师观后感
2015/06/12 职场文书
入队仪式主持词
2015/07/04 职场文书
win sever 2022如何占用操作主机角色
2022/06/25 Servers