大家好，欢迎来到IT知识分享网。
<!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 src=”https://map.qq.com/api/gljs?v=2.exp&key=A4LBZ-67BWD-3GS4B-H7HXV-CFMIV-LIBUC”></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=A4LBZ-67BWD-3GS4B-H7HXV-CFMIV-LIBUC&referer=myapp”></script>
<div id=”pos-area”>
<p id=”demo”>点击下面的按钮，获得对应信息：<br /></p>
</div>
<button onclick=”watchPosition()”>开始监听位置</button>
<button onclick=”clearWatch()”>停止监听位置</button>
</div>
<script type=”text/JavaScript”>
var geolocation = new qq.maps.Geolocation();
var options = {timeout: 9000,failTipFlag:true};
var positionNum = 0;
var oldPosition={}
getCurLocation();
//定位方法
function getCurLocation() {
geolocation.getLocation(showPosition, showErr, options);
}
//定位成功执行方法
function showPosition(position) {
positionNum ++;
if(oldPosition.lat!=position.lat||oldPosition.lng!=position.lng){
document.getElementById(“demo”).innerHTML += “序号：” + positionNum+”位置发送变更<br />”;
//document.getElementById(“demo”).appendChild(document.createElement(‘pre’)).innerHTML = JSON.stringify(position, null, 4);
oldPosition=position;
makeMap(position.lat,position.lng)
}
}
//定位失败执行方法
function showErr() {
positionNum ++;
document.getElementById(“demo”).innerHTML += “序号：” + positionNum;
document.getElementById(“demo”).appendChild(document.createElement(‘p’)).innerHTML = “定位失败！”;
getCurLocation();
}
//位置监听方法
function watchPosition() {
document.getElementById(“demo”).innerHTML += “开始监听位置！<br /><br />”;
geolocation.watchPosition(showPosition);
}
//停止监听方法
function clearWatch() {
geolocation.clearWatch();
document.getElementById(“demo”).innerHTML += “停止监听位置！<br /><br />”;
}
</script>
<script type=”text/javascript”>
var map, marker;
function makeMap(lat, lng) {
// 初始化地图
//MapOptions文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap#2
var center = new TMap.LatLng(lat, lng);
if (!map) {
map = new TMap.Map(‘container’, {
zoom: 15, // 设置地图缩放
center: center, // 设置地图中心点坐标，
draggable: false,//是否支持拖拽移动地图
scrollable: false,//是否支持鼠标滚轮缩放地图
showControl: false,//是否显示地图上的控件
doubleClickZoom: false,//是否支持双击缩放地图
});
//创建圆形覆盖物
var circle = new TMap.MultiCircle({
map,
styles: { // 设置圆形样式
‘circle’: new TMap.CircleStyle({
‘color’: ‘rgba(41,91,255,0.16)’,
‘showBorder’: true,
‘borderColor’: ‘rgba(41,91,255,1)’,
‘borderWidth’: 2,
}),
},
geometries: [{
styleId: ‘circle’,
center: center, //圆形中心点坐标
radius: 500, //半径（单位：米）
}],
});
}
// MultiMarker文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
if (marker) {
updateMarker(center)
}
else {
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’,
},
],
});
}
}
//更新marker事件
function updateMarker(center) {
if (marker) {
marker.updateGeometries([
{
id: “marker”,
position: center,
}
])
}
}
</script>
</body>
</html>
效果图
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/27981.html
