利用高德地图模拟美团搜索相似地址以及地图摄取选择类似地址

最新推荐文章于 2021-05-26 06:14:55 发布

置顶

bem_zj

最新推荐文章于 2021-05-26 06:14:55 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签：高德地图模拟美团选取地址

本文链接：https://blog.csdn.net/bem_zj/article/details/94596678

版权

本文介绍了如何利用高德地图API来模拟美团的搜索相似地址功能，并展示了其实现效果。通过代码演示，可以应用于微信小程序、H5及微官网的地址选择场景。

摘要由CSDN通过智能技术生成

效果图

我觉得不用废话那么多，直接上代码吧!

<!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">
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<link rel="stylesheet" type="text/css" href="https://a.amap.com/jsapi_demos/static/demo-center/css/prety-json.css">
		<style>
			html,
			body{
				width: 100%;
				height: 100%;
				
			}
			.mapOut{
				position: absolute;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
				padding-bottom: 230px;
			}
			#container {
				width: 100%;
				height: 100%;
			}
			.info{
				min-width: 26rem;
			}
			#search {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1000;
			}
			#infoBottom{
				position: fixed;
				left: 0;
				width: 100%;
				bottom: 0;
				background-color: white;
				z-index: 1000000;
				border-radius: 10px 10px 0 0;
				padding:10px;
				box-shadow: 0 0px 2px rgba(0,0,0,0.2);
				-webkit-box-shadow: 0 0px 2px rgba(0,0,0,0.2);
				h