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

最新推荐文章于 2020-01-07 11:38:21 发布

天易

最新推荐文章于 2020-01-07 11:38:21 发布

阅读量5.2k

点赞数 2

分类专栏： javascript 文章标签：百度 search function input button

本文链接：https://blog.csdn.net/wangzihu/article/details/7754955

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

图片预览：

代码片段：


<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="搜索" οnclick="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>

天易

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
天易10----js实现的类似百度地图（带查询功能）

图片预览：代码片段：地址： function $(id) { return document.getElementById(id); //定义$ } var map = new BMap.Map("container
复制链接

扫一扫

专栏目录