地区联动带百度地图查询

uutan

浏览: 1375 次

最近访客更多访客>>

ruoxin

liqiaofengye

weijuan55650_a40bf3

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2011-08 ( 1)
更多存档...

博客分类：

jquery

html javascript jquery 百度

写一个地区联动带百度地图查询的东东，在这里展示一下，并发表一下。效果如图：

所用文件有：

demo.html
js/jquery.min.js
js/jquery.baidumap.js
js/pcasunzip.js
demo.png

demo.html展示代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.baidumap.js"></script>

<script type="text/javascript" src="js/pcasunzip.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>

<title>联级地区带百度地图查询</title>



</head>



<body>



    <table width="100%">

        <tr>

            <td>

<form action="#" method="post">

<table width="100%" class="table_form">

<tbody>

<tr>

        <td width="60" class="tip">

<label for="Meeting_province" class="required">省市区</label>

</td>

        <td>

<select name="Venue[province]" id="Venue_province">

</select><select name="Venue[city]" id="Venue_city">

</select><select name="Venue[district]" id="Venue_district">

</select>

<script type="text/javascript">

new PCAS("Venue_province","Venue_city","Venue_district","","","");

</script>

</td>

    </tr>

<tr>

        <td class="tip">

<label for="Venue_address" class="required">地址</label></td>

        <td>

<input class="inputx shortA" name="Venue[address]" id="Venue_address" type="text" maxlength="100" /></td>

    </tr>

</tbody>

</table>

</form>    

            </td>

</tr>

<tr>

            <td valign="top" style="padding-left:10px;">



<div style="height:300px;border:1px solid gray" id="showmap"></div>

<p style="color:red; line-height:30px; ">温馨提示：从 <input type="text" value="" name="beginmap" id="beginmap" /> 到 <span id="endmap" style="font-weight:700;">终点</span> 共 <span id="longmap" style="font-weight:700;">0</span> 公里，打车预计<span id="monenymap" style="font-weight:700;">0</span> 元</p>

            </td>

        </tr>

    </table>



</div>



<script type="text/javascript">

baiduMap.init();

</script>



</body>

</html>