百度地图

最新推荐文章于 2023-07-28 20:39:23 发布

洪布斯

最新推荐文章于 2023-07-28 20:39:23 发布

阅读量266

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_45631813/article/details/103811905

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

百度地图资源：http://lbsyun.baidu.com/index.php?title=jspopular3.0

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
    <div id="results">

    </div>
</body>

</html>

<!-- 异步 -->
<!-- <script>
    function init() {  
        var mp = new BMap.Map('map'); 
        mp.centerAndZoom(new BMap.Point(113.75891, 34.73523), 18);  
    }

    function loadScript() {  
        var script = document.createElement("script");  
        script.src = "http://api.map.baidu.com/api?v=2.0&ak=Y8tnMoeIgONhK8WhsgoL1tEWrYjNisAv&callback=init";
        document.body.appendChild(script);  
    }

    window.onload = loadScript;
</script> -->

<!-- 同步 -->
<script src="http://api.map.baidu.com/api?v=3.0&ak=Y8tnMoeIgONhK8WhsgoL1tEWrYjNisAv"></script>
<script>
    var map = new BMap.Map('map');
    var point = new BMap.Point(113.75891, 34.73523);
    map.centerAndZoom(point, 15);

    // JSAPI商用授权挂件默认开启，关闭需要修改调用JSAPI的代码
    map.disableBizAuthLogo();

    // 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);

    // 平移缩放控件
    var opts = {
        offset: new BMap.Size(50, 50),
        anchor: BMAP_ANCHOR_TOP_RIGHT
    }
    map.addControl(new BMap.NavigationControl(opts));
    // 缩略地图    
    map.addControl(new BMap.OverviewMapControl());
    // 比例尺 
    map.addControl(new BMap.ScaleControl());
    // 地图类型 
    map.addControl(new BMap.MapTypeControl());
    // 版权 
    map.addControl(new BMap.CopyrightControl());
    // 定位
    map.addControl(new BMap.GeolocationControl());

    // 创建标注 
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);

    // 定义标注图标
    function addMarker(point, index) { // 创建图标对象   
        var myIcon = new BMap.Icon("marker.jpg", new BMap.Size(20, 29), {
            // 指定定位位置。       
            anchor: new BMap.Size(10, 25),
            // 设置图片偏移。       
            imageOffset: new BMap.Size(0, 0)
        });
        // 创建标注对象并添加到地图   
        var marker = new BMap.Marker(point, {
            icon: myIcon
        });
        // 添加点击事件 
        marker.addEventListener("click", function (e) {
            alert("您点击了标注：" + e.point.lat + "  " + e.point.lng);
        });
        // 允许拖拽
        marker.enableDragging();
        map.addOverlay(marker);
    }
    // 随机向地图添加10个标注       
    // for (var i = 0; i < 10; i ++) {    
    //     var p = new BMap.Point(113.75891 +  (Math.random()-0.5)*0.05,  34.73523 + (Math.random()-0.5)*0.05); 
    //     addMarker(p, 0);    
    // }

    // 添加折线
    var polyline = new BMap.Polyline([
        new BMap.Point(113.75891, 34.73523),
        new BMap.Point(113.70800, 34.73523),
        new BMap.Point(113.7, 34.70523)
    ], {
        strokeColor: "green",
        strokeWeight: 3,
        strokeOpacity: 0.5
    });
    map.addOverlay(polyline);

    // 添加文本
    var txt = new BMap.Label("郑州智游", {
        offset: new BMap.Size(-35, -40),
        position: point
    });
    txt.setStyle({
        width: "60px",
        height: "14px",
        color: "black",
        fontSize: "13px",
        backgroundColor: "#CCFFFF",
        border: "3px solid #1E90FF",
        padding: "2px",
        textAlign: "center",
        // borderRadius:"50%",
        fontWeight: "bold"
    });
    map.addOverlay(txt);


    // 城市检索
    // var local = new BMap.LocalSearch(map, {      
    //     renderOptions:{map: map}      
    // });      
    // local.search("黄焖鸡");
    // 圆形区域检索
    // var local = new BMap.LocalSearch(map,   
    //           { renderOptions:{map: map, autoViewport: true}});      
    // local.searchNearby("公园","管城区");
    // 矩形区域检索
    // var local = new BMap.LocalSearch(map,   { renderOptions:{map: map,panel: "results"}});      
    // local.searchInBounds("工商", map.getBounds());
    // 可以获取到搜索结果的数据：
    var options = {
        onSearchComplete: function (results) {
            // console.log(local.getStatus());
            // console.log(BMAP_STATUS_SUCCESS);
            if (local.getStatus() == BMAP_STATUS_SUCCESS) {
                // 判断状态是否正确      
                var s = [];
                for (var i = 0; i < results.getCurrentNumPois(); i++) {
                    s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
                    addMarker(results.getPoi(i).point, 0);
                }
                document.getElementById("results").innerHTML = s.join("<br>");
            }
        }
    };
    var local = new BMap.LocalSearch(map, options);
    local.search("公园");


    // 地理编码/地址解析 1.BMap.Geocoder  2.http://api.map.baidu.com/geocoding/v3/?address=北京市海淀区上地十街10号&output=json&ak=您的ak&callback=showLocation //GET请求
    // 创建地理编码实例      
    var myGeo = new BMap.Geocoder();
    // 根据坐标得到地址描述    
    myGeo.getLocation(new BMap.Point(113.75891, 34.73523), function (result) {
        if (result) {
            alert(result.address);
        }
    });
    // 将地址解析结果显示在地图上，并调整地图视野    
    myGeo.getPoint("河南省郑州市管城区通信产业园", function (point) {
            if (point) {
                alert(point.lat + " " + point.lng);
            }
        },
        "郑州市");


    // 驾车路线规划
    var driving = new BMap.DrivingRoute(map, {
        renderOptions: {
            map: map,
            autoViewport: true
        }
    });
    var start = new BMap.Point(113.75891, 34.73523);
    var end = new BMap.Point(113.771414, 34.714314);
    driving.search(start, end);
    // 获取数据
    var options = {
        onSearchComplete: function (results) {
            if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
                // 获取第一条方案 
                var plan = results.getPlan(0);
                // 获取方案的驾车线路 
                var route = plan.getRoute(0);
                // 获取每个关键步骤，并输出到页面 
                var s = [];
                for (var i = 0; i < route.getNumSteps(); i++) {
                    var step = route.getStep(i);
                    addMarker(step.Gh, 0);
                }
            }
        }
    };
    var driving = new BMap.DrivingRoute(map, options);
    var start = new BMap.Point(113.75891, 34.73523);
    var end = new BMap.Point(113.771414, 34.714314);
    driving.search(start, end);

    // 公交
    var transit = new BMap.TransitRoute(map, {
        renderOptions: {
            map: map,
            autoViewport: true
        }
    });
    var start = new BMap.Point(113.75891, 34.73523);
    var end = new BMap.Point(113.661435, 34.803426);
    transit.search(start, end);
</script>

洪布斯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
百度地图

百度地图资源：http://lbsyun.baidu.com/index.php?title=jspopular3.0<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...
复制链接

扫一扫