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

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

图片预览：

代码片段：

<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.centerAndZoom(new BMap.Point(121.487899, 31.249162),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>

2楼y185130162昨天 16:50: 不错哦..

1楼Union_Ming昨天 15:18: 不错

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

相关推荐