JavaScript调用百度地图

最新推荐文章于 2023-08-09 15:27:59 发布

峰羽

最新推荐文章于 2023-08-09 15:27:59 发布

阅读量664

点赞数

分类专栏： js调用百度地图文章标签： JavaScript 百度地图

本文链接：https://blog.csdn.net/fengyu212134746/article/details/97753690

版权

js调用百度地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用JavaScript调用百度地图实现页面地图展示

前提简述（部分API）

以下内容纯属个人总结，如有错误，敬请谅解

1.首先进入 http://lbsyun.baidu.com/index.php?title=首页百度开放平台控制台界面申请属于自己的ak授权码
2.选择JavaScript API 开发，如果是本地测试使用，地址填写0.0.0.0即可，线上地址测试填写指定域名
3.页面头部引入指定文件

<script type="text/javascript"  src="http://api.map.baidu.com/api?v=3.0&ak=申请的ak授权码">  </script>

创建地图实例简易代码

<head>
		<script type="text/javascript"  src="http://api.map.baidu.com/api?v=3.0&ak=申请的ak授权码"></script>
		<style>
				* {
				    padding:0;
				    margin:0;
				}
				
				html,body,#bMap {
						width:100%;
						height:100%;
				}
			
		</style>
		<body>
				<div id="bMap"></div>    //注意设置名称为id，在样式中设置地图展示宽高大小
		</body>
		<script>
				//创建地图实例
				var map = new BMap.Map("bMap");
				//创建地图实例后必须初始化地图，否者地图无法加载使用
				map.centerAndZoom("西安",12);			//初始化可以设置 中心点城市，和地图缩放尺寸，中心点城市可以是经纬度可以是城市名

				//创建点
				var point = new BMap.Point(longitude,latitude);     根据经纬度创建坐标点
				//创建点以后如果想在地图显示，必须创建标记
				var marker = new BMap.Marker(point,opt);   //参数1：点   参数二(Object)：可选参数（可以设置标记图标）
				//创建标记图标
				var markerIcon = new BMap.Icon(url,new BMap.Size(x,y),{imageSize:new BMap.Size(x,y)})   
				// 参数1是显示图标路径，参数二控制显示图标大小，但是不能控制图片大小，会裁剪图片，参数三设置图片大小
				//设置标记标签说明
				var markerLabel = new BMap.Label(显示的标签,{
							position:point,
							offset:new BMap.Size(x,y)
				});    //创建标签内容和显示位置及偏移量
				//标记说明可以设置样式，格式和css文件一样
				markerLabel .setStyle({
                    border: 0,
                    color: "red",
                    backgroundColor: "transparent",
                    fontWeight: "600"
                });
				//设置标签到标记点
				marker.setLabel(markerLabel);
				//将标记放入地图，必须，不然不会显示标记点
				map.addOverlay(marker);
		</script>
</head>

清除地图上的标记点

1.清除某个标记点

map.removeOverlay(标记点)
如果需要清除多个标记点，可以将需要清除的标记点放入一个数组，进行遍历清除

2.清除所有标记点

map.clearOverlays();

其他常用函数

map.enableScrollWheelZoom(); 开启鼠标滚轮缩放地图
addEventListener(“事件”,处理函数); 事件监听
obj.getPosition(); 获取操作对象的经纬度信息

	创建标记点之间的曲线
	new BMapLib.CurveLine(点数组, {
               	       		strokeColor: "red",
                	        strokeWeight: 3,
	                        strokeOpacity: 1
    })
    创建标记点之间的直线
    new BMap.Polyline(点数组, {
                        strokeColor: "red",
                        strokeWeight: 3,
                        strokeOpacity: 1
     })