你好,关于百度地图API,你成功了吗?具体要怎么做呢? 呵呵。。

发布网友发布时间：2022-05-06 17:33

共1个回答

热心网友时间：2022-04-22 22:18

百度API使用示例。
1.应用场景打开页面在地图上任意地点添加一个红色标记，并记录该标记的坐标当下次在打开页面（可以是两个不同的页面只有上次的坐标值就行）的时候显示上次的红色标记的位置。

2.使用百度地图之前需要申请百度地图api密钥，密钥申请方法参见
http://bbs.lbsyun.baidu.com/viewthread.php?tid=4389&extra=page%3D1

3. ===============上述示例标价创建代码 =============

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html, #allmap
{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=申请的百度地图密钥"></script>
<title>创建标记</title>
</head>
<body>
<div id="allmap">
</div>
</body>
</html>
<script type="text/javascript">

// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
// map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom('北京');
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市此项是必须设置的

map.addEventListener("click", function (e) {

//alert(e.point.lng + "," + e.point.lat);
map.clearOverlays();

//创建标记
var pt = new BMap.Point(e.point.lng, e.point.lat);
//var myIcon = new BMap.Icon("dd.jpg", new BMap.Size(26, 28));
var marker2 = new BMap.Marker(pt); // 创建标注
map.addOverlay(new BMap.Marker(pt)); // 将标注添加到地图中

});

</script>

4.============打开地图标标记展现页面==============
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html, #allmap
{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=申请的百度地图密钥"></script>
<title>查看标记</title>
</head>
<body>
<div id="allmap">
</div>
</body>
</html>
<script type="text/javascript">

// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.276172, 39.998903), 12); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
//map.setCurrentCity("北京"); // 设置地图显示的城市此项是必须设置的

//创建标记
var pt = new BMap.Point(116.276172, 39.998903);
//var myIcon = new BMap.Icon("dd.jpg", new BMap.Size(26, 28));
var marker2 = new BMap.Marker(pt); // 创建标注
map.addOverlay(marker2); // 将标注添加到地图中

//让标记说话（创建信息窗口）
var infoWindow2 = new BMap.InfoWindow("<p style='font-size:14px;'>哈哈，我们在这等你哦！</p>");
marker2.addEventListener("click", function () { this.openInfoWindow(infoWindow2); });

</script>