使用百度地图API创建可拖拽标记的示例

需积分: 9 196 浏览量更新于2024-09-10 收藏 2KB TXT 举报

"该资源是一个简单的HTML页面，用于展示如何在网页中集成百度地图API，创建可拖动的定位标记，并获取地理位置信息。" 在这个示例中，我们看到一个基本的HTML结构，其中包含了必要的元素来加载百度地图API并显示地图。首先，`<!DOCTYPE html>`定义了文档类型为HTML5，`<html>`标签是整个文档的根元素。接着，`<head>`部分包含了页面的元数据，如字符编码（`charset=utf-8`）和页面标题。`<title>`标签定义了页面标题为“百度地图Demo”。在`<head>`标签内部，我们看到一个`<script>`标签引入了百度地图API的JavaScript库。这里的`src="http://api.map.baidu.com/api?v=1.3"`是API的URL，版本号为1.3。这将允许我们在页面中使用百度地图的相关功能。接下来，`<body>`部分包含了一个具有固定宽度和高度的`<div>`，这个`div`被用作地图容器，id为"container"。这是地图实际显示的地方。然后，页面底部的`<script>`标签包含了JavaScript代码，用于初始化地图和交互功能。首先，创建了一个新的`BMap.Map`对象，将"container"作为参数，这将在id为"container"的`div`中初始化地图。接着，通过`addControl`方法添加了一个大型导航控件，使得用户可以缩放和平移地图。之后，定义了一个地图中心点`point`，使用了经纬度坐标（32.060255,118.796877）。然后创建了一个`BMap.Marker`对象，表示地图上的标记，并启用拖拽功能。`Geocoder`对象（`vc`）用于将坐标转换为可读的地址信息。页面中添加了两个事件监听器：`dragend`和`click`。当标记被拖动结束时，`dragend`事件触发，调用`getLocation`方法获取新的坐标位置的详细地址信息，并显示在页面上。`click`事件则在标记被点击时触发，同样调用`getLocation`获取点击位置的地址信息。这个代码实例展示了如何使用百度地图API在网页上创建交互式地图，包括设置地图容器、添加地图控件、创建可拖动的标记以及根据坐标获取地理位置信息的功能。这对于开发基于地理位置的应用或网站非常有用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图Demo</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container"); //初始化地图
var opts = {type: BMAP_NAVIGATION_CONTROL_LARGE}; //初始化地图控件
map.addControl(new BMap.NavigationControl(opts));
var point = new BMap.Point(32.060255,118.796877); //初始化地图中心点
var marker = new BMap.Marker(point); //初始化地图标记
marker.enableDragging(); //标记开启拖拽
var gc = new BMap.Geocoder();
//添加标记拖拽监听
marker.addEventListener("dragend", function(e){
//获取地址信息
gc.getLocation(e.point, function(rs){
showLocationInfo(e.point, rs);
});
});
//添加标记点击监听
marker.addEventListener("click", function(e){
gc.getLocation(e.point, function(rs){
showLocationInfo(e.point, rs);

下载后可阅读完整内容，剩余1页未读，立即下载

高林雨露

粉丝: 185
资源: 13

使用百度地图API创建可拖拽标记的示例

Android百度地图代码

百度地图获取代码

ArcGIS API for JavaScript加载百度地图代码

JS实现自动获取并标注公司位置的百度地图代码

extjs6写百度地图代码

extjs6+百度地图代码

vue3 使用百度地图 代码

vue项目接入百度地图代码示例

百度地图离线地图代码

百度地图区域代码

最新资源

vue3 使用百度地图代码