Tencentmap Jsapi Gl Skill
- 9 installs
- 33 repo stars
- Updated April 26, 2026
- bighardperson/computer-science-skills-collection
Embed Tencent Map JS API GL maps and geospatial features in web or mobile frontends.
About
Skill for integrating Tencent Map JavaScript GL API into applications. Use when adding interactive maps, markers, or location overlays to a frontend.
- Tencent Map GL JavaScript API
- Web map rendering and geospatial UI
Tencentmap Jsapi Gl Skill by the numbers
- 9 all-time installs (skills.sh)
- Ranked #1,708 of 2,244 Frontend Development skills by installs in the Skillselion catalog
- Data as of Jul 30, 2026 (Skillselion catalog sync)
npx skills add https://github.com/bighardperson/computer-science-skills-collection --skill tencentmap-jsapi-gl-skillAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 9 |
|---|---|
| repo stars | ★ 33 |
| Last updated | April 26, 2026 |
| Repository | bighardperson/computer-science-skills-collection ↗ |
What it does
Embed Tencent Map JS API GL maps and geospatial features in web or mobile frontends.
Files
{
"name": "tencentmap-jsapi-gl-skill",
"installedAt": 1776151978710,
"source": "marketplace",
"iconSource": "tencentmap-jsapi-gl-skill",
"version": "1.0.0"
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>切换地图个性化样式</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
.btn {
position: absolute;
top: 30px;
z-index: 1001;
padding: 6px 8px;
}
.btn-left {
left: 30px;
}
.btn-right {
left: 150px;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<input type="button" class="btn btn-left" onclick="changeMapStyle('style2')" value="设置为样式2">
<input type="button" class="btn btn-right" onclick="changeMapStyle('style3')" value="设置为样式3">
<script type="text/javascript">
var map;
function initMap() {
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图
map = new TMap.Map("container", {
zoom: 12,//设置地图缩放级别
center: center,//设置地图中心点坐标
});
}
// 动态设置个性化样式
function changeMapStyle(styleId) {
map.setMapStyleId(styleId);
}
</script>
</body>
</html><!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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/css">
html,body{
width:100%;
height:100%;
overflow: hidden;
}
*{
margin:0px;
padding:0px;
}
body {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
#container{
width: 100%;
height: 100%;
position: relative;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
window.onload = function () {
function init() {
var map = new TMap.Map(document.getElementById("container"), {
center: new TMap.LatLng(39.916527, 116.397128),
zoom: 11,
mapStyleId: 'style3'
});
}
init();
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html><!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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/css">
html,body{
width:100%;
height:100%;
position: relative;
overflow: hidden;
}
*{
margin:0px;
padding:0px;
}
body {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
#container{
position: relative;
width: 100%;
height: 100%;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
window.onload = function () {
function init() {
var map = new TMap.Map(document.getElementById("container"), {
center: new TMap.LatLng(39.916527, 116.397128),
zoom: 11,
mapStyleId: 'style2'
});
}
init();
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>信息窗口偏移设置</title>
</head>
<script charset="utf-8"
src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#mapContainer {
position: relative;
width: 100%;
height: 100%;
}
#buttonContainer {
position: absolute;
left: 30px;
top: 30px;
z-index: 9999;
}
#buttonContainer input {
background: #fff;
padding: 10px;
width: 120xp;
outline-style: none;
margin-right: 10px;
border-radius: 10px;
}
</style>
<body onload="init()">
<div id="buttonContainer">
<input type="button" onclick="setOffset('offset')" value="设置偏移">
<input type="button" onclick="setOffset('origin')" value="清除偏移">
</div>
<div id="mapContainer"></div>
<script>
var map = null;
var marker = null;
var infoWindow = null;
var center = null;
function init() {
center = new TMap.LatLng(40.040074, 116.273519);//设置中心点坐标
//初始化地图
map = new TMap.Map('mapContainer', {
center: center,
zoom: 17
});
//初始marker
marker = new TMap.MultiMarker({
id: 'marker-layer',
map: map,
styles: {
"marker": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
})
},
geometries: [{
"id": 'marker',
"styleId": 'marker',
"position": new TMap.LatLng(40.040074, 116.273519),
"properties": {
"title": "marker"
}
}]
});
//设置infoWindow
infoWindowOne = new TMap.InfoWindow({
map: map,
position: center,
zIndex: 10, //信息窗的z-index值
offset: { x: 0, y: 0 }, //无偏移
content: '无偏移的infoWindow'
});
infoWindowTwo = new TMap.InfoWindow({
map: map,
position: center,
zIndex: 10, //信息窗的z-index值
offset: { x: -3, y: -35 }, //向上偏移35像素坐标，向左偏移3像素坐标
content: '左上方偏移的infoWindow'
});
infoWindowTwo.setMap(null);
}
function setOffset(type) {
switch (type) {
case 'offset':
infoWindowTwo.setMap(map);
infoWindowOne.setMap(null);
break;
case 'origin':
infoWindowTwo.setMap(null);
infoWindowOne.setMap(map);
break;
default: ;
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>包含图文信息的信息窗口</title>
</head>
<script charset="utf-8"
src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<script>
function initMap() {
var center = new TMap.LatLng(40.040452,116.273486);//设置中心点坐标
//初始化地图
var map = new TMap.Map("container", {
center: center
});
//设置infoWindow
var infoWindow = new TMap.InfoWindow({
map: map,
position: center,
content: "<div><img src='https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/em.jpg'><p>Hello World!</p></div>"
});
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>信息窗口实现拖动</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
.info_card {
display: inline-block;
margin: 50px auto;
position: absolute;
width: 200px;
height: 100px;
background-color: #c7c9c8;
border: 5px solid #ffffff;
color: #000000;
/* 禁止文字选中 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.info_card .title {
width: 100%;
height: 40px;
background-color: #000000;
color: #ffffff;
}
.title span.title_name {
position: relative;
top: 7px;
left: 10px;
font-size: 18px;
}
.info_card .title .close_img {
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
background-color: #ffffff;
}
.info_card .title .close_img .min {
width: 0;
height: 0;
font-size: 0;
overflow: hidden;
position: absolute;
border-width: 10px;
}
.info_card .title .close_img .top_img {
border-style: solid dashed dashed;
border-color: #000000 transparent transparent transparent;
top: -2px;
}
.info_card .title .close_img .right_img {
border-style: solid dashed dashed;
border-color: transparent #000000 transparent transparent;
left: 2px;
}
.info_card .title .close_img .bottom_img {
border-style: solid dashed dashed;
border-color: transparent transparent #000000 transparent;
top: 2px;
}
.info_card .title .close_img .left_img {
border-style: solid dashed dashed;
border-color: transparent transparent transparent #000000;
left: -2px;
}
.info_card span.cancle {
width: 0;
height: 0;
font-size: 0;
overflow: hidden;
position: absolute;
}
.info_card span.bot {
border-width: 20px;
border-style: solid dashed dashed;
border-color: #ffffff transparent transparent;
left: 80px;
bottom: -40px;
}
.info_card span.top {
border-width: 20px;
border-style: solid dashed dashed;
border-color: #c7c9c8 transparent transparent;
left: 80px;
bottom: -33px;
}
.info_card .content {
margin-top: 10px;
margin-left: 10px;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<script>
var infoWindow;
function closeInfoWindow() {
infoWindow.close();
}
function initMap() {
//初始化地图
var map = new TMap.Map("container", {
center: new TMap.LatLng(40.040422, 116.273521)
});
//初始化infoWindow
infoWindow = new TMap.InfoWindow({
map: map,
enableCustom: true,
position: new TMap.LatLng(40.040422, 116.273521),
content: '<div id="info_card" class="info_card"><div class="title"><span class="title_name">可拖动信息窗口</span><div class="close_img" onclick="closeInfoWindow()"><span class="min top_img"></span><span class="min right_img"></span><span class="min bottom_img"></span><span class="min left_img"></span></div></div><div align="left" class="content">请拖动我～</div><span class="cancle bot"></span><span class="cancle top"></span></div>',
});
const infoCard = document.getElementById('info_card');
let isDragging = false;
let offset = {
x: 0,
y: 0
}
// 鼠标拖动事件
infoCard.addEventListener('mousedown', (e) => {
e.stopPropagation();
isDragging = true;
// 优化拖动平滑：计算鼠标与DOM中心的偏移量
const rect = infoCard.getBoundingClientRect();
const rectX = rect.left + rect.width / 2;
const rectY = rect.top + rect.height / 2;
offset.x = rectX - e.clientX;
offset.y = rectY - e.clientY;
});
document.addEventListener('mousemove', (e) => {
e.stopPropagation();
if (isDragging) {
// 计算拖动时的经纬度坐标（补偿计算的偏移量）
const p = new TMap.Point(e.clientX + offset.x, e.clientY + offset.y);
const latLng = map.unprojectFromContainer(p);
infoWindow.setPosition(latLng);
}
});
document.addEventListener('mouseup', (e) => {
e.stopPropagation();
isDragging = false;
});
// 触屏拖动事件
infoCard.addEventListener('touchstart', (e) => {
e.stopPropagation();
isDragging = true;
// 优化拖动平滑：计算触摸点与DOM中心的偏移量
const touch = e.touches[0];
const rect = infoCard.getBoundingClientRect();
const rectX = rect.left + rect.width / 2;
const rectY = rect.top + rect.height / 2;
offset.x = rectX - touch.clientX;
offset.y = rectY - touch.clientY;
});
document.addEventListener('touchmove', (e) => {
e.stopPropagation();
if (isDragging) {
const touch = e.touches[0];
// 计算拖动时的经纬度坐标（补偿计算的偏移量）
const p = new TMap.Point(touch.clientX + offset.x, touch.clientY + offset.y);
const latLng = map.unprojectFromContainer(p);
infoWindow.setPosition(latLng);
}
});
document.addEventListener('touchend', (e) => {
e.stopPropagation();
isDragging = false;
});
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>点击标记弹出信息窗口</title>
</head>
<script charset="utf-8"
src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<script>
function initMap() {
var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
//初始化地图
var map = new TMap.Map("container", {
center: center
});
//初始marker
var marker = new TMap.MultiMarker({
id: 'marker-layer',
map: map,
styles: {
"marker": new TMap.MarkerStyle({
"width": 24,
"height": 35,
"anchor": { x: 12, y: 35 },
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
})
},
geometries: [{
"id": 'demo1',
"styleId": 'marker',
"position": new TMap.LatLng(39.984104, 116.307503),
"properties": {
"title": "marker"
}
}, {
"id": 'demo2',
"styleId": 'marker',
"position": new TMap.LatLng(39.974104, 116.347503),
"properties": {
"title": "marker"
},
}]
});
//初始化infoWindow
var infoWindow = new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(39.984104, 116.307503),
offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素
});
infoWindow.close();//初始关闭信息窗关闭
//监听标注点击事件
marker.on("click", function (evt) {
//设置infoWindow
infoWindow.open(); //打开信息窗
infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
infoWindow.setContent(evt.geometry.position.toString());//设置信息窗内容
})
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单信息窗口</title>
</head>
<script charset="utf-8"
src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<script>
function initMap() {
var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
//初始化地图
var map = new TMap.Map("container", {
center: center
});
//初始化infoWindow
var infoWindow = new TMap.InfoWindow({
map: map,
position: center, //设置信息框位置
content: 'Hello World!' //设置信息框内容
});
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>CustomInfoWindow</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src='https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'></script>
<style>
* {
padding: 0px;
margin: 0px;
overflow: hidden;
}
#mapContainer {
position: relative;
width: 100vw;
height: 100vh;
}
.info_card {
display: inline-block;
margin: 50px auto;
position: absolute;
width: 200px;
height:100px;
background-color: #c7c9c8;
border: 5px solid #ffffff;
color: #000000;
}
.info_card .title{
width: 100%;
height:40px;
background-color: #000000;
color: #ffffff;
}
.title span.title_name{
position: relative;
top: 7px;
left: 10px;
font-size: 18px;
}
.info_card .title .close_img{
position: absolute;
top:10px;
right: 10px;
width: 20px;
height: 20px;
background-color: #ffffff;
}
.info_card .title .close_img .min {
width: 0;
height: 0;
font-size:0;
overflow:hidden;
position:absolute;
border-width:10px;
}
.info_card .title .close_img .top_img {
border-style:solid dashed dashed;
border-color:#000000 transparent transparent transparent;
top:-2px;
}
.info_card .title .close_img .right_img {
border-style:solid dashed dashed;
border-color:transparent #000000 transparent transparent;
left:2px;
}
.info_card .title .close_img .bottom_img{
border-style:solid dashed dashed;
border-color:transparent transparent #000000 transparent;
top:2px;
}
.info_card .title .close_img .left_img{
border-style:solid dashed dashed;
border-color:transparent transparent transparent #000000;
left:-2px;
}
.info_card span.cancle{
width:0;
height:0;
font-size:0;
overflow:hidden;
position:absolute;
}
.info_card span.bot{
border-width:20px;
border-style:solid dashed dashed;
border-color:#ffffff transparent transparent;
left:80px;
bottom:-40px;
}
.info_card span.top{
border-width:20px;
border-style:solid dashed dashed;
border-color:#c7c9c8 transparent transparent;
left:80px;
bottom:-33px;
}
.info_card .content{
margin-top: 10px;
margin-left: 10px;
}
</style>
</head>
<body>
<div id='mapContainer'></div>
<script>
window.onload = init;
var map;
var infoWindow;
var marker;
var rightClicked = false;
function closeInfoWindow() {
infoWindow.close();
}
function openInfoWindow() {
infoWindow.open();
}
function init() {
map = new TMap.Map('mapContainer', {
zoom: 16,
pitch: 30,
rotation: 10,
center: new TMap.LatLng(40.040422, 116.273521),
});
marker = new TMap.MultiMarker({
id: 'marker-layer', // 图层id
map: map,
styles: {
// 点标注的相关样式
marker: new TMap.MarkerStyle({
width: 25,
height: 35,
anchor: { x: 16, y: 32 },
src:
'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',
}),
},
geometries: [
{
// 点标注数据数组
id: 'demo',
styleId: 'marker',
position: new TMap.LatLng(40.040422, 116.273521),
},
],
});
marker.on('click', openInfoWindow);
infoWindow = new TMap.InfoWindow({
map: map,
enableCustom: true,
position: new TMap.LatLng(40.040422, 116.273521),
offset: { y: -70, x: -5 },
content:
'<div class="info_card"><div class="title"><span class="title_name">腾讯北京总部大楼</span><div class="close_img" onclick="closeInfoWindow()"><span class="min top_img"></span><span class="min right_img"></span><span class="min bottom_img"></span><span class="min left_img"></span></div></div><div align="left" class="content">点击右键变更内容</div><span class="cancle bot"></span><span class="cancle top"></span></div>',
});
map.on('rightclick', function () {
// infoWindow的内容可以动态更新
rightClicked = !rightClicked;
if (rightClicked) {
infoWindow.setContent(
'<div class="info_card"><div class="title"><span class="title_name">腾讯北京总部大楼</span><div class="close_img" onclick="closeInfoWindow()"><span class="min top_img"></span><span class="min right_img"></span><span class="min bottom_img"></span><span class="min left_img"></span></div></div><div align="left" class="content">Tencent Beijing <br /> 点击右键变更内容</div><span class="cancle bot"></span><span class="cancle top"></span></div>'
);
} else {
infoWindow.setContent(
'<div class="info_card"><div class="title"><span class="title_name">腾讯北京总部大楼</span><div class="close_img" onclick="closeInfoWindow()"><span class="min top_img"></span><span class="min right_img"></span><span class="min bottom_img"></span><span class="min left_img"></span></div></div><div align="left" class="content">点击右键变更内容</div><span class="cancle bot"></span><span class="cancle top"></span></div>'
);
}
});
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>判断多边形是否在另一个多边形内</title>
</head>
<script charset="utf-8"
src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=geometry"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#info {
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 60px;
height: 100px;
width: 420px;
line-height: 33px;
background-color: #fff;
border-radius: 10px;
font-size: 18px;
text-align: center;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<div id="info"></div>
<script type="text/javascript">
var map;
function initMap() {
var center = new TMap.LatLng(40.040452, 116.273486);//设置中心点坐标
//初始化地图
map = new TMap.Map('container', {
center: center,
zoom: 17,
baseMap: {
type: 'vector',
features: ['base', 'building3d', 'label'],
}
});
var path0 = [
new TMap.LatLng(40.041117253378246, 116.2722415837743),
new TMap.LatLng(40.03942536171407, 116.2726277820093),
new TMap.LatLng(40.03970460886076, 116.27483769345417),
new TMap.LatLng(40.041404706498625, 116.27443003983899),
];
var path1 = [
new TMap.LatLng(40.04073540132186, 116.27298706942383),
new TMap.LatLng(40.04002894945164, 116.27307290694716),
new TMap.LatLng(40.04021788498498, 116.27441411815198),
new TMap.LatLng(40.04085861888776, 116.27390982274846)
];
var path2 = [
new TMap.LatLng(40.04329006723823, 116.2720643160992),
new TMap.LatLng(40.042181140299455, 116.27236474741039),
new TMap.LatLng(40.042320784222156, 116.27390982274846),
new TMap.LatLng(40.0434214942257, 116.27365231017848)
];
var path3 = [
new TMap.LatLng(40.039692150139594, 116.27183899269767),
new TMap.LatLng(40.03990573041772, 116.27289050220497),
new TMap.LatLng(40.03903497572191, 116.27313728512036),
new TMap.LatLng(40.03898568742912, 116.2719033706253)
]
var position1 = new TMap.LatLng(40.04202067344373, 116.2706967910799);
var position2 = new TMap.LatLng(40.040443786954235, 116.2736683713456);
var polygon = new TMap.MultiPolygon({
id: 'polygon-layer', //图层id
map: map,
styles: {
// 多边形的相关样式
base: new TMap.PolygonStyle({
color: 'rgba(255,255,255,0.9)', // 面填充色
}),
red: new TMap.PolygonStyle({
color: 'rgba(255,0,0,0.5)', // 面填充色
}),
green: new TMap.PolygonStyle({
color: 'rgba(0,255,0,0.5)', // 面填充色
}),
blue: new TMap.PolygonStyle({
color: 'rgba(0,0,255,0.5)', // 面填充色
}),
},
geometries: [
{
styleId:'base',
id: 'polygon0',
paths: path0,
},
{
id: 'polygon1',
styleId:'red',
paths: path1,
},
{
id: 'polygon2',
styleId:'green',
paths: path2,
},
{
id: 'polygon3',
styleId:'blue',
paths: path3,
}
]
});
var infoDom = document.getElementById('info');
infoDom.innerText =
`${TMap.geometry.isPolygonInPolygon(path1, path0) ? '红色多边形在白色多边形内' : '红色多边形不在白色多边形内'}`+'\n'+
`${TMap.geometry.isPolygonInPolygon(path2, path0) ? '绿色多边形在白色多边形内' : '绿色多边形不在白色多边形内'}`+'\n'+
`${TMap.geometry.isPolygonInPolygon(path3, path0) ? '蓝色多边形在白色多边形内' : '蓝色多边形不在白色多边形内'}`+'\n';
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算点与多边形的关系</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=geometry"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<script type="text/javascript">
var map;
function initMap() {
var center = new TMap.LatLng(40.040452, 116.273486);//设置中心点坐标
//初始化地图
map = new TMap.Map('container', {
center: center,
zoom: 17,
baseMap: {
type: 'vector',
features: ['base', 'building3d', 'label'],
}
});
var path = [
new TMap.LatLng(40.041117253378246, 116.2722415837743),
new TMap.LatLng(40.03942536171407, 116.2726277820093),
new TMap.LatLng(40.03970460886076, 116.27483769345417),
new TMap.LatLng(40.041404706498625, 116.27443003983899),
];
var position1 = new TMap.LatLng(40.04202067344373, 116.2706967910799);
var position2 = new TMap.LatLng(40.040443786954235, 116.2736683713456);
var polygon = new TMap.MultiPolygon({
id: 'polygon-layer', //图层id
map: map,
geometries: [
{
id: 'polygon', //多边形图形数据的标志信息
paths: path, //多边形的位置信息
}
]
});
var getLabelText = function(pos) {
return TMap.geometry.isPointInPolygon(pos, path) ? '在多边形内部' : '在多边形外部'
};
var label = new TMap.MultiLabel({
id: 'label-layer', //图层id
map: map,
styles: {
building: new TMap.LabelStyle({
size: 20, //文字大小属性
alignment: 'center', //文字水平对齐属性
verticalAlignment: 'middle' //文字垂直对齐属性
})
},
geometries: [
{
styleId: 'building',
position: position1,
content: getLabelText(position1),
},
{
styleId: 'building',
position: position2,
content: getLabelText(position2),
},
]
});
var marker = new TMap.MultiMarker({
id: 'marker-layer',
map: map,
styles: {
marker: new TMap.MarkerStyle({
anchor: { x: 20, y: 60 },
})
},
geometries: [
{
styleId: 'marker',
position: position1,
},
{
styleId: 'marker',
position: position2,
},
],
});
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>判断点是否在多边形的边上</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=geometry"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<script type="text/javascript">
var map;
function initMap() {
var center = new TMap.LatLng(40.040452, 116.273486);//设置中心点坐标
//初始化地图
map = new TMap.Map('container', {
center: center,
zoom: 17,
baseMap: {
type: 'vector',
features: ['base', 'building3d', 'label'],
}
});
var path = [
new TMap.LatLng(40.041117253378246, 116.2722415837743),
new TMap.LatLng(40.03942536171407, 116.2726277820093),
new TMap.LatLng(40.03970460886076, 116.27483769345417),
new TMap.LatLng(40.041404706498625, 116.27443003983899),
];
var position1 = new TMap.LatLng(40.04202067344373, 116.2706967910799);
var position2 = new TMap.LatLng(40.040443786954235, 116.2736683713456);
var position3 = new TMap.LatLng(40.03957540757015, 116.27386486303988);
var polygon = new TMap.MultiPolygon({
id: 'polygon-layer', //图层id
map: map,
geometries: [
{
id: 'polygon', //多边形图形数据的标志信息
paths: path, //多边形的位置信息
}
]
});
var getLabelText = function(pos) {
// isPointOnSegment(point: LatLng, segment: LatLng[], tolerance: Number) tolerance单位为米
return TMap.geometry.isPointOnPolygon(pos, path, 10) ? '在多边形边上' : '不在多边形边上'
};
var label = new TMap.MultiMarker({
id: 'label-layer', //图层id
map: map,
styles: {
building: new TMap.MarkerStyle({
size: 20, //文字大小属性
alignment: 'center', //文字水平对齐属性
verticalAlignment: 'bottom', //文字垂直对齐属性
offset:{
x: 0,
y: 35
}
})
},
geometries: [
{
styleId: 'building',
position: position1,
content: getLabelText(position1),
},
{
styleId: 'building',
position: position2,
content: getLabelText(position2),
},
{
styleId: 'building',
position: position3,
content: getLabelText(position3),
},
]
});
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算简单多边形的面积</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=geometry"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#info {
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 60px;
height: 80px;
width: 420px;
background-color: #fff;
border-radius: 10px;
font-size: 18px;
line-height: 80px;
text-align: center;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<div id="info"></div>
<script type="text/javascript">
var map;
function initMap() {
var center = new TMap.LatLng(40.040452, 116.273486);//设置中心点坐标
//初始化地图
map = new TMap.Map('container', {
center: center,
zoom: 17
});
var path = [
new TMap.LatLng(40.041117253378246, 116.2722415837743),
new TMap.LatLng(40.03942536171407, 116.2726277820093),
new TMap.LatLng(40.03970460886076, 116.27483769345417),
new TMap.LatLng(40.041404706498625, 116.27443003983899),
];
var polygon = new TMap.MultiPolygon({
id: 'polygon-layer', //图层id
map: map,
geometries: [
{
id: 'polygon', //多边形图形数据的标志信息
paths: path, //多边形的位置信息
}
]
});
// 计算路径围成的多边形的面积
var area = TMap.geometry.computeArea(path);
var infoDom = document.getElementById('info');
infoDom.innerText = `腾讯北京总部大楼占地面积约为${area.toFixed(2)}平方米`;
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算简单多边形的形心</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=geometry"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#info {
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 60px;
height: 80px;
width: 420px;
background-color: #fff;
border-radius: 10px;
font-size: 18px;
line-height: 80px;
text-align: center;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<div id="info">计算多边形的形心，在该点添加文本标注</div>
<script type="text/javascript">
var map;
function initMap() {
var center = new TMap.LatLng(40.040452, 116.273486);//设置中心点坐标
//初始化地图
map = new TMap.Map('container', {
center: center,
zoom: 17,
baseMap: {
type: 'vector',
features: ['base', 'building3d', 'label'],
}
});
var path = [
new TMap.LatLng(40.041117253378246, 116.2722415837743),
new TMap.LatLng(40.03942536171407, 116.2726277820093),
new TMap.LatLng(40.03970460886076, 116.27483769345417),
new TMap.LatLng(40.041404706498625, 116.27443003983899),
];
// 计算多边形形心
var position = TMap.geometry.computeCentroid(path);
var polygon = new TMap.MultiPolygon({
id: 'polygon-layer', //图层id
map: map,
geometries: [
{
id: 'polygon', //多边形图形数据的标志信息
paths: path, //多边形的位置信息
}
]
});
// 在形心位置添加文本标注
var label = new TMap.MultiLabel({
id: 'label-layer', //图层id
map: map,
styles: {
building: new TMap.LabelStyle({
color: '#3777FF', //颜色属性
size: 20, //文字大小属性
alignment: 'center', //文字水平对齐属性
verticalAlignment: 'middle' //文字垂直对齐属性
})
},
geometries: [
{
id: 'label',
styleId: 'building',
position: position,
content: '腾讯北京总部',
}
]
});
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>计算多边形与多边形的交集区域</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<style>
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#mapContainer {
width: 100%;
height: 100%;
}
.btnContainer {
position: absolute;
left: 20px;
top: 20px;
z-index: 10000;
}
.btnContainer button {
padding: 10px 14px;
box-sizing: border-box;
border: none;
background-color: #3876ff;
border-radius: 2px;
color: #fff;
font-size: 14px;
line-height: 14px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<div class="btnContainer">
<button class="btn1">计算左1和左2交集区域</button>
<button class="btn2">计算左2和左3交集区域</button>
<button class="btn3">计算左3和左1交集区域</button>
</div>
<script charset="utf-8"
src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=geometry"></script>
<script>
window.onload = initMap;
function initMap() {
var center = new TMap.LatLng(40.040452, 116.273486); //设置中心点坐标
//初始化地图
map = new TMap.Map('mapContainer', {
center: center,
zoom: 11
});
const p1 = [
// 左多边形
new TMap.LatLng(40.01328762425296, 116.2893131162964),
new TMap.LatLng(39.97042810128267, 116.2446964303781),
new TMap.LatLng(39.952803198235955, 116.30063889381927),
new TMap.LatLng(40.00434982223178, 116.3377050664094)
];
const p2 = [
// 中间多边形
new TMap.LatLng(40.01854460829232, 116.34491237943803),
new TMap.LatLng(39.99856591344266, 116.30235492020074),
new TMap.LatLng(39.96516741243243, 116.35520853903654),
new TMap.LatLng(39.98147423199272, 116.37648726800035)
];
const p3 = [
// 右多边形
new TMap.LatLng(39.9404367485336, 116.33009007781648),
new TMap.LatLng(40.00250953930389, 116.37839317743058),
new TMap.LatLng(39.983315080275965, 116.40079037547248)
];
const geos = [
{
id: '1',
'paths': p1 //多边形的位置信息
},
{
id: '2',
'paths': p2 //多边形的位置信息
},
{
id: '3',
'paths': p3 //多边形的位置信息
}
];
//初始化polygon
var polygon = new TMap.MultiPolygon({
id: 'polygon-layer', //图层id
map: map, //显示多边形图层的底图
styles: {
heigh: new TMap.PolygonStyle({
color: 'rgb(255,255,0)'
})
},
geometries: geos
});
const testValue = {
'null': null,
'undefined': undefined,
'[]': [],
'': '',
};
document.querySelector('.btn1').addEventListener('click', (e) => {
var area = TMap.geometry.computePolygonIntersection(p1, p2);
console.log('计算左1和左2交集区域', area);
polygon.setGeometries([
...geos,
{
styleId: 'heigh',
paths: area
}
]);
});
document.querySelector('.btn2').addEventListener('click', (e) => {
var area = TMap.geometry.computePolygonIntersection(p2, p3);
console.log('计算左2和左3交集区域', area);
const g = [...geos];
if (area) {
g.push({
styleId: 'heigh',
paths: area
});
}
polygon.setGeometries(g);
});
document.querySelector('.btn3').addEventListener('click', (e) => {
var area = TMap.geometry.computePolygonIntersection(p1, p3);
console.log('计算左3和左1交集区域', area);
const g = [...geos];
if (area) {
g.push({
styleId: 'heigh',
paths: area
});
}
polygon.setGeometries(g);
});
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算线上距离P最近的点</title>
</head>
<script charset="utf-8"
src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=geometry"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
overflow: hidden;
}
#container {
width: 100%;
height: 100%;
position: relative;
}
#info {
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 60px;
height: 80px;
width: 400px;
background-color: #fff;
border-radius: 10px;
font-size: 18px;
line-height: 80px;
text-align: center;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<script type="text/javascript">
var map;
function initMap() {
var center = new TMap.LatLng(40.02288398281758, 116.28905901239955);//设置中心点坐标
//初始化地图
map = new TMap.Map('container', {
center: center,
zoom: 14,
baseMap:[ {
type: "vector",
features: ['base','label'], // 隐藏矢量文字
}]
});
var p = new TMap.LatLng(40.02797812361742, 116.30163420885106);
var path = [new TMap.LatLng(40.040452, 116.273486), new TMap.LatLng(40.006540, 116.303695)];
var polylineLayer = new TMap.MultiPolyline({
id: 'polyline-layer', //图层唯一标识
map: map,//绘制到目标地图
//折线数据定义
geometries: [
{
id: 'line',
paths: path
}
]
});
var marker = new TMap.MultiMarker({
id: 'marker-layer',
map: map,
styles: {
marker: new TMap.MarkerStyle({
size: 16, //文字大小属性
offset: {
x: 0,
y: 35
}
})
},
geometries: [
{
styleId: 'marker',
position: p,
content: 'P'
},
{
styleId: 'marker',
position: TMap.geometry.computeClosestPointOnLine(p, path),
content: '线上距离P最近的点'
},
],
});
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>判断线是否与多边形相交</title>
</head>
<script charset="utf-8"
src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=geometry"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#info {
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 60px;
height: 100px;
width: 420px;
line-height: 50px;
background-color: #fff;
border-radius: 10px;
font-size: 18px;
text-align: center;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<div id="info"></div>
<script type="text/javascript">
var map;
function initMap() {
var center = new TMap.LatLng(40.040452, 116.273486);//设置中心点坐标
//初始化地图
map = new TMap.Map('container', {
center: center,
zoom: 18,
baseMap: {
type: 'vector',
features: ['base', 'building3d', 'label'],
}
});
var lineRed = [
new TMap.LatLng(40.04154035247704, 116.27144748316823),
new TMap.LatLng(40.04194283332685, 116.27456963249642),
];
var lineBlue = [
new TMap.LatLng(40.04016040071088, 116.27174789647142),
new TMap.LatLng(40.040587531642345, 116.2749236907166),
];
var path = [
new TMap.LatLng(40.041117253378246, 116.2722415837743),
new TMap.LatLng(40.03942536171407, 116.2726277820093),
new TMap.LatLng(40.03970460886076, 116.27483769345417),
new TMap.LatLng(40.041404706498625, 116.27443003983899),
];
var polygon = new TMap.MultiPolygon({
id: 'polygon-layer', //图层id
map: map,
geometries: [
{
id: 'polygon', //多边形图形数据的标志信息
paths: path, //多边形的位置信息
}
]
});
var polylineLayer = new TMap.MultiPolyline({
id: 'polyline-layer', //图层唯一标识
map: map,//绘制到目标地图
//折线数据定义
styles: {
red: new TMap.PolylineStyle({
color: 'rgba(255,0,0,0.8)', // 面填充色
}),
blue: new TMap.PolylineStyle({
color: 'rgba(0,0,255,0.8)', // 面填充色
}),
},
geometries: [
{
styleId: 'red',
paths: lineRed
},
{
styleId: 'blue',
paths: lineBlue
}
]
});
var infoDom = document.getElementById('info');
infoDom.innerText =
`${TMap.geometry.isLinePolygonIntersect(lineRed, path) ? '红线与多边形相交' : '红线与多边形不相交'}` + '\n' +
`${TMap.geometry.isLinePolygonIntersect(lineBlue, path) ? '蓝线与多边形相交' : '蓝线与多边形不相交'}`;
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算路径距离</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=geometry"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
overflow: hidden;
}
#container {
width: 100%;
height: 100%;
position: relative;
}
#info {
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 60px;
height: 80px;
width: 400px;
background-color: #fff;
border-radius: 10px;
font-size: 18px;
line-height: 80px;
text-align: center;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<div id="info"></div>
<script type="text/javascript">
var map;
function initMap() {
var center = new TMap.LatLng(40.02288398281758, 116.28905901239955);//设置中心点坐标
//初始化地图
map = new TMap.Map('container', {
center: center,
zoom: 14,
});
var tencent = new TMap.LatLng(40.040452, 116.273486);
var oldSummerPalace = new TMap.LatLng(40.006540, 116.303695);
var path = [tencent, oldSummerPalace];
var polylineLayer = new TMap.MultiPolyline({
id: 'polyline-layer', //图层唯一标识
map: map,//绘制到目标地图
//折线数据定义
geometries: [
{
id: 'line',
paths: path
}
]
});
// 计算路径的实际距离
var distance = TMap.geometry.computeDistance(path);
var infoDom = document.getElementById('info');
infoDom.innerText = `腾讯北京总部到圆明园的直线距离为${distance.toFixed(2)}米`;
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>路径顺逆时针判断与转化</title>
</head>
<script charset="utf-8"
src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=geometry"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#info {
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 60px;
height: 80px;
width: 400px;
background-color: #fff;
border-radius: 10px;
font-size: 18px;
line-height: 80px;
text-align: center;
}
.btnContainer {
position: absolute;
left: 20px;
top: 20px;
z-index: 10000;
}
.btnContainer button {
padding: 10px 14px;
box-sizing: border-box;
border: none;
background-color: #3876ff;
border-radius: 2px;
color: #fff;
font-size: 14px;
line-height: 14px;
margin-bottom: 10px;
}
</style>
<body>
<div id="container"></div>
<div class="btnContainer">
<button class="btn1" onclick="transform()">路径变为顺时针</button>
<button class="btn2" onclick="transformAnti()">路径变为逆时针</button>
</div>
<div id="info"></div>
<script type="text/javascript">
var center = new TMap.LatLng(39.980309851613775, 116.30836114421982);
//初始化地图
var map = new TMap.Map("container", {
zoom: 17,
center: center
});
var paths = [
new TMap.LatLng(39.98250495981251, 116.30587233910774),
new TMap.LatLng(39.979150868392445, 116.30612982298771),
new TMap.LatLng(39.97921663629626, 116.3083828075105),
new TMap.LatLng(39.97892067935242, 116.31089327579048),
new TMap.LatLng(39.982554283513245, 116.31100056083596),
new TMap.LatLng(39.98250495981251, 116.3059933910774),
];
var polylineLayer = new TMap.MultiPolyline({
map, // 绘制到目标地图
styles: { // 折线样式定义
'arrow_animation': new TMap.PolylineStyle({
'color': 'rgba(255,0,0,0.6)', //线填充色
'borderWidth': 2, //边线宽度
'borderColor': '#008FFF', //边线颜色
'width': 10, //折线宽度
showArrow: true,
arrowOptions: {
width: 8, // 箭头图标宽度
height: 5, // 箭头图标高度
space: 50, // 箭头图标之间的孔隙长度
animSpeed: 50 // 箭头动态移动的速度 单位(像素/秒)
},
})
},
geometries: [{
styleId: 'arrow_animation',
paths: paths
}],
});
var infoDom = document.getElementById('info');
infoDom.innerText = `路线为${TMap.geometry.isClockwise(paths) ? '顺时针' : '逆时针'}`;
function transform() {
paths = TMap.geometry.transfromClockwise(paths);
polylineLayer.setGeometries([{
styleId: 'arrow_animation',
paths: paths
}]);
infoDom.innerText = `路线为${TMap.geometry.isClockwise(paths) ? '顺时针' : '逆时针'}`;
}
function transformAnti() {
paths = TMap.geometry.transfromAntiClockwise(paths);
polylineLayer.setGeometries([{
styleId: 'arrow_animation',
paths: paths
}]);
infoDom.innerText = `路线为${TMap.geometry.isClockwise(paths) ? '顺时针' : '逆时针'}`;
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>WMS标准图层</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
</style>
<body>
<div id="container"></div>
<script type="text/javascript">
// 初始化地图
var map = new TMap.Map('container', {
center: new TMap.LatLng(49.69137687941989, -104.06355092253557), // 地图中心点经纬度。
zoom: 3.5, // 地图缩放级别
});
// WMSLayer文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocLayer#WMSLayer
var WMSLayer = new TMap.WMSLayer({
url: 'https://ahocevar.com/geoserver/wms', // 地图服务地址
map: map, // 展示图层的地图对象
minZoom: 3, // 最小缩放层级，当地图缩放层级小于该值时该图层不显示，默认为3
maxZoom: 20, // 最大缩放层级，当地图缩放层级大于该值时该图层不显示，默认为20
visible: true, // 是否可见，默认为true
zIndex: 1, // 图层绘制顺序
opacity: 0.9, // 图层透明度，默认为1
params: {
// OGC标准的WMS地图服务的GetMap接口的参数
layers: 'topp:states', // 请求的图层名称
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义贴地图层</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
</style>
<body>
<div id="container"></div>
<canvas id="canvas" width=300 height=300 style="display: none;"></canvas>
<script type="text/javascript">
var center = new TMap.LatLng(39.98187197091523, 116.31111860275269);
//初始化地图
var map = new TMap.Map("container", {
zoom: 15, //设置地图缩放级别
center: center, //设置地图中心点坐标
});
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
// 画布的宽高
var cWidth = canvas.width;
var cHeight = canvas.height;
// 中心点
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
// 半径
var radius = centerX;
var drawCircle = function (r, lineWidth = 1, color = "rgba(123,153,255,0.9)") {
ctx.beginPath();
ctx.setLineDash([]);
ctx.arc(centerX, centerY, r, 0, 2 * Math.PI);
ctx.lineWidth = lineWidth;
ctx.strokeStyle = color;
ctx.stroke();
};
var drawSector = function (sAngle, eAngle) {
var blob = 50;
var increase = 0;
if (sAngle < eAngle) {
increase = (eAngle - sAngle) / blob;
} else if (sAngle > eAngle) {
increase = (Math.PI * 2 - sAngle + eAngle) / blob;
} else {
return;
}
var angle1 = sAngle;
var angle2 = sAngle + increase;
for (var i = 0; i < blob; i++) {
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, angle1, angle2);
ctx.fillStyle = "rgba(42,91,255," + i / blob + ")";
ctx.fill();
angle1 = angle2;
angle2 = angle1 + increase;
if (angle2 >= Math.PI * 2) {
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, angle1, Math.PI * 2);
ctx.fillStyle = "rgba(42,91,255," + i / blob + ")";
ctx.fill();
angle1 = 0;
angle2 = angle1 + increase;
}
}
};
var init = function () {
drawCircle(1 * centerY, 2.5);
ctx.fillStyle = "rgba(42,91,255,0.07)";
ctx.arc(150, 150, 150, 0, 2 * Math.PI);
ctx.fill();
drawCircle(0.6 * centerY);
drawCircle(0.3 * centerY);
};
function scan() {
var angle = Math.PI / 4;
var scanBegin = 0;
var scanEnd = angle;
var pointRadius = 1;
// 绘制雷达扫描
var move = () => {
ctx.clearRect(0, 0, cWidth, cHeight); // 清除画布
init(); // 重绘背景
drawSector(scanBegin, scanEnd); // 绘制扇形扫描区域
// 改变点的半径以及扇形的角度
pointRadius += 0.08;
scanBegin += angle / 25;
scanEnd = scanBegin + angle;
// 超过阈值变为初始值
if (scanBegin >= Math.PI * 2) {
scanBegin = 0;
scanEnd = scanBegin + angle;
}
if (pointRadius >= 7) pointRadius = 0;
// 再次绘制
canvasGroundLayer.refresh();
animID = window.requestAnimFrame(move);
}
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
canvasGroundLayer.refresh();
})();
animID = window.requestAnimFrame(move);
}
scan();
var imageSW = new TMap.LatLng(39.97897813636327, 116.3060975074768);
var imageNE = new TMap.LatLng(39.98506162381882, 116.316397190094);
var canvasLatLngBounds = new TMap.LatLngBounds(imageSW, imageNE);
var canvasGroundLayer = new TMap.CanvasGroundLayer({
bounds: canvasLatLngBounds,
canvas: canvas, // canvas节点
map: map
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>静态图贴地图层</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
</style>
<body>
<div id="container"></div>
<script type="text/javascript">
var center = new TMap.LatLng(39.98185552901966, 116.31103277206421);
//初始化地图
var map = new TMap.Map("container", {
zoom: 16, //设置地图缩放级别
center: center //设置地图中心点坐标
});
var imageSW = new TMap.LatLng(39.97897813636327, 116.3060975074768);
var imageNE = new TMap.LatLng(39.98506162381882, 116.316397190094);
var imageLatLngBounds = new TMap.LatLngBounds(imageSW, imageNE);
var imageGroundLayer = new TMap.ImageGroundLayer({
bounds: imageLatLngBounds,
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/bg.jpg',
map: map
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2D/3D模式切换</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
width: 100%;
height: 100%;
position: relative;
}
input {
position: absolute;
top: 30px;
z-index: 9999;
}
#btn-2d {
left: 20px;
}
#btn-3d {
left: 80px;
}
</style>
<body>
<div id="container"></div>
<input type="button" id="btn-2d" onclick="change2D()" value="切换2D">
<input type="button" id="btn-3d" onclick="change3D()" value="切换3D">
<script type="text/javascript">
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图
var map = new TMap.Map("container", {
zoom:12,//设置地图缩放级别
center: center//设置地图中心点坐标
});
function change2D() {
map.setViewMode('2D');
}
function change3D() {
map.setViewMode('3D');
map.setPitch(70);
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>切换底图类型</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
.btn {
position: absolute;
top: 30px;
z-index: 1001;
padding: 6px 8px;
}
.btn-left {
left: 30px;
}
.btn-right {
left: 150px;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<input type="button" class="btn btn-left" onclick="changeBaseMap({type: 'satellite'})" value="设置为卫星图">
<input type="button" class="btn btn-right" onclick="changeBaseMap({type: 'vector'})" value="设置为矢量图">
<script type="text/javascript">
var map;
function initMap() {
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图
map = new TMap.Map("container", {
zoom: 12,//设置地图缩放级别
center: center,//设置地图中心点坐标
});
}
// 动态设置底图类型
function changeBaseMap(baseMap) {
map.setBaseMap(baseMap);
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>创建地图</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<script type="text/javascript">
function initMap() {
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图
var map = new TMap.Map("container", {
rotation: 20,//设置地图旋转角度
pitch:30, //设置俯仰角度（0~45）
zoom:12,//设置地图缩放级别
center: center//设置地图中心点坐标
});
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>区域高亮</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=service"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
</style>
<body onload="initMap()">
<div id="container"></div>
</body>
<script>
var map;
var district;
function initMap() {
// 初始化地图
map = new TMap.Map('container', {
// Map文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap
zoom: 9,
center: new TMap.LatLng(40.15739276079734, 116.43926381582764), // 设置地图中心点坐标
pitch: 20, // 俯仰度
rotation: 0, // 旋转角度，
mapStyleId: 'style1',
baseMap: [
{ type: 'vector', features: ['base'] },
{
type: 'traffic',
opacity: 1,
},
],
renderOptions: {
enableBloom: true, // 是否启用泛光效果 注：为true才会有效果
},
});
highlight();
}
function highlight() {
// 服务类库文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocService
district = new TMap.service.District({
// 新建一个行政区划类
polygon: 2, // 返回行政区划边界的类型
});
// 关键字搜索行政区划，110000 = 北京行政区划代码
district.search({ keyword: 110000 }).then((result) => {
if (!result && !result.result) return;
// 获取省市区列表及其边界信息
var paths = result.result[0][0].polygon;
map.enableAreaHighlight({
paths: paths,
highlightColor: 'rgba(0,0,0,0)', // 高亮颜色
shadeColor: 'rgba(4,8,14,1)', // 其余阴影部分
});
// MultiPolyline文档地址：https://lbs.qq.com/javascript_gl/doc/multiPolylineOptions.html
new TMap.MultiPolyline({
map: map,
styles: {
polyline: new TMap.PolylineStyle({
color: '#017cf7', // 线条填充色，
width: 8,
lineCap: 'round',
enableBloom: true, // 是否启用泛光 注：为true才会有效果
}),
},
geometries: [
{
styleId: 'polyline', // 样式id
paths: paths,
},
],
});
});
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>卫星地图</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<script type="text/javascript">
function initMap() {
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图
var map = new TMap.Map("container", {
zoom:12,//设置地图缩放级别
center: center,//设置地图中心点坐标
baseMap: { // 设置卫星地图
type: 'satellite'
}
});
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>同时加载2个地图</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#containerOne {
width: 100%;
height: 45%;
}
#containerTwo {
width: 100%;
height: 45%;
}
p{
margin: 0;
margin-bottom: 20px;
text-align: center;
}
</style>
<body onload="initMap()">
<div id="containerOne"></div>
<p>地图一</p>
<div id="containerTwo"></div>
<p>地图二</p>
<script>
function initMap() {
//初始化地图一
var mapOne = new TMap.Map("containerOne", {
pitch:45,
center: new TMap.LatLng(39.984104, 116.307503)
});
//初始化地图二
var mapTwo = new TMap.Map("containerTwo", {
center: new TMap.LatLng(39.984104, 116.307503)
});
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>地图加载完成事件</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#tip {
position: absolute;
left: 20px;
top: 20px;
background: #FFF;
color: #666;
width: 200px;
height: 30px;
line-height: 30px;
border-radius: 3px;
padding-left: 5px;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<div id="tip">地图正在加载中......</div>
<script>
function initMap() {
//初始化地图
var map = new TMap.Map("container", {
center: new TMap.LatLng(39.984104, 116.307503)
});
//监听地图瓦片加载完成事件
map.on("tilesloaded", function () {
document.getElementById("tip").innerHTML = "地图瓦片已加载完成"
})
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>地图导出为图片</title>
<style>
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100vh;
}
button {
position: absolute;
left: 10px;
top: 10px;
z-index: 9999;
padding: 10px 14px;
box-sizing: border-box;
border: none;
border-radius: 2px;
color: #fff;
font-size: 14px;
line-height: 14px;
transition: .3s;
}
.disabled {
background-color: #979595;
}
.enable {
background-color: #3876ff;
}
</style>
</head>
<body>
<button onclick="screenshot()" disabled="disabled" id="export" class="disabled">
点击导出地图截图
</button>
<div id="container"></div>
<script src="https://mapapi.qq.com/web/jsapi/jsapi-gl/js/dom-to-image.min.js"></script>
<!-- dom-to-image 官方地址：https://github.com/tsayen/dom-to-image -->
<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
var map = new TMap.Map('container', {
rotation: 20, // 设置地图旋转角度
pitch: 30, // 设置俯仰角度（0~45）
zoom: 17, // 设置地图缩放级别
center: new TMap.LatLng(39.984104, 116.307503), // 设置地图中心点坐标
baseMap: [
{ type: 'vector' }, // 设置矢量底图
],
renderOptions: {
// renderOptions文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap#10
preserveDrawingBuffer: true, // 保留地图的渲染缓冲 默认false
},
});
function screenshot() {
// 截图操作
var node = document.getElementById('container');
domtoimage
.toPng(node)
.then(function (dataUrl) {
// 导出图片
var link = document.createElement('a');
link.download = 'image.png';
link.href = dataUrl;
link.click();
})
.catch(function (error) {
console.error('domtoimage 出现问题! ', error);
});
}
map.on('tilesloaded', function () {
// 当地图容器中可见的瓦片加载完后会触发此事件。
var button = document.querySelector('#export');
button.disabled = false;
button.className = 'enable';
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>地图平滑变化至指定状态</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#set-EaseTo{
position: absolute;
z-index: 9999;
left:20px;
top:10px;
}
</style>
<body>
<div id="container"></div>
<input type="button" id="set-EaseTo" onclick="easeTo()" value="easeTo">
<script>
var center = new TMap.LatLng(39.907093, 116.396875);//设置中心点坐标
//初始化地图
var map = new TMap.Map("container", {
center: center,
zoom:15,
});
function easeTo() {
map.easeTo({zoom:17,rotation:90},{duration: 2000});//平滑缩放,旋转到指定级别
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>地图平移事件</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#info{
position: absolute;
bottom:50px;
left:50%;
transform: translateX(-50%);
background: #FFF;
border-radius: 3px;
padding: 10px;
width: 440px;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<div id="info">
<h4 id="txt"></h4>
<p>当前中心点：<span id="position"></span></p>
</div>
<script>
function initMap() {
var position = document.getElementById("position");
var txt = document.getElementById("txt");
var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
//初始化地图
var map = new TMap.Map("container", {
center: center
});
location.innerHTML = map.getCenter().toString();
//监听地图开始平移
map.on("panstart", function () {
txt.innerHTML = "地图开始平移"
})
//监听地图平移
map.on("pan",function(){
txt.innerHTML = "地图正在平移";
position.innerHTML = map.getCenter().toString();//获取地图中心点
})
//监听地图平移结束
map.on("panend",function(){
txt.innerHTML = "地图结束平移";
})
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>地图设置缩放焦点</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#containerOne {
width: 100%;
height: 45%;
}
#containerTwo {
width: 100%;
height: 45%;
}
p{
margin: 0;
margin-bottom: 20px;
text-align: center;
}
</style>
<body>
<div id="containerOne"></div>
<p>地图一: 根据鼠标/双指位置缩放</p>
<div id="containerTwo"></div>
<p>地图二：根据地图中心点缩放</p>
<script type="text/javascript">
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图一
var mapOne = new TMap.Map("containerOne", {
center,
// 默认缩放，双指中心位置（移动端），鼠标的光标位置（PC端）
mapZoomType: TMap.constants.MAP_ZOOM_TYPE.DEFAULT
});
//初始化地图二
var mapTwo = new TMap.Map("containerTwo", {
center,
// 根据地图中心点缩放（移动端和PC端）
mapZoomType: TMap.constants.MAP_ZOOM_TYPE.CENTER
});
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>天空盒</title>
<style>
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#mapContainer {
position: relative;
width: 100%;
height: 100%;
}
.btnContainer {
position: absolute;
left: 20px;
top: 20px;
z-index: 10000;
}
.btnContainer button {
padding: 10px 14px;
box-sizing: border-box;
border: none;
background-color: #919aac;
border-radius: 2px;
color: #fff;
font-size: 14px;
line-height: 14px;
}
.btnContainer button:focus {
outline: none;
}
.btnContainer .btn1 {
padding: 10px 14px;
background: #3876ff;
border-radius: 2px;
border: none;
box-sizing: border-box;
font-size: 14px;
color: #fff;
line-height: 14px;
font-family: PingFangSC-Regular;
}
</style>
</head>
<body>
<div class="btnContainer">
<button class="btn1">点击切换天空</button>
</div>
<div id="mapContainer"></div>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
window.onload = initMap;
var myMap;
var skyBoxConfig = [
{
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/skybox_day.png',
horizontal: TMap.constants.IMAGE_DISPLAY.REPEAT,
vertical: TMap.constants.IMAGE_DISPLAY.SCALE,
},
{
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/skybox_night.png',
horizontal: TMap.constants.IMAGE_DISPLAY.REPEAT,
vertical: TMap.constants.IMAGE_DISPLAY.SCALE,
},
];
var index = 0;
function initMap() {
myMap = new TMap.Map('mapContainer', {
zoom: 17.058177705186978,
pitch: 80,
rotation: 320.0308641975305,
center: new TMap.LatLng(39.92119128796626, 116.40041656534902),
baseMap: [
{
type: 'vector',
features: ['base', 'building3d']
}
],
renderOptions: {
skyOptions: skyBoxConfig[index],
}
});
document.querySelector('.btn1').addEventListener('click', () => {
if (index) {
myMap.setMapStyleId('DEFAULT');
myMap.setSkyOptions(skyBoxConfig[0]);
index = 0;
} else {
myMap.setMapStyleId('DARK');
myMap.setSkyOptions(skyBoxConfig[1]);
index = 1;
}
});
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>实时路况</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
.control {
position: absolute;
top: 0px;
left: 0px;
z-index: 9999;
padding: 10px;
background-color: white;
}
</style>
<body>
<div class="control">
<p>
设置路况底图透明度：<input id="range" type="range" value="10" min="0" max="10" />
<span id="number">1</span>
</p>
</div>
<div id="container"></div>
<script type="text/javascript">
var center = new TMap.LatLng(39.907093, 116.396875);
var range = document.querySelector('#range');
var number = document.querySelector('#number');
var map;
// 初始化地图 MapOptions文档地址:https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap#2
map = new TMap.Map('container', {
zoom: 11, // 设置地图缩放级别
center: center, // 设置地图中心点坐标
baseMap: [
{ type: 'vector' }, // 设置矢量底图
// traffic底图文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap#7
{
type: 'traffic',
opacity: 1,
}, // 设置路况底图
],
});
range.addEventListener('change', function (e) {
// 根据范围值改变路况透明度
var val = e.target.value / 10;
number.innerText = val;
map.destroy(); // 销毁之前的地图
// 重新渲染地图
map = new TMap.Map('container', {
zoom: 11,
center: center,
baseMap: [
{ type: 'vector' },
{
type: 'traffic',
opacity: val,
},
],
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>异步加载地图</title>
</head>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
</style>
<body>
<div id="container"></div>
<script>
function initMap() {
var map = new TMap.Map("container", {
pitch: 45,
zoom: 12,
center: new TMap.LatLng(39.984104, 116.307503)
});
}
function loadScript() {
//创建script标签，并设置src属性添加到body中
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=initMap";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>点击地图拾取POI</title>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
#mapContainer {
position: relative;
height: 100%;
width: 100%;
}
</style>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<body onload="init()">
<div id='mapContainer'></div>
<script>
var map;
function init() {
var drawContainer = document.getElementById('mapContainer');
var center = new TMap.LatLng(39.953416, 116.380945);
map = new TMap.Map(drawContainer, {
zoom: 13,
pitch: 40,
center: center
});
// 创建信息窗
let info = new TMap.InfoWindow({
map,
position: map.getCenter()
}).close();
map.on('click', (evt) => {
// 获取click事件返回的poi信息
let poi = evt.poi;
if (poi) {
// 拾取到POI
info.setContent(poi.name).setPosition(poi.latLng).open();
} else {
// 没有拾取到POI
info.close();
}
});
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>点击地图拾取坐标</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#info{
position: absolute;
left: 20px;
top: 20px;
font-size: 14px;
background: #FFF;
width: 270px;
padding: 10px;
border-radius: 3px;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<div id="info">当前点击坐标为：<span id="position"></span></div>
<script>
function initMap() {
var position = document.getElementById("position");
var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
//初始化地图
var map = new TMap.Map("container", {
center: center
});
//绑定点击事件
map.on("click",function(evt){
var lat = evt.latLng.getLat().toFixed(6);
var lng = evt.latLng.getLng().toFixed(6);
position.innerHTML = lat + "," + lng;
})
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>粒子路况</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<script type="text/javascript">
function initMap() {
var center = new TMap.LatLng(39.960957089008026, 116.44548038611174);
// 初始化地图 MapOptions文档地址:https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap#2
new TMap.Map('container', {
zoom: 11, // 设置地图缩放级别
center: center, // 设置地图中心点坐标
mapStyleId: 'style1', // 个性化样式
baseMap: [
{ type: 'vector' }, // 设置矢量底图
{
// traffic底图文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap#7
type: 'traffic',
features: ['base', 'flow'], // 路况图要素类型
opacity: 0.2, // 路况线网图的透明度
},
],
});
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置/获取地图中心点</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#info{
position: absolute;
background: #FFF;
width:300px;
height: 25px;
padding: 20px;
z-index: 9999;
top: 30px;
left: 30px;
}
#getcenter{
position: absolute;
left:20px;
top:10px;
}
#setcenter{
position: absolute;
left:110px;
top:10px;
}
</style>
<body>
<div id="container"></div>
<div id="info">
<input type="button" id="getcenter" onclick="getCenter()" value="getCenter">
<input type="button" id="setcenter" onclick="setCenter()" value="setCenter">
<p id="center-info">当前地图中心为: 39.984104, 116.307503</p>
</div>
<script>
var centerInfo = document.getElementById("center-info");
var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
//初始化地图
var map = new TMap.Map("container", {
center: center
});
//获取地图中心点事件
function getCenter() {
var mapCenter = map.getCenter(); //获取地图中心点坐标
centerInfo.innerHTML = "当前地图中心为: " + mapCenter.getLat().toFixed(6) + "," + mapCenter.getLng().toFixed(6);
}
//设置地图中心点事件
function setCenter() {
map.setCenter(new TMap.LatLng(39.908802,116.397502));//坐标为天安门
centerInfo.innerHTML = "当前地图中心为: 39.908802,116.397502";
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置/获取地图显示范围</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style>
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#info{
height: 50px;
width: 600px;
padding: 10px;
background: #FFF;
position: absolute;
top:20px;
left: 10px;
border-radius: 5px;
font-size: 14px;
}
p{
margin: 0;
margin-bottom: 10px;
}
#fit-bounds{
position: absolute;
right: 40px;
top: 5px;
padding: 5px;
z-index: 9999;
}
</style>
<body>
<div id="container"></div>
<div id="info">
<p>当前地图中心点：<span id="position">39.984104, 116.307503</span></p>
<p><span id="bounds"></span></p>
<!-- 地图图层上的button需要设置z-index>1000 -->
<input type="button" id="fit-bounds" onclick="fitBounds()" value="fitBounds">
</div>
<script>
var position = document.getElementById("position");
var bounds = document.getElementById("bounds");
var ne = new TMap.LatLng(39.96693, 116.49369);//东北角坐标
var sw = new TMap.LatLng(39.86000, 116.28666);//西南角坐标
var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
//初始化地图
var map = new TMap.Map("container", {
center: center
});
//监听可视范围改变事件
map.on("bounds_changed",function(){
var mapCenter = map.getCenter(); //获取地图中心点坐标
position.innerHTML = mapCenter.getLat().toFixed(6) + "," + mapCenter.getLng().toFixed(6);
var mapBounds = map.getBounds(); //获取当前地图的视野范围
if(mapBounds){
var nothEast ="当前可视区域范围：东北/右上:[" + mapBounds.getNorthEast().getLat().toFixed(6) + "," + mapBounds.getNorthEast().getLng().toFixed(6)+"] ；";
var southWest ="西南/左下:[" + mapBounds.getSouthWest().getLat().toFixed(6) + "," + mapBounds.getSouthWest().getLng().toFixed(6)+"]";
bounds.innerHTML = nothEast + southWest;
}
})
function fitBounds(){
var latLngBounds = new TMap.LatLngBounds(sw, ne)
map.fitBounds(latLngBounds); //根据指定的范围调整地图视野
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置/获取地图视角</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#info{
position: absolute;
background: #FFF;
width:300px;
height: 60px;
padding: 20px;
z-index: 9999;
top: 30px;
left: 30px;
}
#set-pitch{
position: absolute;
left:20px;
top:10px;
}
#set-rotate{
position: absolute;
left:110px;
top:10px;
}
p{
margin: 0;
}
#pitch-info{
margin-top: 20px;
margin-bottom: 10px;
}
</style>
<body>
<div id="container"></div>
<div id="info">
<input type="button" id="set-pitch" onclick="setPitch()" value="setPitch">
<input type="button" id="set-rotate" onclick="setRotate()" value="setRotate">
<p id="pitch-info">当前地图俯仰角度为: 10</p>
<p id="rotate-info">当前地图旋转角度为: 20</p>
</div>
<script>
var pitchInfo = document.getElementById("pitch-info");
var rotateInfo = document.getElementById("rotate-info");
var txt = document.getElementById("txt");
var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
//初始化地图
var map = new TMap.Map("container", {
rotation: 20,//设置地图旋转角度
pitch:10, //设置地图俯仰角度
center: center
});
//监听地图旋转事件
map.on("rotate",function(){
var rotation = map.getRotation(); //获取地图旋转角度
rotateInfo.innerHTML = "当前地图旋转角度为: " + parseInt(rotation);
})
//监听地图俯仰角度变化事件
map.on("pitch",function(){
var pitch = map.getPitch(); //获取地图旋转角度
pitchInfo.innerHTML = "当前地图俯仰角度为: " + parseInt(pitch);
})
function setRotate() {
map.setRotation(90);//设置地图旋转角度
}
function setPitch() {
map.setPitch(30);//设置地图俯仰角度
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>map中心点偏移</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#container-center {
width: 10px;
height: 10px;
background-color: blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<div id="container-center"></div>
<script type="text/javascript">
var map;
function initMap() {
var center = new TMap.LatLng(40.040452, 116.273486);
//初始化地图
map = new TMap.Map("container", {
zoom: 17, //设置地图缩放级别
center: center, //设置地图中心点坐标
offset: { // 中心点偏移
x: 0,
y: 100,
}
});
var markerGeo = {
id: 'center',
position: map.getCenter(),
};
// 创建一个位于地图中心点的marker
markerLayer = new TMap.MultiMarker({
map: map,
geometries: [
markerGeo
]
});
// 监听中心点变化事件，更新marker的位置
map.on('center_changed', () => {
markerGeo.position = map.getCenter();
markerLayer.updateGeometries([markerGeo]);
});
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>地图显示比例设置</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#btn {
position: absolute;
top: 30px;
left: 30px;
z-index: 1001;
padding: 6px 8px;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<input type="button" id="btn" onclick="changeScale()" value="设置显示比例为2">
<script type="text/javascript">
var map, scale = 1;
function initMap() {
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图
map = new TMap.Map("container", {
zoom:12,//设置地图缩放级别
center: center,//设置地图中心点坐标
});
map.on('scale_changed', (e) => {
console.log(e);
});
}
// 改变地图显示比例
function changeScale() {
var btn = document.getElementById('btn');
btn.value = `设置显示比例为${scale}`;
if (scale === 1) {
scale = 2;
} else {
scale = 1;
}
map.setScale(scale);
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>设置地图边界范围</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
* {
padding: 0px;
margin: 0px;
}
#mapContainer {
position: relative;
width: 100vw;
height: 100vh;
}
input{
position: absolute;
left: 30px;
top: 30px;
z-index: 9999;
}
</style>
</head>
<body>
<div id='mapContainer'></div>
<input id="btn" type="button" value="点击设置boundary">
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
window.onload = init;
var map, polygon;
function init() {
let sw = new TMap.LatLng(39.744154,116.124115);
let ne = new TMap.LatLng(40.104336,116.691284);
let boundary = new TMap.LatLngBounds(sw, ne);
map = new TMap.Map('mapContainer', {
zoom: 10,
center: new TMap.LatLng(39.919216,116.328735)
});
polygon = new TMap.MultiPolygon({
map,
geometries: [{
paths: [
boundary.getSouthWest(),
boundary.getSouthEast(),
boundary.getNorthEast(),
boundary.getNorthWest()
]
}]
});
let btn = document.getElementById('btn');
btn.addEventListener('click', () => {
map.setBoundary(boundary);
},false);
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>地图控件设置</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
}
#container {
width: 100%;
height: 100%;
}
input[type="button"] {
position: absolute;
z-index: 1001;
width: 160px;
padding: 6px 0;
font-size: 14px;
}
#btn-position-default {
top: 30px;
left: 30px;
}
#btn-position-right-bottom {
top: 30px;
left: 200px;
}
#btn-remove {
top: 80px;
left: 30px;
}
#btn-add {
top: 80px;
left: 200px;
}
#btn-add-class {
top: 130px;
left: 30px;
}
#btn-remove-class {
top: 130px;
left: 200px;
}
#btn-display-zoom-number {
top: 180px;
left: 30px;
}
#btn-hide-zoom-number {
top: 180px;
left: 200px;
}
.control .tmap-zoom-control{
background-color:#F2F2F2;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<input type="button" id="btn-position-default" onclick="setPosition('topRight')" value="缩放控件设为右上角">
<input type="button" id="btn-position-right-bottom" onclick="setPosition('bottomRight')" value="缩放控件设为右下角">
<input type="button" id="btn-remove" onclick="removeControl()" value="移除缩放控件">
<input type="button" id="btn-add" onclick="addControl()" value="添加缩放控件">
<input type="button" id="btn-add-class" onclick="setClassName('control')" value="缩放控件背景变灰">
<input type="button" id="btn-remove-class" onclick="setClassName('')" value="缩放控件恢复默认">
<input type="button" id="btn-display-zoom-number" onclick="displayZoomNumber()" value="缩放控件显示缩放级别">
<input type="button" id="btn-hide-zoom-number" onclick="hideZoomNumber()" value="缩放控件不显示缩放级别">
<script type="text/javascript">
var map, control;
function initMap() {
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图
map = new TMap.Map("container", {
zoom: 12,//设置地图缩放级别
center: center,//设置地图中心点坐标
});
// 获取缩放控件实例
control = map.getControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
// 监听控件添加和移除事件
map.on('control_added', (e) => {
console.log(e);
});
map.on('control_removed', (e) => {
console.log(e);
});
}
// 设置控件位置
function setPosition(position) {
if (!control) {
return;
}
switch(position) {
case 'topRight':
control.setPosition(TMap.constants.CONTROL_POSITION.TOP_RIGHT);
break;
case 'bottomRight':
control.setPosition(TMap.constants.CONTROL_POSITION.BOTTOM_RIGHT);
break;
}
}
// 移除缩放控件
function removeControl() {
if (!map.getControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM)) { // 如果map上不存在该控件则直接返回
return;
}
map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
}
// 把存储的缩放控件添加到地图上
function addControl() {
map.addControl(control);
}
// 为缩放控件添加class，控制样式
function setClassName(name) {
if (!control) {
return;
}
control.setClassName(name);
}
// 缩放控件显示缩放级别
function displayZoomNumber() {
control.setNumVisible(true);
}
// 缩放控件不显示缩放级别
function hideZoomNumber() {
control.setNumVisible(false);
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>自定义鼠标样式</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 100%;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.input-card {
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border-radius: .25rem;
border-width: 0;
border-radius: 0.4rem;
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
position: fixed;
bottom: 1rem;
right: 1rem;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 0.75rem 1.25rem;
width: 110px;
z-index: 3000;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
</head>
<body>
<div id="container" class="map"></div>
<ul id="cursorList" class="input-card">
<li> 选择鼠标样式 </li>
<li>
<input name="cursor" value="default" type="radio" onclick="switchCursor(this)">
<span>default</span>
</li>
<li>
<input name="cursor" value="pointer" type="radio" onclick="switchCursor(this)" checked>
<span>pointer</span>
</li>
<li>
<input name="cursor" value="move" type="radio" onclick="switchCursor(this)">
<span>move</span>
</li>
<li>
<input name="cursor" value="progress" type="radio" onclick="switchCursor(this)">
<span>progress</span>
</li>
<li>
<input name="cursor" value="url('https://industry.map.qq.com/cloud/webDemoCente/gl/source/custom_cursor.png'),auto" type="radio" onclick="switchCursor(this)">
<span>自定义样式</span>
</li>
</ul>
<script type="text/javascript">
//初始化地图对象，加载地图
map = new TMap.Map('container', {
zoom: 18,
center: new TMap.LatLng(39.98527631559586, 116.37631948391004),
});
map.setCursorStyle("pointer");
//自定义鼠标样式图标
function switchCursor(target) {
var value = target.value;
map.setCursorStyle(value);
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>调整图层顺序</title>
</head>
<script
charset="utf-8"
src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#mapContainer {
position: relative;
width: 100%;
height: 100%;
}
#moveLayerBtn {
position: absolute;
left: 40px;
top: 40px;
z-index: 9999;
}
#moveLayerResetBtn {
position: absolute;
left: 40px;
top: 80px;
z-index: 9999;
}
</style>
<body onload="initMap()">
<div id="mapContainer">
<button id="moveLayerBtn" onclick="moveLayer()">移动到文字图层上方</button>
<button id="moveLayerResetBtn" onclick="moveReSet()">移动到基础底图上方</button>
</div>
<script type="text/javascript">
var imageTileLayer
var map
function initMap () {
var center = new TMap.LatLng(26.870355, 100.239704) //设置中心点坐标
//初始化地图
map = new TMap.Map('mapContainer', {
center: center,
zoom: 15,
maxZoom: 16,
})
//初始化imageTileLayer
imageTileLayer = new TMap.ImageTileLayer({
getTileUrl: function (x, y, z) {
//拼接瓦片URL
var url =
'https://3gimg.qq.com/visual/lbs_gl_demo/image_tiles_layers/' +
z +
'/' +
x +
'_' +
y +
'.png'
return url
},
tileSize: 256, //瓦片像素尺寸
minZoom: 14, //显示自定义瓦片的最小级别
maxZoom: 16, //显示自定义瓦片的最大级别
visible: true, //是否可见
zIndex: 5000, //层级高度（z轴）
opacity: 0.95, //图层透明度：1不透明，0为全透明
map: map, //设置图层显示到哪个地图实例中
})
}
function moveLayer () {
var layerId = imageTileLayer.getId() // 获取图层ID
// 根据输入 LAYER_LEVEL 常量调整 layerId 对应图层的渲染层级 ，其中layerId可以通过图层getId方法获取。TMap.constants.LAYER_LEVEL 代表图层级别常量，见帮助文档（https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap）
map.moveLayer(layerId, TMap.constants.LAYER_LEVEL.TEXT)
}
// 移动图层至基础图层之上
function moveReSet () {
var layerId = imageTileLayer.getId() // 获取图层ID
// 根据输入 LAYER_LEVEL 常量调整 layerId 对应图层的渲染层级 ，其中layerId可以通过图层getId方法获取。TMap.constants.LAYER_LEVEL 代表图层级别常量，见帮助文档（https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap）
map.moveLayer(layerId, TMap.constants.LAYER_LEVEL.BASE)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>配置矢量底图</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
.box {
position: absolute;
left: 10px;
top: 10px;
z-index: 10000;
background-color: #fff;
padding: 10px 10px;
}
.box p {
display: inline-block;
padding: 10px 14px;
background: #919aac;
border-radius: 2px;
border: none;
box-sizing: border-box;
font-size: 14px;
color: #fff;
line-height: 14px;
font-family: PingFangSC-Regular;
cursor: pointer;
margin-bottom: 10px;
}
.box p.active {
background: #3cab82;
}
.btnBox {
font-size: 15px;
margin-bottom: 10px;
}
.btnBox label {
margin: 0px 5px;
cursor: pointer;
}
</style>
<body onload="initMap()">
<div class="box">
<div>
<p class="active" data-type="singleChoice">单选模式</p>
<p data-type="multipleChoice">多选模式</p>
</div>
<div class="btnBox">
<label for="base">
<input type="radio" id="base" value="0" name="type" />
道路及地面
</label>
<label for="building3d">
<input type="radio" id="building3d" value="1" name="type" />
3D建筑物
</label>
<label for="building2d">
<input type="radio" id="building2d" value="2" name="type" />
建筑物平面
</label>
<label for="point">
<input type="radio" id="point" value="3" name="type" />
poi文字
</label>
<label for="label">
<input type="radio" id="label" value="4" name="type" />
道路文字
</label>
</div>
</div>
<div id="container"></div>
<script type="text/javascript">
var map;
var mode = 'singleChoice';
var box = document.querySelector('.box');
var modeList = document.querySelectorAll('.box p');
var inputList = document.querySelectorAll('input');
var typeList = ['base', 'building3d', 'building2d', 'point', 'label'];
function cacheContainer() {
// 多选数据
var cacheList = [];
return {
set: function (elementList) {
cacheList = Array.prototype.map.call(elementList, function (element) {
var num = element.value;
return typeList[num];
});
},
get: function () {
return cacheList.map(function (item) {
return item;
});
},
clear: function () {
cacheList = [];
},
};
}
var cache = cacheContainer();
function initMap() {
var center = new TMap.LatLng(39.90989976282665, 116.39701599688226);
// 初始化地图
map = new TMap.Map('container', {
zoom: 17, // 设置地图缩放级别
center: center, // 设置地图中心点坐标
// 矢量底图配置：https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap#5
baseMap: {
type: 'vector',
features: typeList,
},
});
box.addEventListener('click', function (e) {
var type = '';
var nodeName = e.target.nodeName;
// 切换选择模式
if (nodeName === 'P') {
if (mode !== e.target.dataset.type) reset();
mode = e.target.dataset.type;
e.target.className = 'active';
mode = e.target.dataset.type;
type = mode === 'singleChoice' ? 'radio' : 'checkbox';
// 切换按钮
switchAttribute(type);
}
var checkedList = document.querySelectorAll('input:checked');
var selectList = ['LABEL', 'INPUT'];
if (selectList.indexOf(nodeName) >= 0) {
setMap(checkedList);
}
});
}
function reset() {
// 重置classname
modeList.forEach(function (element) {
element.className = '';
});
// 选项重置
inputList.forEach(function (element) {
element.checked = false;
});
// 重置底图
map.setBaseMap({
type: 'vector',
features: typeList,
});
// 清空多选数据
cache.clear();
}
function switchAttribute(type) {
inputList.forEach(function (element) {
element.type = type;
});
}
function setMap(list) {
var num = list.length > 0 && list[0].value;
var features;
if (mode === 'multipleChoice') {
cache.set(list);
}
features = mode === 'multipleChoice' ? cache.get() : [typeList[num]];
map.setBaseMap({
type: 'vector',
features: features,
});
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>地图销毁监听事件</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
.btnContainer {
position: absolute;
left: 20px;
top: 20px;
z-index: 10000;
}
.btnContainer button {
padding: 10px 14px;
box-sizing: border-box;
border: none;
background-color: #3876ff;
border-radius: 2px;
color: #fff;
font-size: 14px;
line-height: 14px;
margin-bottom: 10px;
}
</style>
<body>
<div id="container"></div>
<div class="btnContainer">
<button class="btn1" onclick="destroy()">销毁地图</button>
</div>
<script type="text/javascript">
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图
var map = new TMap.Map("container", {
rotation: 20,//设置地图旋转角度
pitch: 30, //设置俯仰角度（0~45）
zoom: 12,//设置地图缩放级别
center: center//设置地图中心点坐标
});
map.on("destroy", function () {
alert("地图已销毁！");
})
function destroy() {
map.destroy();
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>地面漫游</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=view"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
.info {
width: 300px;
background-color: white;
padding: 10px;
font-size: 14px;
position: absolute;
left: 20px;
top: 20px;
z-index: 10000;
}
</style>
<body>
<div class="info">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div id="container"></div>
<script type="text/javascript">
// 初始化地图
var map = new TMap.Map('container', {
center: new TMap.LatLng(40.04374524409231, 116.2865218786128), // 设置中心点
zoom: 17, // 设置地图缩放比例
});
var lookFromList = [
{
position: new TMap.LatLng(40.04374524409231, 116.2865218786128, 50),
rotation: [80, 0, 0], // 地图在水平面上的旋转角度
percentage: 0, // 动画过程中该关键帧的百分比
},
{
position: new TMap.LatLng(40.049407036771356, 116.28522908966829, 50),
rotation: [80, 0, 0],
percentage: 0.25,
},
{
position: new TMap.LatLng(40.04970116881027, 116.28443717763798, 50),
rotation: [80, 0, 90],
percentage: 0.3,
},
{
position: new TMap.LatLng(40.04908656312387, 116.28076901740587, 50),
rotation: [80, 0, 90],
percentage: 0.45,
},
{
position: new TMap.LatLng(40.04876101655684, 116.28052871173372, 50),
rotation: [80, 0, 180],
percentage: 0.5,
},
{
position: new TMap.LatLng(40.04336691175791, 116.28170569825716, 50),
rotation: [80, 0, 180],
percentage: 0.75,
},
{
position: new TMap.LatLng(40.04298529869431, 116.28218813579929, 50),
rotation: [80, 0, -90],
percentage: 0.8,
},
{
position: new TMap.LatLng(40.04347544510598, 116.28571716461806, 50),
rotation: [80, 0, -90],
percentage: 0.95,
},
{
position: new TMap.LatLng(40.04374524409231, 116.2865218786128, 50),
rotation: [80, 0, 0],
percentage: 1,
},
];
var keyFrames = lookFromList.map(function (lookFrom) {
var position = lookFrom.position;
var rotation = lookFrom.rotation;
var percentage = lookFrom.percentage;
// 地图视角附加库文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glMapView
// getMapViewWhenLookFrom指定观察者所在位置及三轴方向上的旋转角度。
// position为观察者位置，需明确高度；rotation为XYZ三轴上的旋转角度，格式为[x, y, z]，默认为[0, 0, 0]。
var keyFrame = map.getMapViewWhenLookFrom(position, rotation);
keyFrame.percentage = percentage;
return keyFrame;
});
// map.startAnimation 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap
// 开始动画，通过keyFrames定义关键帧
map.startAnimation(keyFrames, {
duration: 30 * 1000, // 动画周期时长，单位为ms
loop: Infinity, // 动画周期循环次数，若为Infinity则无限循环，默认为1
});
var infoList = document.querySelectorAll('.info p');
map.on('animation_playing', function (event) {
var lat = event.frame.center.lat;
var lng = event.frame.center.lng;
var pitch = event.frame.pitch;
var zoom = event.frame.zoom;
var rotation = event.frame.rotation;
infoList[0].innerText = '当前地图中心点：' + lat.toFixed(6) + ',' + lng.toFixed(6);
infoList[1].innerText = '当前地图俯仰角角度：' + Math.round(pitch);
infoList[2].innerText = '当前地图缩放等级：' + Math.round(zoom);
infoList[3].innerText = '当前地图旋转角度：' + Math.round(rotation);
});
</script>
</body>
</html>
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k