超人回来了 2015-10-08 07:31 采纳率: 0%
浏览 2414

百度地图api如何实现拖动地图的时候标记也跟着拖动

类似qq定位里面拖动地图！标记也跟着移动！然后获取标记的经纬度！有没有代码看看

  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-04 10:43
    关注

    以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

    要使用百度地图API来实现您描述的功能，您需要在服务器端编写JavaScript代码，并与百度地图API进行交互。以下是一个简单的示例，展示了如何通过JavaScript API动态更新地图上的标记位置：

    首先，确保您已经在服务器上安装并配置了百度地图API。

    1. 在服务器上创建一个名为 map.js 的文件，并添加以下内容：
    // 引入百度地图库
var map = new BMap.Map('container');

// 设置地图样式
BMAP_STYLE['default']['style'] = 'light';
map.setStyle(BMAP_STYLE['default']);

// 获取用户坐标
var userLon = 120;
var userLat = 34;

// 创建一个点
var point = new BMap.Point(userLon, userLat);

// 将点设置为当前地图中心
map.centerAndZoom(point, 15);

// 拖拽事件处理函数
function onMove(map) {
    var point = map.getCenter();
    // 更新页面显示的经纬度
    document.getElementById("lat").value = point.lat;
    document.getElementById("lon").value = point.lng;
}

// 监听地图拖拽事件
map.on('move', onMove);
    1. 使用HTML和CSS将地图放置到网页中：
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度地图API示例</title>
<style>
  #container { width: 100%; height: 100%;}
</style>
<script src="https://api.map.baidu.com/api?v=2.0&ak=YOUR_API_KEY"></script>
<body>
<div id="container" style="width: 600px; height: 400px;"></div>
<input type="text" id="lat" value="0">
<input type="text" id="lon" value="0">
<button onclick="onMove(map)">开始拖拽</button>
</body>
</html>

    在这个示例中，当用户开始拖拽地图时，地图会自动更新其中心位置，并且新的中心位置会被发送到服务器端。服务器端可以解析这些数据并将它们存储在数据库或用于其他目的。

    请注意，这只是一个基本的示例，实际使用时可能需要根据您的具体需求进行调整。例如，您可以考虑添加更多的功能（如添加滚动条、图标等）或者使用更复杂的动画效果。

    评论

报告相同问题？

  • 百度地图API之百度地图退拽标记点获取经纬度的实现代码
    2020-11-27 14:58
    在本文中，我们将深入探讨如何使用百度地图API来实现一个功能，即在用户拖拽地图上的标记点后，能够实时获取并更新该标记点的经纬度坐标。这个功能对于需要实时定位或者移动对象的应用非常有用，例如车辆追踪、地理...
  • 利用百度地图API实现在地图车辆的平滑移动，轨迹回放，多台车辆同时平滑移动
    2022-07-12 11:29
    本文将深入探讨如何利用百度地图API实现地图上的车辆平滑移动、轨迹回放以及多台车辆的同时平滑移动。我们将涵盖以下几个关键知识点： 1. **百度地图API**：百度地图API是百度公司提供的一套Web服务接口，允许...
  • 如何在百度地图上标记并圈定范围（米）
    2025-08-03 11:25
    百度地图 API 和谷歌地图 JavaScript API 是我们主要使用的工具，它们提供了众多地图操作接口，其中“标记”和“圆圈”是我们重点关注的对象。 百度地图 API 能让开发者构建个性化地图应用。要标记位置，需使用 BMap...
  • 微信小程序百度地图API v1.0版本下载
    2025-08-03 10:47
    微信小程序百度地图API v1.0是一款专为微信小程序开发者打造的地图服务工具，它将百度地图的强大功能融入其中，让开发者可以轻松地在微信小程序里实现地图显示、定位、路线规划等多种地图相关功能。这个API版本包含...
  • baidu.map.rar_地图API_百度 map_百度API_百度地图_百度地图API
    2022-09-21 17:31
    6. **交互与事件处理**：利用百度地图API的事件监听机制，如`addEventListener`，可以实现对地图操作的响应，如拖动、缩放后的回调。 在压缩包内的“百度地图demo”文件，很可能是上述步骤的示例代码，包含了如何...
  • jQuery实现百度地图api选择城市地图效果
    2019-09-22 21:34
    在这个场景下，"jQuery实现百度地图api选择城市地图效果"是一个常见的需求，它主要用于让用户能够方便地选择他们所在的城市或者感兴趣的城市。这个话题涉及到jQuery库的使用以及百度地图API的集成，下面将详细解释这...
  • 百度地图API及SDK开发示例
    2023-09-15 11:25
    1. **地图展示**：通过百度地图API，开发者可以将地图嵌入到网页或应用程序中，调整地图的层级、视角、标记点等，实现自定义的地图视图。 2. **定位服务**：百度地图提供了定位功能，包括设备GPS定位、网络定位等，...
  • 百度地图（webapi）移动地图，根据中心点定位
    2019-01-22 17:24
    本教程将详细介绍如何利用百度地图Web API实现移动地图的中心定位、拖动地图以及周边信息显示等特性。 首先，"中心定位"是地图应用的基本功能。在百度地图Web API中，我们可以使用`BMap.CenterAndZoom`方法来设置...
  • 百度地图JavaScriptAPI离线版.zip
    2021-12-21 09:32
    百度地图JavaScript API是百度提供的一款强大的地图开发工具，它允许开发者通过JavaScript语言在网页上集成地图功能，包括但不限于定位、地图展示、标记、路线规划、地理编码等。这个"百度地图JavaScriptAPI离线版....
  • 百度地图JavaScriptAPI离线版3.0.zip
    2021-04-22 13:02
    百度地图JavaScript API是百度提供的一款强大的地图开发工具，主要用于在网页上实现地图的展示、交互以及自定义功能。离线版3.0主要是为了让开发者在没有网络连接的情况下也能使用地图服务，这对于那些需要在局域网...
  • 没有解决我的问题, 去提问