百度地圖使用
網站地圖使用
ak 公共 ak DD279b2a90afdf0ae7a3796787a0742e
<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"); // 創(chuàng)建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); // 創(chuàng)建標注 map.addOverlay(marker); // 將標注添加到地圖中 map.centerAndZoom(point, 17); var opts = { width : 200, // 信息窗口寬度 height: 100, // 信息窗口高度 title : "速建速度" , // 信息窗口標題 } var infoWindow = new BMap.InfoWindow("地址：湖北省襄陽市鄧城大道49號國際創(chuàng)新產業(yè)基地7-316<br/>電話:13487170257", opts); // 創(chuàng)建信息窗口對象 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); //全景添加卡網絡 // 覆蓋區(qū)域圖層測試 卡 //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>[聲明]原創(chuàng)不易，請轉發(fā)者備注下文章來源（hbsjsd.cn）【速建時代】。