百度地图02

最新推荐文章于 2023-11-22 11:52:22 发布

原创最新推荐文章于 2023-11-22 11:52:22 发布 · 437 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用百度地图API进行位置定位及标注，通过Geocoder类解析地址获取经纬度，并在地图上显示标记及信息窗口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<!DOCTYPE html>
	<html>
	<head>
	<title>使用百度地图位置定位</title>
	<meta charset="utf-8" />
	<script src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ"></script>
	</head>

	<body>
	<div id="allmap" style="width:800px;height:600px"></div>
	<script>
	var map = new BMap.Map("allmap");


	/*
	* 使用浏览器定义 - 得到当前位置的经度和纬度不准确
	* Geolocation类
	* * 作用 - 返回用户当前的位置
	* * 问题 - 依靠浏览器来实现当前位置定位的功能
	* * 构造器 - Geolocation()
	* * 方法
	* * getCurrentPosition(callback)方法
	* * 作用 - 返回用户当前位置
	* * 参数callback
	* * 定位成功,该回调函数具有一个GeolocationResult参数
	* GeolocationResult类
	* * 作用 - 返回当前位置的经度和纬度
	* * 属性
	* * point - 当前位置坐标值(经度和纬度)
	*/
	/*
	var local = new BMap.Geolocation();
	local.getCurrentPosition(function(result){
	// result.point获取的坐标值 - 不准确
	console.log(result.point.lng);
	console.log(result.point.lat);
	});
	*/




	/*
	* 使用地址解析方式 - 到当前位置的经度和纬度推荐
	* Geocoder类
	* * 作用 - 用于获取用户的地址解析
	* * 构造器 - Geocoder()
	* * 方法
	* * getPoint(address,callback,city)方法
	* * 作用 - 对指定的地址进行解析
	* * 参数
	* * address - 设置解析的地址内容
	* * callback - 回调函数
	* * 地址定位成功,具有Point参数
	* * city - 当前中心城市
	*/
	var geo = new BMap.Geocoder();
	geo.getPoint("广东省广州市从化市广州大学华软软件学院",function(point){
	console.log(point);
	/*
	console.log(point.lng);
	console.log(point.lat);
	*/
	var marker = new BMap.Marker(point);
	map.centerAndZoom(point,16);
	map.addOverlay(marker);
	/*
	* 鼠标点击标注,打开信息窗口
	* InfoWindow类 - 信息窗口
	* * 构造器 - InfoWindow(addr,options)
	* * addr - 设置的地址
	* * options - 设置信息窗口的设置
	*/
	var opts = {
	width : 200,
	height: 100,
	title : "达内Web前端培训"
	}
	// 创建信息窗口对象
	var info = new BMap.InfoWindow("地址:文博大厦2层.",opts);
	// 为标注绑定click事件
	marker.addEventListener("click",function(){
	// 打开信息窗口
	map.openInfoWindow(info,point);
	});
	},"广东省");
	</script>
	</body>
	</html>