百度地图H5/app 导航

最新推荐文章于 2023-12-20 14:03:26 发布

Teln_小凯

最新推荐文章于 2023-12-20 14:03:26 发布

阅读量553

点赞数

分类专栏： VUE Apiclound3 文章标签：百度 html javascript

本文链接：https://blog.csdn.net/qq873113580/article/details/127130636

版权

VUE 同时被 2 个专栏收录

77 篇文章 0 订阅

订阅专栏

Apiclound3

5 篇文章 0 订阅

订阅专栏

我的位置

标记位置

地图导航

代码

<!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, #container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        button {
            border-radius: 5px;
            background-color: #4CAF50; /* 绿色 */
            border: none;
            color: white;
            padding: 4px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 12px;
            margin: 4px 2px;
            cursor: pointer;
        }
    </style>
    <title>ADE地图</title>
</head>
<body>
    <div id="container"></div>
</body>
</html>
<script src="~/Content/Faq/faq/jquery.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的akkey"></script>
<script src="~/Content/ApiClound/Js/api.js"></script>
<script src="~/Content/ApiClound/Js/common.js"></script>
<script type="text/javascript">
    var map = null;
    $(function () {
        map = new BMap.Map('container');
        map.centerAndZoom(new BMap.Point(116.404, 39.928), 13);
        map.enableScrollWheelZoom(true);

        //图标
        var heart = new BMap.Icon("/Content/Aed/heart.png", new BMap.Size(40, 40));
        heart.setImageSize(new BMap.Size(40, 40));//设置图标大小
        // 创建点标记
        var point1 = new BMap.Point(116.404, 39.925);
        var point2 = new BMap.Point(116.404, 39.915);
        var point3 = new BMap.Point(116.395, 39.935);
        var point4 = new BMap.Point(116.415, 39.931);

        var marker1 = new BMap.Marker(point1, { icon: heart });
        var marker2 = new BMap.Marker(point2, { icon: heart });
        var marker3 = new BMap.Marker(point3, { icon: heart });
        var marker4 = new BMap.Marker(point4, { icon: heart });

        // 在地图上添加点标记
        map.addOverlay(marker1);
        map.addOverlay(marker2);
        map.addOverlay(marker3);
        map.addOverlay(marker4);

        //动画
        marker1.setAnimation(BMAP_ANIMATION_BOUNCE);
        marker2.setAnimation(BMAP_ANIMATION_BOUNCE);
        marker3.setAnimation(BMAP_ANIMATION_BOUNCE);
        marker4.setAnimation(BMAP_ANIMATION_BOUNCE);

        //弹出创建信息窗口
        var opts = {
            width: 200,
            height: 100,
            title: '故宫博物院'
        };
        var infoWindow = new BMap.InfoWindow("<div>地址：北京市东城区王府井大街88号乐天银泰百货八层</div><div style='width:100%;text-align:right;'><button onclick='goMap(" + point1.lng + "," + point1.lat + ")'>到这去</button></div>", opts);
        // 点标记添加点击事件
        marker1.addEventListener('click', function () {
            map.openInfoWindow(infoWindow, point1); // 开启信息窗口
        });
        marker2.addEventListener('click', function () {
            map.openInfoWindow(infoWindow, point2); // 开启信息窗口
        });
        marker3.addEventListener('click', function () {
            map.openInfoWindow(infoWindow, point3); // 开启信息窗口
        });
        marker4.addEventListener('click', function () {
            map.openInfoWindow(infoWindow, point4); // 开启信息窗口
        });
        //设置当前城市位置
        getCurCity();
    });
    //设置当前城市位置
    function getCurCity() {
        //设置当前城市位置
        var myCity = new BMap.LocalCity();
        myCity.get(function (result) {
            var cityName = result.name;
            window.cityName=cityName;
            setTimeout(() => {
                map.setCenter(cityName);
                //定位当前位置
                getLocation();
            }, 300);
        });
    }
    //跳转位置
    function goMap(lng, lat) {
        var url = "http://api.map.baidu.com/direction?origin=latlng:"+window.myPoint.lat+","+window.myPoint.lng+"|name:我的位置&destination=latlng:"+lat+","+lng+"|name:故宫博物院&mode=driving&region="+window.cityName+"&output=html&src=webapp.baidu.openAPIdemo";
        Common.toNavIconItem('url', "路线导航", url)
    }
    //定位当前位置
    function getLocation() {
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                window.myPoint = r.point;
                //我的位置
                var myIcon = new BMap.Icon("/Content/Aed/location.png", new BMap.Size(52, 50));
                myIcon.setImageSize(new BMap.Size(52, 50));//设置图标大小
                var mk = new BMap.Marker(r.point, { icon: myIcon });
                map.addOverlay(mk);
                //弹出创建信息窗口
                var opts = {
                    width: 200,
                    height: 100,
                    title: '我的位置'
                };
                var infoWindow = new BMap.InfoWindow('地址：' + r.address.province + r.address.district + r.address.street + r.address.street_number, opts);

                mk.addEventListener('click', function () {
                    map.openInfoWindow(infoWindow, r.point); // 开启信息窗口
                });
                setTimeout(() => {
                    map.panTo(r.point);
                }, 300);
            }
            else {
                alert('获取当前位置失败');
            }
        });
    }
</script>