想必在大家在浏览美团,滴滴打车等应用都有地图应用,这大大的方便了我们的生活,减少我们迷路,提升了我们的工作效率
网站上建设地图有四个好处
- 网站地图能够让搜素引擎产生好感,更快速的抓取网站;
- 网站地图的添加可以有效提升网站的收录;
- 网站地图可以提升连接页面的权重;
- 网站地图有利于用户体验
在百度地图给开发入手最好体验的两种服务
一个是开发者学院
还有一个文档案例
使新手也能很好熟悉业务代码,提早将学到的知识运用到项目中
这是一个小demo
demo
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baidu Map </title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=RidzGVmPipQMnYzkHvdtkng5HpRDPGSj"></script>
<script>
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
</html>
还有简单实用的工具代码
1.初始化地图,并设置地图中心点
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
当然也可以根据城市名称设置地图的中心点:
map.centerAndZoom("上海",15);
map.addControl(new BMap.ScaleControl()); //添加左下方比例尺控件
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.setCurrentCity("北京"); // 设置地图显示的城市
2.拖拽地图与滚轮的使用
map.enableScrollWheelZoom(true);
map.disableDragging(); //禁止拖拽
map.enableScrollWheelZoom(); //启用滚轮放大缩小
3.创建地图的时候,关闭地图底图按钮,建筑的可点功能
var map = new BMap.Map("allmap", {enableMapClick:false});//构造底图时,关闭底图可点功能
4.移动地图,设置地图最大最小的缩放级别
var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别
//当然也可以动态设置级别:
map.setMaxZoom(10);
map.setMinZoom(2);
5.获得地图当前中心点,返回两点间的距离
getCenter()
getDistance(start:Point, end:Point)
var pointA = new BMap.Point(106.486654,29.490295); // 创建点坐标A--大渡口区
var pointB = new BMap.Point(106.581515,29.615467); // 创建点坐标B--江北区
alert('距离是:'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。'); //获取两点距离,保留小数点后两位
等等,更多实用功能参照
JavaScript API GL
开发者学院