<!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>
效果图
标签：function,定位,地图,innerHTML,getElementById,腾讯,var,document From： https://www.cnblogs.com/5tomorrow/p/16998505.html