百度地图JavaScriptAPI获取城市位置、名称

  1. 在百度地图获取api密钥ak:

  2. 百度地图链接直达

  3. 百度地图JavaScriptAPI获取城市位置、名称_第1张图片

  4. 百度地图JavaScriptAPI获取城市位置、名称_第2张图片

  5. 百度地图JavaScriptAPI获取城市位置、名称_第3张图片

  6. 百度地图JavaScriptAPI获取城市位置、名称_第4张图片

  7. 百度地图JavaScriptAPI获取城市位置、名称_第5张图片

  8. 百度地图JavaScriptAPI获取城市位置、名称_第6张图片

  9. 在这里插入图片描述

10.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <!--下面我们添加一个meta标签,以便使您的页面更好的在移动平台上展示。-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>JS获取当前地理位置的方法</title>
</head>
 
<body>
<!--可以自己定义body体内容-->
</body>
 
<!--引用百度地图API文件, 您的秘钥的获取方式是注册为百度地图的开发者,创建应用-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥">
    //v3.0版本的引用方式:src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
</script>
<script type="text/javascript">
 
    // 创建一个函数,主要功能是在调用html5的geolocation()前,先判断当前浏览器是否支持html5,(PC绝大部分浏览器不支持或者拒绝html5定位)
    function getLocation() {
        var options = {
            enableHighAccuracy: true,
            maximumAge: 1000
        };
        alert('获取位置信息开始--------->');
        if (navigator.geolocation) {
            // 走到这里说明,浏览器支持geolocation,参数里有两个回调函数,一个是定位成功后的处理操作,一个是定位失败后的处理操作,另外一个参数没有研究过
            navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
        } else {
            // 否则浏览器不支持geolocation
            alert('您的浏览器不支持地理位置定位!');
        }
    }
 
    // 成功时的回调函数
    // 第一步获取定位成功返回的经纬度数据,然后结合百度那边提供的接口进行具体位置的转换,最后还有一个数据提交的方法,要跟自己的业务操作了
    function onSuccess(position) {
        // 返回用户位置
        // 经度
        var longitude = position.coords.longitude;
        // 纬度
        var latitude = position.coords.latitude;
        alert('您的当前地址的经纬度:经度' + longitude + ',纬度' + latitude);
        // 根据经纬度获取地理位置,不太准确,获取城市区域还是可以的
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(longitude, latitude);
        var gc = new BMap.Geocoder();
        gc.getLocation(point, function (rs) {
            var addComp = rs.addressComponents;
            alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
        });
        // 这里后面可以写你的后续操作了
    }
 
    // 失败时的回调函数
    // 这里是错误提示信息
    function onError(error) {
        switch (error.code) {
            case 1:
                alert("位置服务被拒绝!");
                break;
            case 2:
                alert("暂时获取不到位置信息!");
                break;
            case 3:
                alert("获取信息超时!");
                break;
            case 4:
                alert("未知错误!");
                break;
        }
        // 这里后面可以写你的后续操作了,下面的经纬度是天安门的具体位置
        // 经度
        var longitude = 39.9151;
        // 纬度
        var latitude = 116.4041;
        handleData(longitude, latitude);
    }
 
    // 页面载入时请求获取当前地理位置
    window.onload = function () {
        // html5获取地理位置
        getLocation();
    };
</script>
</html>

在这里插入图片描述

9.vue中

在这里插入图片描述
百度地图JavaScriptAPI获取城市位置、名称_第7张图片
百度地图JavaScriptAPI获取城市位置、名称_第8张图片

  1. 关闭代理,不然百度地图不给访问,也用不了它的BMap

你可能感兴趣的:(javascript,前端,html)