用户注册



邮箱：

密码：

用户登录


邮箱：

密码：
记住登录一个月忘记密码？

发表随想


还能输入：200字
云代码 - html代码库

751BaiMapJS.html

2020-07-29 作者： 朱文波30举报

[html]代码库

view sourceprint?
<!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:"微软雅黑";}
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <title>地图官网展示效果</title> 
</head> 
<body>   
    <div id="allmap"></div> 
</body> 
</html> 
<script type="text/javascript"> 
    // 百度地图API功能 
    var map = new BMap.Map("allmap");            // 创建Map实例 
    var point = new BMap.Point(116.42, 39.93); // 创建点坐标 
    map.centerAndZoom(point, 15);                // 初始化地图,设置中心点坐标和地图级别 
    map.enableScrollWheelZoom();                 // 启用滚轮放大缩小
    map.addControl(new BMap.ZoomControl());      // 添加地图缩放控件
    map.addControl(new BMap.ScaleControl());     // 添加比例尺控件
     
    // 定位城市
    function LoadMap(city) {                      
        map.centerAndZoom(city, 12); // 初始化地图,设置中心点坐标和地图级别 15更详细
        map.enableScrollWheelZoom();                 // 启用滚轮放大缩小
        map.addControl(new BMap.ZoomControl());      // 添加地图缩放控件
        map.addControl(new BMap.ScaleControl());     // 添加比例尺控件
    }  
  
    // 根据中心点关键字周边搜索
    function SearchNearbyMap(city, key) {
        map.centerAndZoom(city, 12);                
        var point = new BMap.Point(116.42, 39.93); // 默认中心点
        var marker = new BMap.Marker(point);         // 计划调用自定义
         
        //清除覆盖物再加载，否则多次点击不断添加
        //map.removeOverlay(Overlay);                // 清除指定覆盖物
        map.clearOverlays();                         // 清除全部
  
        var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map, autoViewport:true}
        });
        local.searchNearby(key, city);
         
        map.addControl(new BMap.NavigationControl()); //左上角控件
        map.enableScrollWheelZoom();                 // 启用滚轮放大缩小
        map.addControl(new BMap.ZoomControl());      // 添加地图缩放控件
        map.addControl(new BMap.ScaleControl());     // 添加比例尺控件
    }
     
    // 根据中心点关键字周边搜索 停车场
    function SearchCarMap(city) {
        map.centerAndZoom(city, 12);                
        map.clearOverlays();                         // 清除全部覆盖物再加载，否则多次点击不断添加
        var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map, autoViewport:true}
        });
        local.searchNearby("停车场", city);
         
        map.addControl(new BMap.NavigationControl()); //左上角控件
        map.enableScrollWheelZoom();                 // 启用滚轮放大缩小
        map.addControl(new BMap.ZoomControl());      // 添加地图缩放控件
        map.addControl(new BMap.ScaleControl());     // 添加比例尺控件
    }
  
    // 当前位置定位 751D·PARK北京时尚设计广场
    function LocateMyPlcae() {
        map.clearOverlays();
        var pointA_A =116.42;
        var pointA_B = 39.93;
        var pointA = new BMap.Point(pointA_A, pointA_B); 
  
        var pointB_A = 116.42;
        var pointB_B = 39.93;
        var pointB = new BMap.Point(pointB_A, pointB_B);
        var pointC = new BMap.Point((pointA_A+pointB_A)/2,
                            (pointA_B+pointB_B)/2);
        map.centerAndZoom(pointC, 15);
         
        var markerA = new BMap.Marker(pointA);
        var markerB = new BMap.Marker(pointB);
        // 将标注添加到地图中
        //map.addOverlay(markerA);                     
        //map.addOverlay(markerB); 
  
        // 创建标注1
        addMarker(pointA, "751D·PARK北京时尚设计广场", "地址：751D·PARK北京时尚设计广场");         
        // 创建标注2
        addMarker(pointB, "751D·PARK北京时尚设计广场", "地址：751D·PARK北京时尚设计广场");         
   
        // 开始测距 定义折线
        var polyline = new BMap.Polyline([pointA, pointB], { strokeColor: "orange", strokeWeight: 6, strokeOpacity: 0.5 });  
        map.addOverlay(polyline);                       // 添加折线到地图上
  
        // 监听标注事件 获取两点距离,保留小数点后两位 
        polyline.addEventListener("click", function () {    //         
            alert('两地距离是：' +
                (map.getDistance(pointA, pointB)).toFixed(2) + ' 米。');  
        });
  
        map.enableScrollWheelZoom();                 // 启用滚轮放大缩小
        map.addControl(new BMap.ZoomControl());      // 添加地图缩放控件
        map.addControl(new BMap.ScaleControl());     // 添加比例尺控件
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.OverviewMapControl());
  
    }
  
    function GetResMyPlace() {
        map.clearOverlays();
  
        var pointA_A = 116.42;
        var pointA_B = 39.93;
        var pointA = new BMap.Point(pointA_A, pointA_B); 
  
        var pointB_A = 116.42;
        var pointB_B = 39.93;
        var pointB = new BMap.Point(pointB_A, pointB_B);
  
        var pointC = new BMap.Point((pointA_A+pointB_A)/2,
                            (pointA_B+pointB_B)/2);
        map.centerAndZoom(pointC, 15);
        map.enableScrollWheelZoom();                 // 启用滚轮放大缩小
         
        var markerA = new BMap.Marker(pointA);
        var markerB = new BMap.Marker(pointB); 
  
        // 创建标注1
        addMarker(pointA, "751D·PARK北京时尚设计广场", "地址：751D·PARK北京时尚设计广场");         
        // 创建标注2
        addMarker(pointB, "751D·PARK北京时尚设计广场", "地址：751D·PARK北京时尚设计广场");         
   
        // 开始测距 定义折线       
        var polyline = new BMap.Polyline([pointA, pointB], { strokeColor: "orange", strokeWeight: 6, strokeOpacity: 0.5 });   
        map.addOverlay(polyline);                       // 添加折线到地图上
  
        // 监听标注事件 获取两点距离,保留小数点后两位 
        polyline.addEventListener("click", function () {    //         
            alert('两地距离是：' +
                (map.getDistance(pointA, pointB)).toFixed(2) + ' 米。');  
        }); 
  
        /*
        var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map}
        });
        // 自己规定范围
        var bs = new BMap.Bounds(pointA, pointB);
        local.searchInBounds("餐馆", bs);
        */
  
        var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map}
        });
        local.search("餐馆");
         
        map.addControl(new BMap.ZoomControl());      // 添加地图缩放控件
        map.addControl(new BMap.ScaleControl());     // 添加比例尺控件
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.OverviewMapControl());
  
    }
  
    // 导航
    function RouteMyPlace() {
        map.clearOverlays();
  
        var pointA_A = 116.42;
        var pointA_B = 39.93;
        var pointA = new BMap.Point(pointA_A, pointA_B); 
  
        var pointB_A = 116.42;
        var pointB_B = 39.93;
        var pointB = new BMap.Point(pointB_A, pointB_B);
        var pointC = new BMap.Point((pointA_A+pointB_A)/2,
                            (pointA_B+pointB_B)/2);
        map.centerAndZoom(pointC, 15);
        map.enableScrollWheelZoom();                 // 启用滚轮放大缩小
         
        var markerA = new BMap.Marker(pointA);
        var markerB = new BMap.Marker(pointB); 
        map.addOverlay(markerA);
        map.addOverlay(markerB);
  
        markerA.addEventListener("click", function(){
            /*start|end：（必选）
            {name:string,latlng:Lnglat}
            opts:
            mode：导航模式，固定为
            BMAP_MODE_TRANSIT、BMAP_MODE_DRIVING、
            BMAP_MODE_WALKING、BMAP_MODE_NAVIGATION
            分别表示公交、驾车、步行和导航，（必选）
            region：城市名或县名  给定region认为起点和终点都在同一城市，除非单独给定起点或终点城市
            origin_region/destination_region：同上
            */
            var start = {
                 name:"751D·PARK北京时尚设计广场"
            }
            var end = {
                name:"751D·PARK北京时尚设计广场"
            }
            var opts = {
                mode:BMAP_MODE_DRIVING,
                region:"751D·PARK北京时尚设计广场"
            }
            var ss = new BMap.RouteSearch();
            ss.routeCall(start,end,opts);
        });
  
        map.addControl(new BMap.ZoomControl());      // 添加地图缩放控件
        map.addControl(new BMap.ScaleControl());     // 添加比例尺控件
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.OverviewMapControl());
    }
  
    // 自定义创建标注 
    function addMarker(point, a, b) { 
        var marker = new BMap.Marker(point); 
        map.addOverlay(marker); 
        marker.addEventListener("click", function () {    // 监听标注事件   
            var opts = {         // 创建信息窗口 
                width: 250,      // 信息窗口宽度     
                height: 100,     // 信息窗口高度     
                title: a         // 信息窗口标题    
            } 
            var infoWindow = new BMap.InfoWindow(b, opts);  // 创建信息窗口对象     
            map.openInfoWindow(infoWindow, point);          // 打开信息窗口                
        }); 
    }
  
</script>


网友评论    (发表评论)


发表评论：

评论须知：

  • 1、评论每次加2分，每天上限为30；
  • 2、请文明用语，共同创建干净的技术交流环境；
  • 3、若被发现提交非法信息，评论将会被删除，并且给予扣分处理，严重者给予封号处理；
  • 4、请勿发布广告信息或其他无关评论，否则将会删除评论并扣分，严重者给予封号处理。


扫码下载

加载中，请稍后...

输入口令后可复制整站源码

加载中，请稍后...