<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>騰訊地圖-通過定位顯示當前位置地圖</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
</head>
<body>
<h3 style="color: red;text-align: left;">在微信中必須是https才能定位，不然可能會定位失敗！！！</h3>
<div class="map" style="float: left;">
<script charset="utf-8"
src="https://map.qq.com/api/gljs?v=1.exp&key=xx"></script>
<div id="container" style="height: 400px;width: 400px;margin: auto;"></div>
</div>
<div class="location" style="float: left;margin-left: 20px;">
<script type="text/javascript"
src="https://apis.map.qq.com/tools/geolocation/min?key=xx&referer=myapp"></script>
<div id="pos-area">
<p id="demo">點擊下面的按鈕，獲得對應信息：<br /></p>
</div>
<button onclick="showWatchPosition()">開始監聽位置</button>
<button onclick="showClearWatch()">停止監聽位置</button>
</div>
<script type="text/JavaScript">
var geolocation = new qq.maps.Geolocation();
var options = {timeout: 9000,failTipFlag:true};
var positionNum = 0;
getCurLocation();
//定位方法
function getCurLocation() {
geolocation.getLocation(showPosition, showErr, options);
}
//定位成功執行方法
function showPosition(position) {
positionNum ++;
document.getElementById("demo").innerHTML += "序號：" + positionNum;
document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4);
makeMap(position.lat,position.lng)
};
//定位失敗執行方法
function showErr() {
positionNum ++;
document.getElementById("demo").innerHTML += "序號：" + positionNum;
document.getElementById("demo").appendChild(document.createElement('p')).innerHTML = "定位失敗！";
getCurLocation();
};
function showWatchPosition() {
document.getElementById("demo").innerHTML += "開始監聽位置！<br /><br />";
geolocation.watchPosition(showPosition);
};
function showClearWatch() {
geolocation.clearWatch();
document.getElementById("demo").innerHTML += "停止監聽位置！<br /><br />";
};
</script>
<script type="text/javascript">
var map;
function makeMap(lat, lng) {
//如果存在地圖，則銷燬之前的地圖
if (map) {
map.destroy();
}
var center = new TMap.LatLng(lat, lng);
// 初始化地圖
//MapOptions文檔地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap#2
map = new TMap.Map('container', {
zoom: 15, // 設置地圖縮放
center: center, // 設置地圖中心點座標，
draggable: false,//是否支持拖拽移動地圖
scrollable: false,//是否支持鼠標滾輪縮放地圖
showControl: false,//是否顯示地圖上的控件
doubleClickZoom: false,//是否支持雙擊縮放地圖
});
// MultiMarker文檔地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
var marker = new TMap.MultiMarker({
map: map,
styles: {
// 點標記樣式
marker: new TMap.MarkerStyle({
width: 20, // 樣式寬
height: 30, // 樣式高
anchor: { x: 10, y: 30 }, // 描點位置
}),
},
geometries: [
// 點標記數據數組
{
// 標記位置(緯度，經度，高度)
position: center,
id: 'marker',
},
],
});
}
</script>
</body>
</html>
效果圖
