百度地图Api进阶教程

MOZHERV 2016-04-17

展开全文

Java代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图</title>
<script type="text/javascript">
var iscreatr=false;
function initialize() {
//---------------------------------------------基础示例---------------------------------------------
var map = new BMap.Map("allmap",{minZoom:12,maxZoom:20}); // 创建Map实例
//map.centerAndZoom(new BMap.Point(116.4035,39.915),15); //初始化时，即可设置中心点和地图缩放级别。
map.centerAndZoom("成都",13); // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动
//---------------------------------------------信息窗口(地图上由此只有1个)---------------------------------------------
var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>哈哈门</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='http://avatar.csdn.net/4/7/8/1_sd0902.jpg' width='139' height='104' title='哈哈门'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>哈哈门坐落在中国北京市中心,故宫的南侧,与哈哈门广场隔长安街相望,是清朝皇城的大门...</p>" +
"</div>";
var point = new BMap.Point(104.017287, 30.685906);//默认
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point);
//---------------------------------------------创建标注---------------------------------------------
var point = new BMap.Point(104.117287, 30.685906);//默认
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point);
map.addOverlay(marker);
//---------------------------------------------点击标注弹出信息窗口---------------------------------------------
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>哈哈，你看见我啦！我可不常出现哦！</p><p style='font-size:14px;'>看看我是如何添加上来的！</p>");
marker.addEventListener("click", function(e){
this.openInfoWindow(infoWindow);
});
}
function loadScript() {
var script = document.createElement("script");
script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="r-result" style="float:left;width:100px;">打印坐标</div>
<div id="allmap" style="width: 800px; height: 500px"></div>
</body>
</html>
<script type="text/javascript">
// 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));
// map.setZoom(14); //放到到14级
</script>