百度地图api

最新推荐文章于 2023-04-28 09:39:37 发布

影天

最新推荐文章于 2023-04-28 09:39:37 发布

阅读量1.7k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/xwlyun/article/details/43793867

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>map</title>
<!-- 百度地图api -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=C17de36331be78b32a19cb854e9a2f30"></script>
<style>
.map{
	width: 400px;
	height: 400px;
}
</style>
</head>
<body>

<div id="map" class="map"></div>

<!-- 画弧线时需引用 -->
<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>

<script type="text/javascript">

	/* 坐标 */
//	var map = new BMap.Map('map',{minZoom:11,maxZoom:15});    // 创建Map实例
//	map.centerAndZoom(new BMap.Point(118.82, 32.06), 13);  // 初始化地图,设置中心点坐标和地图级别
//	map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
//	map.setCurrentCity('南京');          // 设置地图显示的城市 此项是必须设置的
//	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

	/* 城市名 */
//	var map = new BMap.Map('map', {enableMapClick:false});//构造底图时，关闭底图可点功能
//	map.centerAndZoom('南京',8);

	/* 异步加载 */
//	function loadJScript() {
//		var script = document.createElement("script");
//		script.type = "text/javascript";
//		script.src = "http://api.map.baidu.com/api?v=2.0&ak=C17de36331be78b32a19cb854e9a2f30&callback=init";
//		document.body.appendChild(script);
//	}
//	function init() {
//		var map = new BMap.Map("map");
//		map.centerAndZoom('南京',11);
//	}
//	window.onload = loadJScript;  //异步加载地图

	/* 自动移动 */
//	var map = new BMap.Map('map');
//	map.centerAndZoom('南京',8);
//	setTimeout(function(){	// 2秒后移动到广州
//		map.panTo(new BMap.Point(113.262232,23.154345));
//	}, 2000);

	/* 自动缩放 */
//	var map = new BMap.Map('map');
//	map.centerAndZoom('南京',8);
//	setTimeout(function(){	// 2秒后放大到14级
//		map.setZoom(14);
//	}, 2000);
//	map.enableScrollWheelZoom(true);

	/* 弹跳动画 */
//	var map = new BMap.Map('map');
//	var point = new BMap.Point(118.82, 32.06);
//	map.centerAndZoom(point, 15);
//	var marker = new BMap.Marker(point);	// 创建标注
//	map.addOverlay(marker);					// 将标注添加到地图中
//	marker.setAnimation(BMAP_ANIMATION_BOUNCE);	//跳动的动画

	/* 自定义图标 */
//	var map = new BMap.Map('map');
//	var point = new BMap.Point(118.82, 32.06);
//	map.centerAndZoom(point, 15);
//	var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157));
//	var marker = new BMap.Marker(point,{icon:myIcon});
//	map.addOverlay(marker);
//	marker.enableDragging();

	/* 画线、面、圆 */
//	var map = new BMap.Map('map');
//	var point = new BMap.Point(118.82, 32.06);
//	map.centerAndZoom(point, 15);
//	// 创建折线
//	var polyline = new BMap.Polyline([
//		new BMap.Point(118.81, 32.05),
//		new BMap.Point(118.82, 32.06),
//		new BMap.Point(118.83, 32.05)
//	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
//	map.addOverlay(polyline);
//	polyline.enableEditing();
//	// 创建多边形
//	var polygon = new BMap.Polygon([
//		new BMap.Point(118.815, 32.07),
//		new BMap.Point(118.81, 32.065),
//		new BMap.Point(118.82, 32.06),
//		new BMap.Point(118.83, 32.065),
//		new BMap.Point(118.825, 32.07)
//	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
//	map.addOverlay(polygon);
//	// 创建圆
//	var circle = new BMap.Circle(point,500);
//	map.addOverlay(circle);
//	circle.hide();

	/* 文字备注 */
//	var map = new BMap.Map('map');
//	var point = new BMap.Point(118.82, 32.06);
//	map.centerAndZoom(point, 15);
//	var marker = new BMap.Marker(point);
//	map.addOverlay(marker);
//	var opts = {
//		position : point,					// 指定文本标注所在的地理位置
//		offset   : new BMap.Size(10, -30)	// 设置文本偏移量
//	}
//	var label = new BMap.Label("测试百度地图", opts);	// 创建文本标注对象
//	label.setStyle({
//		color : "red",
//		fontSize : "12px",
//		height : "20px",
//		lineHeight : "20px",
//		fontFamily:"微软雅黑"
//	});
//	map.addOverlay(label);

	/* 图标备注 */
//	var map = new BMap.Map('map');
//	var point = new BMap.Point(118.82, 32.06);
//	map.centerAndZoom(point, 15);
//	var marker = new BMap.Marker(point);
//	map.addOverlay(marker);
//	var label = new BMap.Label("备注一下",{offset:new BMap.Size(20,-10)});
//	marker.setLabel(label);

	/* 获取图标信息 */
//	var map = new BMap.Map('map');
//	var point = new BMap.Point(118.82, 32.06);
//	map.centerAndZoom(point, 15);
//	var marker = new BMap.Marker(point);
//	map.addOverlay(marker);
//	marker.addEventListener('click',getAttr);
//	function getAttr(){
//		var p = marker.getPosition();	// 获取marker的位置
//		alert('marker的位置是' + p.lng + "," + p.lat);
//	}

	/* 弧线 */
//	var map = new BMap.Map('map');
//	var point = new BMap.Point(118.82, 32.06);
//	map.centerAndZoom(point, 15);
//	var point1 = new BMap.Point(118.83, 32.05);
//	var points = [point,point1];
//	var curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
//	map.addOverlay(curve);
//	curve.enableEditing();

	/* 信息窗口 */
	var map = new BMap.Map('map');
	var point = new BMap.Point(118.82, 32.06);
	map.centerAndZoom(point, 15);
	var marker = new BMap.Marker(point);
	map.addOverlay(marker);
	var opts = {
		width : 200,
		height: 100,
		title : "测试地址title"
	}
	var infoWindow = new BMap.InfoWindow("地址：测试一下地址", opts);
	marker.addEventListener('click', function(){
		map.openInfoWindow(infoWindow,point);
	});

</script>

</body>
</html>

影天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图api

map.map{ width: 400px; height: 400px;} /* 坐标 */// var map = new BMap.Map('map',{minZoom:11,maxZoom:15}); // 创建Map实例// map.centerAndZoom(new BMap.Point(118.82, 32.06), 13); //
复制链接

扫一扫

专栏目录