js获取腾讯地图地理位置标注点

qtsdvip

已于 2023-03-21 15:12:44 修改

阅读量1.2k

点赞数

分类专栏： js 文章标签： javascript css html Powered by 金山文档

于 2023-03-21 14:51:52 首次发布

本文链接：https://blog.csdn.net/qtsdvip/article/details/129687773

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

打开地图API ，创建key

https://lbs.qq.com/

创建key的时候 Javascript API GL并不需要勾选任何产品，直接创建Key就可以使用（在引入API库时需要将key做为参数传入），注意获取的key可以在本地ip进行试验，也可以选择注册域名的地址使用。

获取地理位置的经纬度，还是在地图API，点击坐标拾取器，输入地理位置，即可查看到自己的经纬度坐标

上代码

<!DOCTYPE html>

<head>

<title>普通Marker</title>

</head>

html,

body {

height: 100%;

margin: 0;

padding: 0;

}

#container {

width: 100%;

height: 100%;

}

.btnContainer {

position: relative;

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;

position: relative;

}

</style>

<body>

</div>

var center = new TMap.LatLng(39.379518, 112.623066);

// 初始化地图

var map = new TMap.Map('container', {

zoom: 14, // 设置地图缩放

center: new TMap.LatLng(39.379518, 112.623066), // 设置地图中心点坐标，

pitch: 0, // 俯仰度

rotation: 0, // 旋转角度

});

var marker = new TMap.MultiMarker({

map: map,

styles: {

// 点标记样式

marker: new TMap.MarkerStyle({

width: 10, // 样式宽

height: 20, // 样式高

anchor: { x: 10, y: 30 }, // 描点位置

}),

geometries: [

// 点标记数据数组

{

// 标记位置(纬度，经度，高度)

position: center,

id: 'marker',

// content: '',

// border:'1'

});

document.querySelector('.btnContainer').onclick = function () {

var data = marker.getGeometryById('marker');

Object.assign(data, {

position: center,

});

marker.updateGeometries([data]);

};

var infoWindow = new TMap.InfoWindow({

map: map,

position: center, //设置信息框位置

content: 'hello', //设置信息框内容,

// Z-Index: 10, //信息窗的z-index值

offset: { x: -3, y: -45 },

});

</script>

</body>

</html>

qtsdvip

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js获取腾讯地图地理位置标注点

js引用腾讯地图地理位置标注点
复制链接

扫一扫

专栏目录