js代码实现调用百度地图api,并在地图上进行打点,添加标注
程序员文章站
2023-11-09 16:48:04
最近要做一个网页,具体内容是:上边有一个标题,下边分成两块,左边是地图。并且地图上有两个点,点击两个点有相应的提示信息,显示里最新的两条数据信息。右边是一些文字说明。本人刚开始学习,做的也不是很好...
最近要做一个网页,具体内容是:上边有一个标题,下边分成两块,左边是地图。并且地图上有两个点,点击两个点有相应的提示信息,显示里最新的两条数据信息。右边是一些文字说明。本人刚开始学习,做的也不是很好
总体效果如下所示:
首先新建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="https://api.map.baidu.com/api?v=1.5&ak=你申请的秘钥"></script> </head> <body bgcolor="#caffff"> <p id="container"></p> <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>
大功告成!
上一篇: Android超清晰6.0权限申请AndPermission
下一篇: SQL中的相关表的同时删除