騰訊地圖之前沒用過,不過由於在大陸地區沒辦法用 Google,所以勢必得用其他方案替代,騰訊地圖應該就是其中一個選擇...

在投入研究之前,由於之前撰寫行動裝置相關的功能,幾乎都會考量跨平台的問題(android、iOS),因此作法上優先考慮要能通用,解決方式不會綁定特定平台的寫法,除非真的找不到解決方式,才會依據各平台去撰寫,比如之前的 GCM、APN...

這次也是一樣,由於之前有使用 Google Map 的經驗,因此想說騰訊地圖應該也有比照提供 Web api 才對,果不其然,在下述路徑可以找到相關說明及範例

http://dev.map.qq.com/doc/example.html

這次要演示的,是如何透過手機定位,並將騰訊地圖顯示在目前的位置,手機如何定位(取得經緯度),在 Delphi 中再容易不過了,只需要置放一個 TLocationSensor 就可以了,這部分就不再多說明。但取得經緯度後,如何要求騰訊地圖來配合呢?其實這部分也很容易,可以透過載入一個動態撰寫的 html,就可以達到這個效果,以下是 html 的內容

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>QQMap</title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
body, button, input, select, textarea {
    font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
    width:603px;
    padding-top:3px;
    overflow:hidden;
}
.btn{
    width:142px;
}
</style>

<script>
function init() {
    var map = new soso.maps.Map(document.getElementById("container"), {
        center: new soso.maps.LatLng(39.916527,116.397128),
        zoomLevel: 10
    });
}
</script>
</head>
<body onload="init();">
<div style="width:360px;height:480px" id="container"></div>

</body>
</html>

假設將這個 html 取名為 qqMap.html,其中經緯度的部分應該要由 TLocationSensor 取得的值來填入,小弟這邊偷懶,直接先寫死成北京的經緯度

接下來的部分,在畫面上擺一個 Button、Webbrower,然後按下 Button 後,執行以下程式碼

procedure TForm1.btnLocateClick(Sender: TObject);
var
  lFile : string;
begin
  lFile := System.IOUtils.TPath.GetDocumentsPath + PathDelim;
  lFile := lFile + 'qqMap.html';
  lFile := 'file:/' + lFile;

  WebBrowser1.URL := lFile;
end;

如果你一切都順利的話,你應該可以得到如下結果

 

to be continued....

文章標籤
創作者介紹

縹緲's blog

縹緲 發表在 痞客邦 PIXNET 留言(0) 人氣()