【HTML5】调用百度地图API做的小Demo

最新推荐文章于 2023-06-19 20:30:17 发布

土豆.exe

最新推荐文章于 2023-06-19 20:30:17 发布

阅读量842

点赞数 2

分类专栏： Html5 百度地图引用文章标签：街景地图 html5

本文链接：https://blog.csdn.net/weixin_43526443/article/details/105011200

版权

Html5 同时被 2 个专栏收录

1 篇文章 1 订阅

订阅专栏

百度地图引用

1 篇文章 1 订阅

订阅专栏

一、简介：

以下是根据百度地图API自己写的小Demo，写了些功能，有些有冲突注释了，可将功能键化差分使用，借鉴即可。

大部分语句均有注释

* 其中“你的AK”需要自己去官网申请替换，申请类型一定要为浏览器端
* 若使用3D效果地图需要将BMap空间命名换位BMapGL，scrpt申请也需要添加一个参数type=webgl
在这里插入图片描述

二、这是JavaScript API：

https://openapi.baidu.com/map/reference/index.php

三、代码如下：

<!DOCTYPE html>
<html>
<title>HTML5调用百度地图API进行地理定位</title>

<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 {
            position: relative;
            top: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        #result,
        #result table {
            width: 200px;
        }
    </style>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?&v=3.0&ak=AN6hVXLddHcgWYGG0pmfG90dBsGgE1zR"></script>
</head>

<body style="margin:0">
    <div id="container"></div>
    <div style="position: absolute;top: 20px;left: 20px;width: 100%;">
        <input type="text" id='starting' placeholder="请输入出发地" style="width: 180px;height: 30px;padding-left: 5px;border-color:#028FFF;" />
        <input type="text" id='destination' placeholder="请输入目的地" style="width: 180px;height: 30px;padding-left: 5px;border-color:#028FFF;" />
        <button type="button" style="width: 50px;height: 35px;color: white;background-color:#028FFF;border-radius: 5px;border-color:rgba(2, 141, 255, 0.548);" onclick="search()">搜索</button>

        <input type="text" id="suggestId" placeholder="查询地点" style="margin-right: 150px; float: right;width: 180px;height: 30px;padding-left: 5px;border-color:#028FFF;" />
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    </div>
    <div style="position: absolute;top: 100px;right:20px">
        <button type="button" style="width: 50px;height: 50px;color: white;background-color:#028FFF;border-radius: 5px;border-color:rgba(2, 141, 255, 0.548);" onclick="myself()">定位自身</button>
    </div>
    <div id="result" style="position: absolute;top:50px;left: 5px;display: none;">
    </div>
    <div id="resultClose" onclick="closeResilt()"
        style="position: absolute;top: 50px;left: 190px;width: 15px;height: 15px;display: none;">X</div>
</body>

</html>

<script type="text/javascript">
    //默认地理位置设置为欧亚学院南门内108.927928,34.180814
    var x = 108.927928, y = 34.180814;
    var map;
    function G(id) {
        return document.getElementById(id);
    }
    window.onload = function () {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition); //获取当前坐标

            map = new BMap.Map("container");  //创建MAP实例
            var point = new BMap.Point(x, y);
            map.centerAndZoom(point, 19);  // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放



            // 覆盖区域图层测试
            map.addTileLayer(new BMap.PanoramaCoverageLayer());
            var stCtrl = new BMap.PanoramaControl(); //构造全景控件
            stCtrl.setOffset(new BMap.Size(20, 20));
            map.addControl(stCtrl);

            // map.setHeading(64.5);//设置视角倾斜角
            // map.setTilt(73);    //设置视角角度

            // var navi3DCtrl = new BMap.NavigationControl3D();  // 添加3D控件
            // map.addControl(navi3DCtrl);

            // var scaleCtrl = new BMap.ScaleControl();  // 添加比例尺控件
            // map.addControl(scaleCtrl);
            // var zoomCtrl = new BMap.ZoomControl();  // 添加比例尺控件
            // map.addControl(zoomCtrl);

            var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                {
                    "input": "suggestId"
                    , "location": map
                });

            ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
                var str = "";
                var _value = e.fromitem.value;
                var value = "";
                if (e.fromitem.index > -1) {
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                value = "";
                if (e.toitem.index > -1) {
                    _value = e.toitem.value;
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                G("searchResultPanel").innerHTML = str;
            });

            var myValue;
            ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
                var _value = e.item.value;
                myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

                setPlace();
            });

            function setPlace() {
                map.clearOverlays();    //清除地图上所有覆盖物
                function myFun() {
                    var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                    map.centerAndZoom(pp, 18);
                    map.addOverlay(new BMap.Marker(pp));    //添加标注
                }
                var local = new BMap.LocalSearch(map, { //智能搜索
                    onSearchComplete: myFun
                });
                local.search(myValue);
            }


            return;
        }
        alert("你的浏览器不支持获取地理位置！");
    };
    function showPosition(position) {
        x = position.coords.latitude;
        y = position.coords.longitude;
    }
    function search() {
        var starting = G("starting").value//出发地
        var destination = G("destination").value//目标地

        //步行规划路线
        var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, panel: "result", autoViewport: true } });
        walking.search(starting, destination);
        walking.setResultsHtmlSetCallback( //设置结果列表创建后的回调函数
            () => {
                G('result').style.display = 'block'
                G('resultClose').style.display = 'block'
            }
        )
    }
    function closeResilt() {
        G('result').style.display = 'none'
        G('resultClose').style.display = 'none'
        map.clearOverlays();
    }
    function myself() {
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) { //转到当前坐标
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                map.clearOverlays();
                var mk = new BMap.Marker(r.point);// 创建标注
                map.addOverlay(mk); //标记自身
                map.panTo(r.point); //缩放至新位置
            }
            else {
                alert('定位失败，请稍后重试！');
            }
        }, { enableHighAccuracy: true }) //开启精确定位
    }
</script>

土豆.exe

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
【HTML5】调用百度地图API做的小Demo

一、简介：以下是根据百度地图API自己写的小Demo，写了些功能，有些有冲突注释了，可将功能键化差分使用，借鉴即可。       大部分语句均有注释       其中“你的AK”需要自己去官网申请替换，申请类型一定要为浏览器端二、这是JavaScri...
复制链接

扫一扫