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 相关文章推荐
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
一秒学会微信小程序制作table表格
Feb 14 Javascript
微信小程序如何使用云开发
May 17 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 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
PHP form 表单传参明细研究
2009/07/17 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
javascript 打印页面代码
2009/03/24 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
js精度溢出解决方案
2012/12/02 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
React组件生命周期详解
2017/07/03 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
Python:slice与indices的用法
2019/11/25 Python
python实现在一个画布上画多个子图
2020/01/19 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
大学生四个方面的自我评价
2013/09/19 职场文书
护士岗位职责
2014/02/16 职场文书
关爱留守儿童标语
2014/06/18 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书