以下是整合过后的代码:
-
在<head>标签内添加以下代码引入百度地图API的JavaScript文件,并将“你的密钥”替换成第一步申请的密钥:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
-
在需要显示地图的位置添加一个<div>标签,例如:
<div id="map" style="width: 100%; height: 400px;"></div>
其中,将style属性的宽度和高度设置为合适的值,以适应网页的布局。
-
在JavaScript代码中创建一个地图对象,并设置地图的中心点和缩放级别:
var map = new BMap.Map("map"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 设置地图中心点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和缩放级别
-
在地图上添加标注点,并设置标注点的信息窗口:
var point = new BMap.Point(116.404, 39.915); // 创建标注点坐标
var marker = new BMap.Marker(point); // 创建标注点实例
var infoWindow = new BMap.InfoWindow("公司名称:百度公司<br>地址:北京市海淀区上地十街10号<br>电话:010-88888888"); // 创建信息窗口实例
marker.addEventListener("click", function(){ // 点击标注点时显示信息窗口
map.openInfoWindow(infoWindow, point);
});
map.addOverlay(marker); // 将标注点添加到地图上
其中,将“公司名称:百度公司<br>地址:北京市海淀区上地十街10号<br>电话:010-88888888”替换成自己的公司名称、地址、电话等信息。
完整的代码如下:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
<div id="map" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
// 创建地图实例
var map = new BMap.Map("map");
// 设置中心点坐标和地图级别
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 创建标注点和信息窗口
var markerPoint = new BMap.Point(116.404, 39.915);
var marker = new BMap.Marker(markerPoint);
var infoWindow = new BMap.InfoWindow("公司名称:某某公司<br>地址:某某区某某路1号<br>电话:010-12345678");
// 点击标注点时弹出信息窗口
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow, markerPoint);
});
// 将标注点添加到地图中
map.addOverlay(marker);
</script>