利用騰訊位置服務API實作簡單的網頁地圖顯示

 一、基礎   

利用HTML5（以及基于JS的地理定位api）可以很容易的在頁面中通路位置資訊。但這需要我們首先了解JS中的geolocation屬性。

if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(displayLocation, displayError);
            } else {
                alert('oops, not support')
            }
           

利用上述代碼可以判斷你的浏覽器是否支援地理定位（基本上主流的浏覽器都是支援的），navigator對象包含了有關浏覽器的資訊。

這條語句中 getCurrentPosition(succeHandler，errorHandler) 可以擷取目前位置，若成功則得到position對象傳給successHandler，否則将錯誤資訊傳給errorHandler。後續可以利用

來分别獲得目前位置的經緯度。

二、正題

上述方法基本上可以很好地擷取到你的目前位址，我是用PC端進行的測試。但在這方面chrome核心浏覽器顯然不如Firefox的表現，在360極速浏覽器下測試時經常崩潰，會提示類似從谷歌域名下的某網站請求失敗等等。是以我索性換火狐測試了

不過無論什麼核心，這個方法都太慢了，于是我們要考慮站在巨人的肩膀上了，騰訊很良心地給了免費的前端定位元件和地圖api，網址：

http://lbs.qq.com/tool/component-geolocation.html前端定位元件

http://lbs.qq.com/guides/startup.html地圖api

利用騰訊的前端定位元件确實能夠很快的擷取到你的位置（然而還是容易崩潰），具體方法如下（大神也可移步官網檢視）

首先，在你的html檔案引入腳本

我們采用官網給出的方法一

window.onload = getMyLocation;

        function getMyLocation() {
            var geolocation = new qq.maps.Geolocation("YOUR_KEY", "myapp");
            geolocation.getIpLocation(showPosition, showErr);
        }

        function showPosition(position) {
            var coords={
                latitude:position.lat,
                longitude:position.lng
            };
            showMap(coords);
        }
           

上述代碼中的position應該是這麼一個對象（有許多屬性）

Object {module: "geolocation", type: "ip", adcode: 330100, nation: "中國", province: "浙江省"…}
accuracy
:
10000
adcode
:
330100
addr
:
""
city
:
"杭州市"
lat
:
30.274085
lng
:
120.15507
module
:
"geolocation"
nation
:
"中國"
province
:
"浙江省"
type
:
"ip"
__proto__
:
Object
           

是以可以直接将經緯度讀取出來（如代碼所示）并存入coords對象，該對象作為showMap函數的參數在後續需要展示地圖的時候使用。

下面就來看看如何在你的頁面上顯示出地圖，還是靠騰訊爸爸，http://lbs.qq.com/guides/startup.html在這個網址去注冊好你的key（免費喲）

然後步驟正常人都會吧，申請key就好了，一步一步按照要求來做，接下來根據http://lbs.qq.com/javascript_v2/guide-start.html這個網址給出的教程，也很好學，這裡我們向html頁面引入js代碼：

将上面代碼中的YOUR_KEY換成你剛剛申請的。接着就可以成功的使用啦。首先寫好html結構，

别忘了給這個元素加上css樣式（設定好長寬）否則地圖是顯示不出來的。

然後利用下面這個代碼片即可讓地圖出現在你的浏覽器中

function showMap(coords) {
            var myLatAndLong = new qq.maps.LatLng(coords.latitude, coords.longitude);
            map = new qq.maps.Map(
                document.getElementById('map'), {
                    center: myLatAndLong,
                    zoom: 13,
                    draggable: true,
                    scrollwheel: true,
                    disableDoubleClickZoom: false
                }
            )
        }
           

最終的效果應該如下圖所示（似乎暴露了自己的位置=o=）

當然應該也有很大可能會出錯，建議換浏覽器（講道理IE11都可以）或者多重新整理幾次。這個東西還是玄，我自己都經常時好時壞，還望有經驗的開發者多多提點。