文章来源（hbsjsd.cn）湖北高端网站定制开发公司-速建时代
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e&services=&t=20200327103013"></script>
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} .anchorBL{display:none;} *{padding: 0; margin: 0;} .search{position: absolute; top: 0; left: 0; padding: 20px; background-color: rgba(255,255,255,0.2);} li{list-style: none; border: #A7C0E0 solid 1px;} .search ul{margin-top: 5%;} .search li{display: inline-block; background-color: #FFF; padding: 5px 20px; cursor: pointer;} .search input{font-family: "微软雅黑";} .contSear{width:200px;box-sizing: border-box;padding: 10px 20px;border:2px solid transparent;line-height: 20px;font-size: 14px;height: 38px;color: #333;position: relative;;outline: none;} .btSear{width: 60px; height: 35px; line-height: 35px; font-size: 14px; letter-spacing: 2px;} .comp{position: absolute; bottom: 0; left: 0; background-color: rgba(255,255,255,0.5); padding: 0 10px;} .comp img{width: 80px; height: 30px; float: left; padding: 5px;} .clearFloat{display: block; content: "" ; clear: both;} .comp p{float:left; font-size: 14px; color: #888; line-height: 40px;} </style> <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e&services=&t=20200327103013"></script> <script src="{$temp_css}/js/jquery-3.1.1.min.js"></script> <title>地图</title></head><body> <div id="allmap"></div> <div class="search"> <form> <input class="contSear" placeholder="输入地址"/> <input class="btSear" type="button" value="搜索" /> </form> </div> <div class="comp"> <p>昆山智谷</p> </div></body></html><script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMap.Point(112.125644,32.095788), 17); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 var point = new BMap.Point(112.125644,32.095788); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 map.centerAndZoom(point, 17); var opts = { width : 200, // 信息窗口宽度 height: 100, // 信息窗口高度 title : "速建速度" , // 信息窗口标题 } var infoWindow = new BMap.InfoWindow("地址：湖北省襄阳市邓城大道49号国际创新产业基地7-316<br/>电话:13487170257", opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow,point);//初始开启信息窗口 marker.addEventListener("click", function(){//按钮点击开启信息窗口 map.openInfoWindow(infoWindow,point); }); var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});// 右上角，添加比例尺 map.addControl(top_left_control); var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}); map.addControl(mapType1); var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM}); //右上角，仅包含平移和缩放按钮 map.addControl(top_right_navigation); var local = new BMap.LocalSearch(map, { renderOptions:{map: map} }); //map.enableScrollWheelZoom(true); //全景添加卡网络 // 覆盖区域图层测试 卡 //map.addTileLayer(new BMap.PanoramaCoverageLayer()); //var stCtrl = new BMap.PanoramaControl(); //构造全景控件 //stCtrl.setOffset(new BMap.Size(20, 20)); //map.addControl(stCtrl);//添加全景控件</script><script type="text/javascript"> $(".btSear").click(function(){ var searVal = $(".contSear").val(); local.search(searVal); }); $(".search ul li").click(function(){ var i = $(this).index(); switch(i){ case 0:local.search("昆山市");break; case 1:local.search("上海市");break; case 2:local.search("北京市");break; case 3:local.search("深圳市");break; } });</script>[声明]原创不易，请转发者备注下文章来源（hbsjsd.cn）【速建时代】。
