先看效果，再看源码~<!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>
<style type="text/css">
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 800px;
height: 600px;
}
</style>
</head>
<script charset="utf-8" src="http://wemapvis.map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<body onload="initMap()">
<div id="container"></div>
<script type="text/javascript">
function initMap() {
//初始化地图
var map = new TMap.Map("container", {
// 设置地图缩放级别
zoom: 11,
rotation: 353,
pitch: 73,
// 地图底图，BaseMap目前只支持矢量底图 （vectorBaseMap） 、卫星底图 （SatelliteBaseMap） 、路况底图 （TrafficBaseMap）
// 可以使用数组形式实现多种底图叠加
// 默认为 VectorBaseMap ，
baseMap:{
//type: "vector"
type: "satellite"
//type: "traffic"
},
// 3D / 2D 显示模式控制
viewMode:'2D',
//设置地图中心点坐标
center: new TMap.LatLng(37.87, 112.53),
adcode: 110101 // 市区县级行政区划代码
});
}
</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>
<style type="text/css">
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 800px;
height: 600px;
}
</style>
</head>
<script charset="utf-8" src="http://wemapvis.map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<body onload="initMap()">
<div id="container"></div>
<script type="text/javascript">
function initMap() {
//初始化地图
var map = new TMap.Map("container", {
// 设置地图缩放级别
zoom: 11,
rotation: 353,
pitch: 73,
// 地图底图，BaseMap目前只支持矢量底图 （vectorBaseMap） 、卫星底图 （SatelliteBaseMap） 、路况底图 （TrafficBaseMap）
// 可以使用数组形式实现多种底图叠加
// 默认为 VectorBaseMap ，
baseMap:{
//type: "vector"
type: "satellite"
//type: "traffic"
},
// 3D / 2D 显示模式控制
viewMode:'2D',
//设置地图中心点坐标
center: new TMap.LatLng(37.87, 112.53),
adcode: 110101 // 市区县级行政区划代码
});
}
</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>
<style type="text/css">
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 800px;
height: 600px;
}
</style>
</head>
<script charset="utf-8" src="http://wemapvis.map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<body onload="initMap()">
<div id="container"></div>
<script type="text/javascript">
function initMap() {
//初始化地图
var map = new TMap.Map("container", {
// 设置地图缩放级别
zoom: 11,
rotation: 353,
pitch: 73,
baseMap:{
//type: "vector"
type: "satellite"
//type: "traffic"
},
// 3D / 2D 显示模式控制
viewMode:'2D',
//设置地图中心点坐标
center: new TMap.LatLng(37.87, 112.53),
adcode: 110101 // 市区县级行政区划代码
});
//初始化marker
var marker = new TMap.MultiMarker({
map: map,
styles: {
// 点标记样式
marker: new TMap.MarkerStyle({
width: 20, // 样式宽
height: 30, // 样式高
anchor: { x: 10, y: 30 }, // 描点位置
src: 'http://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png', // 标记路径
}),
},
geometries: [
// 点标记数据数组
{
// 标记位置(经度，纬度，高度)
position: new TMap.LatLng(37.87, 112.53, 134),
},
],
});
//绑定点击事件
map.on("click",function(evt){
var lat = evt.latLng.getLat().toFixed(6);
var lng = evt.latLng.getLng().toFixed(6);
console.log(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>Marker轨迹回放-全局模式</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 800px;
height: 600px;
}
</style>
</head>
<script charset="utf-8" src="http://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<body>
<div id="container"></div>
<script type="text/javascript">
var center = new TMap.LatLng(37.87, 112.53);
//初始化地图
var map = new TMap.Map("container", {
// 设置地图缩放级别
zoom: 13,
rotation: 353,
pitch: 73,
baseMap:{
//type: "vector"
type: "satellite"
//type: "traffic"
},
// 3D / 2D 显示模式控制
viewMode:'2D',
center,
adcode: 110101 // 市区县级行政区划代码
});
var path = [
new TMap.LatLng(37.887400,112.534002),
new TMap.LatLng(37.900851,112.565740),
new TMap.LatLng(37.888637,112.569070),
new TMap.LatLng(37.887864,112.550655),
new TMap.LatLng(37.870545,112.534198),
];
var polylineLayer = new TMap.MultiPolyline({
map, // 绘制到目标地图
// 折线样式定义
styles: {
style_blue: new TMap.PolylineStyle({
color: '#3777FF', // 线填充色
width: 4, // 折线宽度
borderWidth: 2, // 边线宽度
borderColor: '#FFF', // 边线颜色
lineCap: 'round', // 线端头方式
eraseColor: 'rgba(190,188,188,1)',
}),
},
geometries: [
{
id: 'erasePath',
styleId: 'style_blue',
paths: path,
},
],
});
var marker = new TMap.MultiMarker({
map,
styles: {
'car-down': new TMap.MarkerStyle({
width: 40,
height: 40,
anchor: {
x: 20,
y: 20,
},
faceTo: 'map',
rotate: 180,
src: 'http://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
}),
start: new TMap.MarkerStyle({
width: 25,
height: 35,
anchor: { x: 16, y: 32 },
src: 'http://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png',
}),
end: new TMap.MarkerStyle({
width: 25,
height: 35,
anchor: { x: 16, y: 32 },
src: 'http://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png',
}),
},
geometries: [
{
id: 'car',
styleId: 'car-down',
position: new TMap.LatLng(37.887400,112.534002),
},
{
id: 'start',
styleId: 'start',
position: new TMap.LatLng(37.887400,112.534002),
},
{
id: 'end',
styleId: 'end',
position: new TMap.LatLng(37.870545,112.534198),
},
],
});
// 使用marker移动接口， http://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
marker.moveAlong(
{
car: {
path,
speed: 1650,
},
},
{
autoRotation: true,
}
);
marker.on('moving', (e) => {
var passedLatLngs = e.car && e.car.passedLatLngs;
if (passedLatLngs) {
// 使用路线擦除接口 eraseTo, http://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector
polylineLayer.eraseTo(
'erasePath',
passedLatLngs.length - 1,
passedLatLngs[passedLatLngs.length - 1]
);
}
});
</script>
</body>
</html>
