百度地图使用

常见问题     |      2020-10-26 | 阅读数:21次

网站地图使用


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="https://www.hbsjsd.cn/template/it/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());    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>


百度地图使用

移动端扫描浏览

网站优化、网站建设、APP开发、小程序开发