您的位置：首页 > Web前端 > JavaScript

天易10----js实现的类似百度地图（带查询功能）

2012-07-17 13:25 483 查看
图片预览：



代码片段：

<pre name="code" class="html"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>

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

</head>
<body>
<p>
地址：<input id="txtSearch" type="text" />
<input type="button" value="搜索" onclick="search()" /></p>
<div style="width: 800px; height: 600px; border: 1px solid gray;" id="container">
</div>
</body>

<script type="text/javascript">
function $(id) {
return document.getElementById(id); //定义$
}
var map = new BMap.Map("container"); //创建地图

map.centerAndZoom(new BMap.Point(116.4035,39.915),10); //初始化地图
map.setCurrentCity("北京","上海","青岛");    //三维地图设置

map.enableScrollWheelZoom();  // 开启鼠标滚轮缩放
map.enableKeyboard();         // 开启键盘控制
map.enableContinuousZoom();   // 开启连续缩放效果
map.enableInertialDragging(); // 开启惯性拖拽效果

map.addControl(new BMap.NavigationControl()); //添加标准地图控件(左上角的放大缩小左右拖拽控件)
map.addControl(new BMap.ScaleControl());      //添加比例尺控件(左下角显示的比例尺控件)
map.addControl(new BMap.OverviewMapControl()); // 缩略图控件
map.addControl(new BMap.MapTypeControl());

var city = new BMap.LocalSearch(map, { renderOptions: { map: map, autoViewport: true} }); //地图显示到查询结果

处

function search() {
var s = $("txtSearch").value;
city.search(s); //查找城市
}
</script>

</html>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航