html怎么设置地图（HTML5获取当前地理位置并在百度地图上展示的实例）

时间：2021-10-26 11:48:43类别：Web前端

html怎么设置地图

HTML5获取当前地理位置并在百度地图上展示的实例

1.HTML5获取当前地理位置

HTML5 Geolocation API（地理位置应用程序接口）可以获取当前地理位置，手机端使用GPS，电脑则根据网络定位

检查浏览器是否支持HTML5 Geolocation API

<script type="text/javascript">
if(navigator.geolocation){
    alert('浏览器支持GeoLocation!');
}else{
    alert('浏览器不支持GeoLocation!');
}
</script>

提供了3个调用方法

// 获取用户当前位置
void getCurrentPosition(onSuccess, onError, options);

// 持续获取用户当前位置,showLocation表示回调方法
int watchPosition(showLocation, onError, options);

// 取消监控, watchId 为watchPosition返回值
void clearWatch(watchId);

onSuccess 成功后回调方法（必选）
onError 失败回调方法（可选）
options 其他参数（可选）

options = {
    enableHighAccuracy, // boolean，是否要求高精度的地理信息
    timeout,            // 最大等待时间，默认0毫秒
    maximumAge          // 应用程序缓存时间
}

2.调用百度地图展示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>  
<title>基于HTML5查找地理位置并调用百度API展示</title> 
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>  
<script type="text/javascript">

    // 调用HTML5 GeoLocation API获取地理位置
    function getLocation(){

        document.getElementById('container').innerHTML = '正在搜寻中，请稍候。。。';

        var options = {
            enableHighAccuracy:true, 
            maximumAge:1000
        }

        if(navigator.geolocation){
            //浏览器支持geolocation
            navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
        }else{
            //浏览器不支持geolocation
            alert('浏览器不支持GeoLocation!');
        }
    }

    // 获取成功
    function onSuccess(position){

        // 经度
        var longitude =position.coords.longitude;

        // 纬度
        var latitude = position.coords.latitude;

        // 使用百度地图API创建地图实例  
        var map =new BMap.Map("container");

        // 创建一个坐标
        var point =new BMap.Point(longitude,latitude);

        // 地图初始化，设置中心点坐标和地图级别  
        map.centerAndZoom(point, 16);

        // 设置标注的图标,可自己定义图标
        var icon = new BMap.Icon("http://api.map.baidu.com/img/markers.jpg" alt="html怎么设置地图（HTML5获取当前地理位置并在百度地图上展示的实例）" border="0" />

html怎么设置地图（HTML5获取当前地理位置并在百度地图上展示的实例）