百度地图开发第一步

最新推荐文章于 2022-03-03 22:03:46 发布

原创最新推荐文章于 2022-03-03 22:03:46 发布 · 498 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图 #超图

微信平台开发专栏收录该内容

2 篇文章

订阅专栏

（一）开发背景

超图和百度地图各有优势，但是对于开发者来说，百度地图更加方便，因为，不用做数据

（二）万事开头难

不想说废话了，直接上代码吧，只说一句：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" onclick="showDeliveryPoint()"/>显示物资点</button>
		<button id="coordinate" onclick="endClickGetMapPoint()"/>点击获x取坐标</button>
		<button id="coordinate" onclick="getWayPoint()"/>点击获取途经点坐标</button>
		<button id="coordinate" onclick="mapPath()"/>路径分析</button>
		<button id="coordinate" onclick="mapMorePointPath()"/>路过点物资配送</button>
		<button id="coordinate" onclick="runMove()">动画配送</button>
		
<!-- 		<button id="coordinate" onclick="add_control()"/>添加廊坊瓦片图</button>
		<button id="coordinate" onclick="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>