<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>楼市地图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=45eaca6f2e8f4a1d60b294d4361eac7e&services=true"></script>
<style type="text/css">
html,body {/*<定义html和body高度都为100%，即显式定义html和body高度>*/
height:100%;
overflow:hidden;
}
a{text-decoration:none;color:blue;font-size:14px;}
a:hover{text-decoration:underline; color: #F30}
</style>
</head>
<body>
<div style="float:left;width:100%;height:63px;border:0px solid gray" id="header">
</div>
<div style="float:left;width:84%;height:90%;border:#6CAAD9 1px solid" id="container"></div>
<div style="float:left;width:15%;height:90%;border:0px solid #E5ECF9;border-width:0 0px 0px 3px; margin-left:9px;padding:0 0px 0 0;line-height:1.8em; overflow-y:scroll; ">
<div id="nav" style="float:right;width:100%;height:28px;background:#E5ECF9; margin-right:0px; "></div><br>
<ul>
<?php
/**
* 连接数据库
*/
/*
$mysql_server_name="localhost"; // 数据库服务器名称 183.238.59.144
$mysql_username="zjwdb_125945"; // 连接数据库用户名
$mysql_password="8LC2UKCI4"; // 连接数据库密码
$mysql_database="zjwdb_125945"; // 数据库的名字
*/
$mysql_server_name="localhost"; // 数据库服务器名称 183.238.59.144
$mysql_username="root"; // 连接数据库用户名
$mysql_password="123456"; // 连接数据库密码
$mysql_database="y_map"; // 数据库的名字
// 连接到数据库
$conn=mysql_connect($mysql_server_name, $mysql_username,$mysql_password)
or die("Could not connect: ".mysql_error());
// 从表中提取信息的sql语句
$strsql="select * from y_map";
// 执行sql查询
mysql_query("SET NAMES UTF8");
$result=mysql_db_query($mysql_database, $strsql, $conn);
// 获取查询结果
$arr_point = '[';
$maker = '';
$ops = '';
$i = 0;
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$img = '';
echo '<li>
<a onmouseover="openMyWin(infoWindow'.$i.',point['.$i.'])" href="#">'.$row['title'].'</a>
</li>';
$arr_point .= 'new BMap.Point('.$row["point"].'),';
$maker .= 'var marker'.$i.' = new BMap.Marker(point['.$i.'],{icon:myIcon});
var myLabel = new BMap.Label("'.$row['title'].'",
{offset:new BMap.Size(50, -18),
position:point['.$i.']});
myLabel.setTitle("'.$row['title'].'");
marker'.$i.'.setLabel(myLabel);
myLabel.setStyle({ //给label设置样式，任意的CSS都是可以的
color:"white", //颜色
fontSize:"12px", //字号
border:"0", //边
height:"35px", //高度
width:"106px", //宽
textAlign:"center", //文字水平居中显示
lineHeight:"18px", //行高，文字垂直居中显示
background:"url(./img/lg2.png)", //背景图片，这是房产标注的关键！
cursor:"pointer"
});';
$addverlay .= 'map.addOverlay(marker'.$i.');';
$ops .= 'var opts'.$i.' = {offset : new BMap.Size(0, -25), title : \'<span style="font-size:14px;color:#0A8021">'.$row['title'].'</span>\'};';
for($m = 0;$m < $row["level"];$m++)
{
$img .= "<img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' />";
}
$infoWindow .= "var infoWindow".$i." = new BMap.InfoWindow(\"<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>".$row['address']."</br><b>电话:</b>".$row['tel']."</br><b>口碑：</b>".$img."<a style='text-decoration:none;color:#2679BA;float:right' href='".$row['link']."'>详情>></a></div>\", opts".$i.");";
$addEventListener .= 'marker'.$i.'.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow'.$i.');});';
$i++;
}
$arr_point = substr($arr_point , 0 , -1).']';
?>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 14);
map.addControl(new BMap.NavigationControl()); //向地图添加控件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom();
var myIcon = new BMap.Icon("./img/lg2.png", new BMap.Size(108, 37), { //小车图片
imageOffset: new BMap.Size(50, -18) //图片的偏移量。为了是图片底部中心对准坐标点。
});
</script>
<?php
echo '<script> var point = '.$arr_point.'; '; // 坐标点
echo $maker; // 创建标注
echo $addverlay; // 将标注添加到地图中
echo 'map.setViewport(point); '; // 调整地图的最佳视野为显示标注数组point
echo $ops ;
echo $infoWindow ;
echo $addEventListener.' </script> '
?>
<script>
function openMyWin(id,p){
map.openInfoWindow(id,p);
}
</script>
<script>
sideleft.style.height = sideright.offsetHeight;
</script>
js网页内嵌百度地图开发
4星 · 超过85%的资源 需积分: 50 37 浏览量
2013-09-29
13:47:20
上传
评论 1
收藏 5KB ZIP 举报 
js网页内嵌百度地图开发.zip （3个子文件） 
1 
y_map (1).sql 2KB myindex.php 6KB y_map.sql 3KB资源评论
zkfree2015-07-23可进行初步的指导。
qq_268941352015-08-26还不错，但是我用不上
mao02172014-11-22很不错的程序，对我很有用，要是能提供完整的后台就好了- nasireddin2015-05-04解释不了啊
我要打分位2014-11-07不能连接啊
