高德地图自动定位并实现搜索

最新推荐文章于 2023-05-22 10:17:28 发布

UnkonwnJavaWorld

最新推荐文章于 2023-05-22 10:17:28 发布

阅读量1.2k

点赞数

分类专栏：高德地图文章标签：定位

本文链接：https://blog.csdn.net/qq_44137046/article/details/113838625

版权

高德地图专栏收录该内容

0 篇文章 0 订阅

订阅专栏

1、首先我们需要登录高德开发平台：https://lbs.amap.com/

在这里插入图片描述

2、控制台->应用管理->创建新应用

在这里插入图片描述

3、在这里插入图片描述

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>附近医院</title>
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
		<style>
			html,body,#container{
            height:100%;
        }
        .info{
            width:26rem;
        }
		#panel {
		    position: fixed;
		    background-color: white;
		    max-height: 90%;
		    overflow-y: auto;
		    top: 10px;
		    right: 10px;
		    width: 280px;
		    bOrder1-bottom: solid 1px silver;
		}
    </style>
		<script src="js/bootstrap/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key"></script>


		<script type="text/javascript">
			$(document).ready(function() {
				getPosition();
                //这个方法不能放在这里
                //onComplete()方法会在最后执行
                //searchHospital()
			})

			function getPosition() {
				var map = new AMap.Map('container', {
					resizeEnable: true
				});
				AMap.plugin('AMap.Geolocation', function() {
					var geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, //是否使用高精度定位，默认:true
						timeout: 10000, //超过10秒后停止定位，默认：5s
						buttonPosition: 'RB', //定位按钮的停靠位置
						buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
						zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点

					});
					map.addControl(geolocation);
					geolocation.getCurrentPosition(function(status, result) {
						if (status == 'complete') {
							onComplete(result);
						} else {
							onError(result);
						}
					});
				});
			}

			function searchHospital(data) {
				$("#container").empty();
				var map = new AMap.Map("container", {
				    resizeEnable: true
				});
				var cityCode=map.getAdcode();
				AMap.service(["AMap.PlaceSearch"], function() {
				    //构造地点查询类
				    var placeSearch = new AMap.PlaceSearch({ 
				        pageSize: 5, // 单页显示结果条数
				        pageIndex: 1, // 页码
				        city: data, // 兴趣点城市
				        citylimit: true,  //是否强制限制在设置的城市内搜索
				        map: map, // 展现结果的地图实例
				        panel: "panel", // 结果列表将在此容器中进行展示。
				        autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
				    });
				    //关键字查询
				    placeSearch.search('医院');
				});
			}
			
			//解析定位结果
			function onComplete(data) {
                //document.getElementById('status').innerHTML = '定位成功'
				// var str = [];
				// str.push('定位城市：' + data.addressComponent.district);
				// str.push('定位结果：' + data.position);
				// str.push('定位类别：' + data.location_type);
				// if (data.accuracy) {
				// 	str.push('精度：' + data.accuracy + ' 米');
				// } //如为IP精确定位结果则没有精度信息
                
				$("#result").text(data.addressComponent.district);
                //这个搜索地点方法只能放在这个位置
                //因为onComplete总是在最后执行，所以取不到id为result的值
				searchHospital(data.addressComponent.district);
                
                //str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
				//document.getElementById('result').innerHTML = str.join('<br>');
			}
			//解析定位错误信息
			function onError(data) {
				document.getElementById('status').innerHTML = '定位失败'
				document.getElementById('result').innerHTML = '失败原因排查信息:' + data.message;
			}
		</script>
	<body>
		<div id='container'></div>
		<div id="panel"></div>
		<div class="info" hidden="hidden">
			<h4 id='status'></h4>
			<hr>
            <!--用来存放定位的城市-->
			<p id='result'></p>
		</div>

	</body>
</html>

在这里插入图片描述

这里面使用的时浏览器精确定位很多浏览器不支持我用的微软的Edge

UnkonwnJavaWorld

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
高德地图自动定位并实现搜索

1、首先我们需要登录高德开发平台：https://lbs.amap.com/2、控制台->应用管理->创建新应用3、<!doctype html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-s
复制链接

扫一扫