百度地图
2015年8月13日
1 目标：增加地图插件，完成地图功能和扩展功能。
地图功能：显示、缩放、平移。比例尺、工具条、鹰眼等工具条。绘制点、线、面等元素。图层控制。路径规划等功能。
2 原理：提供地图插件，扩展js功能。
参见：..\javascript.docx插件部分。
3 方法：百度地图Js SDK
注意：百度的文档虽然没有下载版本，但是比高德的强10000多倍，条理，清晰，实用。
3.1 加载js库：使用申请的key在线获取js库,当前最新版本2.0。
示例：
<!DOCTYPEhtml>
<html>
<head>
<title>BaiduMapDemo</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#map{height:100%}
</style>
<scripttype="text/javascript"src="jquery.min.js"></script>
<scripttype="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eQv0G7tIacmmSYWmkgj1gWoz">
</script>
</head>
<body>
<divid="map"></div>
<scripttype="text/javascript">
$(document).ready(function(){
var map = new BMap.Map("map");
var point = new BMap.Point(116.404,39.915);
map.centerAndZoom(point, 15);
});
</script>
</body>
</html>
3.2 组织方式：以Map类为基础组织整个地图。没有MVC的概念（与高德相同）。
3.2.1M：数据层，处理数据图层。
addTileLayer()，removeTileLayer()，getTileLayer()。
3.2.2V：视图层，处理显示内容。
包括各种交互控件，鼠标配置，绘制方法等。
3.2.3C：控制层：MV的交互。
处理地图状态，如平移、缩放等。
4 基本功能：地图操作、基本控件、绘制、标注、事件、坐标转换。
4.1 地图功能：缩放、平移。
缩放：map.enableScrollWheelZoom()，默认关闭鼠标缩放。
平移：map. enableDragging()。默认的鼠标状态是就是平移。
示例：支持缩放和平移的地图。
<!DOCTYPEhtml>
<html>
<head>
<title>BaiduMapDemo</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#map{height:100%}
</style>
<scripttype="text/javascript" src="jquery.min.js"></script>
<scripttype="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eQv0G7tIacmmSYWmkgj1gWoz">
</script>
</head>
<body>
<divid="map"></div>
<scripttype="text/javascript">
$(document).ready(function(){
var map = new BMap.Map("map");
map.enableScrollWheelZoom();
var point = new BMap.Point(116.404,39.915);
map.centerAndZoom(point, 15);
});
</script>
</body>
</html>
4.2 控件：工具栏、比例尺、鹰眼等交互控件。
4.2.1组织方式：所有控件使用相同的基类Control，使用map.addControl()添加。
Control包含控件的基本功能，包括停靠位置，可见性等。
4.2.2导航工具栏：NavigationControl，可以设置不同的样式。
var nav = new BMap.NavigationControl();
map.addControl(nav);
4.2.3比例尺：ScaleControl，可以设置不同的样式。
var nav = new BMap.ScaleControl();
map.addControl(nav);
4.2.4鹰眼：OverviewMapControl，可以设置不同的样式。
var ov = new BMap.OverviewMapControl();
map.addControl(ov);
4.2.5示例：带定位功能的导航栏
<!DOCTYPEhtml>
<html>
<head>
<title>BaiduMapDemo</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#map{height:100%}
</style>
<script type="text/javascript"src="jquery.min.js"></script>
<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=eQv0G7tIacmmSYWmkgj1gWoz"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
<scripttype="text/javascript">
var map = new BMap.Map("map");
$(document).ready(function(){
map.centerAndZoom(new BMap.Point(116.404,39.915), 11);
var navigationControl = newBMap.NavigationControl({
enableGeolocation: true
});
map.addControl(navigationControl);
console.debug("inited.");
var geolocationControl = newBMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess",function(
最低0.47元/天 解锁文章
289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
