js调用百度地图api 在地图上做点和标记

最近想做一个网页，具体内容是：顶部有标题，底部分为两块，左边是地图。地图上有两点。点击这两个点，得到相应的提示信息，显示数据库中最新的两条数据信息。右边是一些标题。我刚开始学习，成绩不是很好。整体效果如下：。

首先新建map.php文件，代码如下复制代码代码如下：DOCTYPE html？php /创建与数据库的连接*/$conn=mysql_connect("、"、")或' die('无法连接到服务器');mysql_select_db('hdm0410292_db '，$ conn)；MySQL _ query(' set name utf8 ')；//选择出两辆车插入的最新数据，并将两条语句存在数组里$sql0='从汽车信息中选择*其中carID='20140508 '按身份订购desc限额1 ';$sql1='从汽车信息中选择*其中carID='20140510 '按身份订购desc限额1 ';$ sql=数组($sql0，$ SQL 1)；html头元名称=' 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%；宽度：99%;字体系列：楷体_ GB2312font-size :25 px } #容器{高度： 100% }/样式脚本类型=' text/JavaScript ' src=' http :http://API。地图。百度。com/API？v=1.5ak=你申请的秘钥/script/head body BGCOLOR=' # caff ' div id=' container '/div script type=' text/JavaScript ' var lon _ center=0；var lat _ center=0；var映射=新的BMap .地图('容器');-添加标注的函数，参数包括，点坐标，车身份证，以及数据库里的其他信息-函数addMarker(点，索引，s){ var fIcon=new BMap .图标(“car1.png”，新BMap .大小(55,43),{ });var sIcon=新BMap .图标(“car2.png”，新的BMap .大小(55,43),{ });var myIcon=//创建标注对象并添加到地图if(index==20140508)myIcon=fIcon；else myIcon=sIconvar标记=新的BMap .标记（点，{ icon : my icon })；map.addOverlay(标记);marker.addEventListener('click '，function(){ var opts={ width :450，height:500，title: '详细信息'};var infoWindow=新BMap .信息窗口；map.openInfoWindow(信息窗口，点);});} ?php /遍历数组里的两条结构化查询语言语句foreach($ SQL as $ value){ $ query=MySQL _ query($ value)；$ row=MySQL _ fetch _ array($ query)；var lon=？PHP echo $ row[经度]?var lat=？php echo $row[latitude]？-计算两个点的中心点，并将其作为地图初始化时的中心位置-lon _ center=lon；lat _ center=latvar id=？php echo $row[id]？var info='br/' 'carID:php echo $row[carID]？'br/' '经度： ' '?PHP echo $ row[经度]?br/' '纬度： ' '?php echo $row[latitude]？'br/' '速度： ' '?php echo $row[speed]？'公里/小时" br/"加速度： ' '?PHP echo $ row[加速]?'br/' '方向： ' '?php echo $row[direction]？br/' '油量： ' '?php echo $row[oil]？'br/' '地址： ' '?php echo $row[street]？定义变量点=新的BMap .点(lon，lat)；addMarker(点，php echo $row[carID]？信息);php }？-计算两个点的中心点，并将其作为地图初始化时的中心位置- var中心=新的BMap .点(lon_center/2，lat _ center/2)；map.centerAndZoom(中，17);地图。enablescrolheelzoom()；/脚本/正文/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%；}车身{身高：10%；宽度：99%;字体系列：楷体_ gb2312 font-size :25 px }/style/head body BGCOLOR=' # caff ' H1 ALIGN=' CENTER '信息展示/H1/正文/html然后在建立详细信息说明模块info.php复制代码代码如下：DOCTYPE html？php $conn=mysql_connect(“”、“”、“)或死(”无法连接到服务器");mysql_select_db('，$ conn)；MySQL _ query(' set name utf8 ')；$sql0='从汽车信息中选择*其中carID='20140508 '按身份订购desc限额1 ';$sql1='从汽车信息中选择*其中carID='20140510 '按身份订购desc限额1 ';$ sql=数组($sql0，$ SQL 1)；函数htm代码($ content){ $ content=str_replace(' \ n '，' br '，str _ replace('，' '，$ content))；返回$ content}？html头元名称=' 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%；}车身{身高：90%；宽度：90%;字体系列：楷体_ gb2312 font-size :20 px }/style/head body BGCOLOR=' # caff ' H1 ALIGN=' CENTER '信息展示/H1？PHP foreach($ SQL as $ value){ $ query=MySQL _ query($ value)；$ row=MySQL _ fetch _ array($ query)；H2car？php echo $row[carID]？详细信息/H2 HR CAR ID:php echo $row[carID]？英国铁路公司经度：PHP echo $ row[经度]?英国铁路公司纬度：php echo $row[latitude]？英国铁路公司速度：php echo $row[speed]？公里/小时英国铁路公司加速度：PHP echo $ row[加速]?英国铁路公司方向：php echo $row[direction]？英国铁路公司油量：php echo $row[oil]？英国铁路公司地址：php echo $row[street]？英国铁路公司时间：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 FRAMEST ROWS=' 10%，90% ' FRAMBORDER=1 FRAMEST SRC=' title。PHP '/FRAMEST COLS=' 70%，30% ' FRAME SRC='映射。PHP ' FRAME SRC='信息。PHP '/FRAMEST/FRAMEST/html