腾讯地图 JavaScript API GL 实现 Marker 拖拽示例
要实现 marker 拖动，可以使用腾讯地图 JavaScript API GL 中的 Marker 类和 Map 类。
首先，在 HTML 文件中引入腾讯地图 JavaScript API GL 的 js 文件：
<script src='https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY'></script>
其中，YOUR_KEY 需要替换成你自己的腾讯地图 API 密钥。
接着，在 JavaScript 文件中创建地图和 marker 对象，并添加拖拽事件：
// 创建地图对象
var map = new qq.maps.Map(document.getElementById('map'), {
center: new qq.maps.LatLng(39.916527, 116.397128), // 地图中心点坐标
zoom: 13, // 地图缩放级别
});
// 创建 marker 对象
var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(39.916527, 116.397128), // marker 坐标
map: map, // 将 marker 添加到地图上
draggable: true, // 允许拖拽
});
// 添加拖拽事件
qq.maps.event.addListener(marker, 'dragend', function (event) {
console.log(event.latLng); // 打印拖拽后的 marker 坐标
});
在上述代码中，我们创建了一个地图对象和一个 marker 对象，并将 marker 添加到地图上。设置 marker 的 draggable 属性为 true，表示允许拖拽。接着，我们添加了一个 dragend 事件监听器，当 marker 拖拽结束后，会触发该事件，并打印拖拽后的 marker 坐标。
最后，在 HTML 文件中添加一个 div 元素，用于显示地图：
<div id='map' style='width: 100%; height: 500px;'></div>
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Marker 拖拽示例</title>
<style>
#map {
width: 100%;
height: 500px;
}
</style>
<script src='https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY'></script>
<script>
// 创建地图对象
var map = new qq.maps.Map(document.getElementById('map'), {
center: new qq.maps.LatLng(39.916527, 116.397128), // 地图中心点坐标
zoom: 13, // 地图缩放级别
});
// 创建 marker 对象
var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(39.916527, 116.397128), // marker 坐标
map: map, // 将 marker 添加到地图上
draggable: true, // 允许拖拽
});
// 添加拖拽事件
qq.maps.event.addListener(marker, 'dragend', function (event) {
console.log(event.latLng); // 打印拖拽后的 marker 坐标
});
</script>
</head>
<body>
<div id='map'></div>
</body>
</html>
注意：在实际使用中，需要将 YOUR_KEY 替换成自己的腾讯地图 API 密钥。
原文地址: https://www.cveoy.top/t/topic/l4o8 著作权归作者所有。请勿转载和采集!