打开地图API ,创建key
![](https://i-blog.csdnimg.cn/blog_migrate/7b0544d28dbd18c8e22e96f88164f2bc.png)
创建key的时候 Javascript API GL并不需要勾选任何产品,直接创建Key就可以使用(在引入API库时需要将key做为参数传入),注意获取的key可以在本地ip进行试验,也可以选择注册域名的地址使用。
获取地理位置的经纬度,还是在地图API,点击坐标拾取器,输入地理位置,即可查看到自己的经纬度坐标
![](https://i-blog.csdnimg.cn/blog_migrate/0aa7c6804bc7c09f5ac24cb29b014c63.png)
上代码
<!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>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=输入上面获取到的key"></script>
<style type="text/css">
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 id="container">
<div class="btnContainer">
</div>
<script type="text/javascript">
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>