如何在行動裝置使用騰訊地圖？－縹緲's blog

騰訊地圖之前沒用過，不過由於在大陸地區沒辦法用 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;

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