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

本文介绍了一个使用百度地图API的应用实例，通过简单的HTML页面展示了如何实现地图的基本操作，包括地图定位、搜索地点等功能，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片预览：

代码片段：

<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.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>