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=''order by id desc limit 1"; $sql1="select * from car_info where carID= '' 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/ 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./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 == ) myIcon=fI else myIcon=sI var marker = new BMap.Marker(point, {icon: myIcon}); map.addOverlay(marker); marker.addEventListener("click",function(){ var opts={width:450,height:500,title:"详细信息"}; var infoWindow = Window(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 += lat_center += 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/ 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=''order by id desc limit 1"; $sql1="select * from car_info where carID= '' order by id desc limit 1"; $sql=array($sql0,$sql1); function htmtocode($content){ $content=str_replace("\n", "&br&", str_replace(" ", " ", $content)); return $ } ?& &html& &head& &meta name="viewport" content="initial-scale=1.0, user-scalable=no" /& &meta http-equiv="Content-Type" content="text/ 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/ 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&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具百度地图api使用文档marker标注label使用_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
百度地图api使用文档marker标注label使用
上传于||文档简介
&&百​度​地​图​a​p​i​使​用​文​档​m​a​r​k​e​r​标​注​l​a​b​e​l​使​用
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
你可能喜欢百度地图API 切换效果时标识不居中
[问题点数：40分，结帖人Sylvia___Wang]
百度地图API 切换效果时标识不居中
[问题点数：40分，结帖人Sylvia___Wang]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
本帖子已过去太久远了，不再提供回复功能。请问下我做了个弹窗div 里面放百度地图 为什么我百度地图定位的点
不是在div的中间
而是跑到div的左上角 还有就是显示框的问题
[问题点数：20分，结帖人wu]
请问下我做了个弹窗div 里面放百度地图 为什么我百度地图定位的点
不是在div的中间
而是跑到div的左上角 还有就是显示框的问题
[问题点数：20分，结帖人wu]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。君，已阅读到文档的结尾了呢~~
www.zhenglai.net 整理..
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
百度地图API详解之地图标注(标注图标的切换，点击提示框显示的位置，标注拖拽)
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口}