用js实现网页内嵌百度地图开发

最新推荐文章于 2023-03-12 21:36:22 发布

DevHank

最新推荐文章于 2023-03-12 21:36:22 发布

阅读量2.6k

点赞数

分类专栏： web 文章标签：百度地图

本文链接：https://blog.csdn.net/etmanwenhan/article/details/12055555

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

http://ftp141294.host199.web522.com/myindex.php

<!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">
a{text-decoration:none;color:#6ce;font-size:14px;}
a:hover{text-decoration:underline;}
</style>
</head>
<body>
<div style="float:left;width:100%;height:63px;border:0px solid gray" id="header">
<div id="nav" style="float:left;width:100%;height:23px;background:#E5ECF9; margin-top:40px " ></div>
</div>


<div style="float:left;width:84%;height:700px;border:1px solid gray" id="container"></div>
<div style="float:left;width:15%;height:700px;border:0px dashed gray;border-width:0px 0px 0px 0;padding:0 10px 0 0;line-height:1.8em;">
    <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 οnmοuseοver="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(10,-10),                 
   	 	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>010-59921010</br><b>口碑：</b>".$img."<a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></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(10, -40)    //图片的偏移量。为了是图片底部中心对准坐标点。
 });
</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>

参考：

http://www.cnblogs.com/milkmap/archive/2011/08/16/2135323.html

http://www.cnblogs.com/milkmap/archive/2011/08/24/2151073.html

DevHank

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用js实现网页内嵌百度地图开发

http://www.cnblogs.com/milkmap/archive/2011/08/16/2135323.htmlhttp://www.cnblogs.com/milkmap/archive/2011/08/24/2151073.html
复制链接

扫一扫