百度地图API示例-CSDN博客

本文链接：https://blog.csdn.net/wrfccl/article/details/34103045

本文展示了如何使用百度地图API创建地图并添加标记及信息窗口。通过设置信息窗口样式及位置，实现了在网页中展示具体地点的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
<title>百度地图API调用示例</title>
<style>
.iwTitle{
color:#CC5522;
font-size:14px;
white-space:nowrap;
}
body{font-size:12px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<p>
sssssssfdfgdfsgdfshdsghgsdfhfsghfsghdfghgfd
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
var piont = new BMap.Point(113.88582,22.555523);
var marker = new BMap.Marker(piont);
var opts={
width:200, //信息窗口宽度
height:80, //信息窗口高度
title:"<span class='iwTitle'>农夫it站-百度地图API调用示例</span>",//信息窗口标题
}
map.addControl(new BMap.NavigationControl());
map.centerAndZoom(piont,15);
map.addOverlay(marker);

var infoWindow = new BMap.InfoWindow("地址:海秀路2021北门<br/>网址:http://www.nongfuit.com",opts);//创建信息窗口对象
map.openInfoWindow(infoWindow,map.getCenter()); //打开信息窗口

</script>

效果如下图所示