<!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 {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>地图窗口</title>
</head>
<body>
<div style="width:450px;height:300px;border:#ccc solid 1px;" id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(103.980605,30.739511);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.centerAndZoom(point, 16);
map.enableScrollWheelZoom(true);
var opts = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "成都XXXX有限公司" , // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("地址：高新西区天辰路88号", opts); // 创建信息窗口对象
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
});
map.addControl(navigationControl);
</script>
注意：请到http://lbsyun.baidu.com/apiconsole/key申请密钥（很简单，点两下密钥到手，然后替换ak=xxxxxx）.
文章评论