HTML5 example of obtaining current geographical location and displaying it on Baidu map-HTML Tutorial-php.cn

Table of Contents

1.HTML5 obtains the current geographical location

2. Call Baidu map display

Home

Web Front-end

HTML Tutorial

HTML5 example of obtaining current geographical location and displaying it on Baidu map

jacklove

Jun 20, 2018 pm 05:25 PM

geo html5

1.HTML5 obtains the current geographical location

HTML5 Geolocation API (Geolocation Application Programming Interface) can obtain the current geographical location, using GPS on mobile phones and computers Then based on network positioning

Check whether the browser supports HTML5 Geolocation API

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

Copy after login

Provides 3 calling methods

// 获取用户当前位置void getCurrentPosition(onSuccess, onError, options);// 持续获取用户当前位置,showLocation表示回调方法int watchPosition(showLocation, onError, options);// 取消监控, watchId 为watchPosition返回值void clearWatch(watchId);

Copy after login

onSuccess Callback method after success (required)
onError Failure callback method (optional)
options Other parameters (optional)

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

Copy after login

2. Call Baidu map display

<!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(&#39;container&#39;).innerHTML = &#39;正在搜寻中，请稍候。。。&#39;;        var options = {
            enableHighAccuracy:true, 
            maximumAge:1000
        }        if(navigator.geolocation){            //浏览器支持geolocation
            navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
        }else{            //浏览器不支持geolocation
            alert(&#39;浏览器不支持GeoLocation!&#39;);
        }
    }    // 获取成功
    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.png", new BMap.Size(23, 25), {  
            offset: new BMap.Size(10, 25),              // 定位图标尺寸  
            imageOffset: new BMap.Size(0, 0 - 11 * 25)  // 设置图片偏移  
        }); 

        // 设置标注的经纬度
        var marker = new BMap.Marker(new BMap.Point(longitude,latitude),{icon:icon});        // 把标注添加到地图上
        map.addOverlay(marker);        // 设置点击事件
        marker.addEventListener("click", function(){
            alert("经度:" + longitude + ", 纬度:" + latitude);
        });
    }    // 获取失败
    function onError(error){
        switch(error.code){            case 1:
                alert("位置服务被拒绝");            break;            case 2:
                alert("暂时获取不到位置信息");            break;            case 3:
                alert("获取信息超时");            break;            case 4:
                alert("未知错误");            break;
        }
    }

    window.onload = getLocation;</script></head><body>
   <p id="container" style="width:640px;height:640px"></p></body></html>

Copy after login

HTML5 example of obtaining current geographical location and displaying it on Baidu map

##This article explains how to obtain the current geographical location in HTML5 and display it on Baidu map Examples, please pay attention to php Chinese website for more related content.

Related recommendations:

Create a unique number class through the auto-increment id in php

About php optimization page output , explanation of examples compatible with search engine robot access

Calling ffmpeg through php to obtain video information

The above is the detailed content of HTML5 example of obtaining current geographical location and displaying it on Baidu map. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn