(一)开发背景
超图和百度地图各有优势,但是对于开发者来说,百度地图更加方便,因为,不用做数据
(二)万事开头难
不想说废话了,直接上代码吧,只说一句:js务必写在html下方,不然会渲染不到
<!DOCTYPE html>
<html>
<head>
<base href="<?php echo base_url();?>"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>地图展示</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dAiSmSs6IHrw03DIrn0YTWWBTenyA9Iy"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
<link href="public/hui_css/initmap_hui.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="allmap"></div>
<div class="funtionbox">
<button id="coordinate" οnclick="showDeliveryPoint()"/>显示物资点</button>
<button id="coordinate" οnclick="endClickGetMapPoint()"/>点击获x取座标</button>
<button id="coordinate" οnclick="getWayPoint()"/>点击获取途经点座标</button>
<button id="coordinate" οnclick="mapPath()"/>路径分析</button>
<button id="coordinate" οnclick="mapMorePointPath()"/>路过点物资配送</button>
<button id="coordinate" οnclick="runMove()">动画配送</button>
<!-- <button id="coordinate" οnclick="add_control()"/>添加廊坊瓦片图</button>
<button id="coordinate" οnclick="delete_control()"/>删除廊坊瓦片图</button> -->
</div>
</body>
<script type="text/javascript">
function initMap() {
createMap(); // 百度地图API功能
}
function createMap(){
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.73468840933,39.5295131919511), 13); // 初始化地图,设置中心点座标和地图级别
map.addControl(new BMap.MapTypeControl()); // 添加地图类型控件
map.setCurrentCity("廊坊"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
window.map = map;
}
initMap();
</script>
</html>
(三)申请秘钥
必须要有秘钥,自己去百度地图开发者平台上去申请,如果申请不下来可以先用我的,不过我的秘钥应该不会存留很长时间
(四)官方文档
官方文档,官方文档,官方文档,重要的事说三遍