最近項目需要用到獲取手機自身的定位系統，一直反饋定位不好用。網絡狀況不好的時候定位不準確。今天難得有時間修改了一下功能。但是遇到了一些問題，我用了一些方法解決，希望看了這個文章的有更好辦法的大神們，可以指點指點我。

1.定位不準

使用官方提供的getCurrentPosition，默認的坐標系是國際的坐標系，用在百度地圖上會有誤差。可以使用官方提供的配置解決。

如在getCurrentPosition方法的第三個參數加上

provider: "baidu",

coordsType: "bd09ll",//百度坐標系

'enableHighAccuracy': true,//開啟精準定位

2.實時獲取定位

使用官方提供的watchPosition方法 ，實時監控坐標的變化。

可用參數

provider: "baidu",

coordsType: "bd09ll",

'enableHighAccuracy': true,

'maximumAge': 2000,

等等 其他我暫時沒有 用

3.實時獲取定位的watchPosition方法出現的問題

用hbuilder 基座 調試 獲取經緯度一切沒問題，但是打正式app包后，發現watchPosition方法第一次監聽沒有問題，后面監聽的經緯度全是（5e-324，5e-324）。無法正確獲取定位。后來發現只要我打開監聽，出去走幾步就可以正常監聽。正常效果和打開地圖一樣，地圖上的標注點會和我走路的軌跡一樣，一直變化。

4.解決方法。

監聽發現經緯度全是（5e-324，5e-324）時候調用getCurrentPosition方法，

部分代碼：

this.dwtimer = plus.geolocation.watchPosition(

position => {

//坐標獲取

//console.log(JSON.stringify(position));

let p = position;

//console.log(p.coords.latitude);

let lat = p.coords.latitude;

let lng = p.coords.longitude;

this.sb.jwdlr = lng + "," + lat;

let province =

p.address.province == undefined ? "" : p.address.province;

let city = p.address.city == undefined ? "" : p.address.city;

let district =

p.address.district == undefined ? "" : p.address.district;

let street = p.address.street == undefined ? "" : p.address.street;

let streetNum =

p.address.streetNum == undefined ? "" : p.address.streetNum;

let poiName = p.address.poiName == undefined ? "" : p.address.poiName;

this.sb.device_place =

city + "" + district + "" + street + "" + streetNum + "" + poiName;

console.log(lat);

if(lat!=5e-324&&lng!=5e-324&&lat!="5e-324"&&lng!="5e-324"){

this.center = {

lng,

lat

};

this.choosedLocation = {

province,

city,

district,

addr: street + streetNum,

lng,

lat

};

}else{

this.hqdw();

}

},

e => {

console.log(e.message);

this.hqdw();

plus.nativeUI.toast("請打開GPS定位" + e.message);

},

{

provider: "baidu",

coordsType: "bd09ll",

'enableHighAccuracy': true,

'maximumAge': 2000,

}

);

們進行數據分析時，為了讓數據分析的結果更好的呈現，我們會選擇數據可視化。

地圖可視化實現的工具有多種，我們今天就單挑兩個一個是編程，一個是可以畫Html5地圖的可視化工具，這里拿億信華辰的ABI為例子。

編程：

看看上海的地鐵圖。

文本提示

首先，把鼠標移到站點、路段、圖標等位置，都會有文本提示彈出。

站點圖標變化

當鼠標移到站點上時，站點圖標做了放大效果，這個效果很貼心，

實現的方法也很簡便，就是在注冊站點矢量圖形時，加入了動態判斷。以下注冊普通站點矢量圖形的代碼：

twaver.Util.registerImage('station',{
    w: linkWidth*1.6,
    h: linkWidth*1.6,
    v: function (data, view) {
        var result = [];
        if(data.getClient('focus')){
            result.push({
                shape: 'circle',
                r: linkWidth*0.7,
                lineColor:  data.getClient('lineColor'),
                lineWidth: linkWidth*0.2,
                fill: 'white',
            });
            result.push({
                shape: 'circle',
                r: linkWidth*0.2,
                fill:  data.getClient('lineColor'),
            });
        }else{
            result.push({
                shape: 'circle',
                r: linkWidth*0.6,
                lineColor: data.getClient('lineColor'),
                lineWidth: linkWidth*0.2,
                fill: 'white',
            });
        }
        return result;
    }
});

動畫效果

從上圖還可以看到，在換乘站圖標中，除了增加了顏色，還實現了旋轉效果。。 來看代碼：

1.    twaver.Util.registerImage('rotateArrow', {
2.        w: 124,
3.        h: 124,
4.        v: [{
5.            shape: 'vector',
6.            name: 'doubleArrow',
7.            rotate: 360,
8.            animate: [{
9.                attr: 'rotate',
10.                to: 0,
11.                dur: 2000,
12.                reverse: false,
13.                repeat: Number.POSITIVE_INFINITY
14.            }]
15.        }]
16.    });

億信ABI

主干線圖，世界航線線路一目了然~

標點地圖，如對去過的城市進行標點著重突出。

渲染地圖，可以看出投放資金的分布情況。

流向圖，清晰的看出從各個地區流向北京的情況。

疫情大屏

可能你沒想到，使用億信ABI只需要簡單的托拉拽就可以！不需要大串大串的代碼就能輕松實現！還等什么呢！你也可以去體驗！

為互聯網的基石之一，HTML5（Hypertext Markup Language 5）引入了一系列前沿特性，為開發者提供了無限的創意空間和更深層次的探索。在本文中，華妹將深入解讀HTML5的一些最引人注目的新特性以及它們的潛力。

1. 語義化標簽

HTML5通過引入諸如`<header>`、`<nav>`、`<article>`和`<footer>`等新的語義化標簽，提供了更加精確和結構化的文檔描述。

這不僅增加了網頁的可讀性，還改進了搜索引擎優化（SEO）和可訪問性。開發者可以更準確地描述網頁內容，使搜索引擎更容易理解頁面的結構。

2. 視頻和音頻支持

HTML5為嵌入式媒體提供了原生支持，不再依賴于陳舊的插件，如Flash。

通過`<video>`和`<audio>`標簽，開發者可以輕松地嵌入視頻和音頻內容，并以標準的方式控制媒體播放。這為多媒體豐富的Web應用程序帶來了新的可能性，而無需用戶額外地安裝或配置。

3. 本地存儲

HTML5引入了Web Storage和IndexedDB，這些本地存儲機制允許開發者在客戶端存儲數據，提高了性能并支持離線訪問。

這對于構建離線Web應用程序或緩存大量數據的應用非常有利。同時，這些新特性提供了更安全的存儲機制，不會像傳統的cookie一樣容易受到跨站點腳本攻擊。

4. Canvas繪圖

HTML5的`<canvas>`元素為開發者提供了在網頁上進行動態圖形和動畫繪制的能力。

通過JavaScript，您可以輕松創建交互式圖表、數據可視化和游戲。這為用戶提供了更引人入勝的網頁體驗，并吸引了廣泛的應用領域，從數據科學到教育。

5. 新的表單元素

HTML5引入了一系列新的表單元素，如`<input type="date">`、`<input type="email">`和`<input type="url">`，簡化了用戶輸入和數據驗證。這些元素不僅提高了用戶體驗，還減少了開發者在前端驗證方面的工作量。

6. 高級的地理位置API

HTML5的地理位置API允許Web應用程序訪問用戶的位置信息，從而創造了各種基于位置的應用，如地圖導航、社交媒體定位和周邊服務推薦。這一功能為個性化和本地化體驗提供了強有力的支持。

7. Web Workers

HTML5引入的Web Workers允許在后臺運行JavaScript線程，提高了網頁的性能和響應能力。

這對于處理復雜計算、多線程任務以及實時數據更新至關重要，為現代Web應用程序帶來了巨大的潛力。

8. 支持SVG

HTML5對可伸縮矢量圖形（SVG）提供了原生支持，這是一種用于創建矢量圖形的XML格式。

SVG允許開發者創建高質量的圖形和動畫，并與其他HTML元素進行無縫集成。這為創建復雜的數據可視化和引人入勝的交互體驗提供了強大的工具。

結論

HTML5的新特性推動了Web開發的不斷發展，并為開發者提供了更多的創新機會。這些新特性不僅增強了網頁的功能和性能，還提高了用戶體驗和可訪問性。

在不斷演進的Web領域中，深入了解和充分利用HTML5的潛力是每位現代開發者的必備技能。隨著HTML5的不斷發展，我們可以期待更多驚喜和創新的出現，為Web的未來鋪平道路。