H5 导航地图链接演示

<button id="mapSelectorBtn">选择地图</button>
<div class="mapSelectorOverlay" id="mapSelectorOverlay">
				  <ul class="options">
				    <li><a target="_blank" href="https://uri.amap.com/marker?position=114.06761244628898,22.540228060760136&name=深圳会展中心&navigate=yes">高德地图</a></li>
				    <li><a target="_blank" href="http://api.map.baidu.com/marker?location=22.5402280000,114.0676120000&title=深圳会展中心&content=深圳会展中心&output=html">百度地图</a></li>
				    <li><a target="_blank" href="https://apis.map.qq.com/uri/v1/marker?marker=coord:22.540228060760136,114.06761244628898;title:深圳会展中心;addr:深圳会展中心&src=mypage&referer=keyfree">腾讯地图</a></li>
				    
				    <li class="cancel">取消</li>
				  </ul>
				</div>
				<style type="text/css">
				.mapSelectorOverlay {
					  border-radius: 20px 20px  0px  0px;
				      max-width: 640px;
				      margin: 0 auto;
				      text-align: center;
					  position: fixed;
					  z-index: 999999;
					  bottom: 0;
					  left: 0;
					  right: 0;
					  background-color: white;
					  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
					  transform: translateY(100%);
					  transition: transform 0.3s ease-out;
					}

					.options {
					  list-style-type: none;
					  padding: 0;
					  margin: 0;
					}

					.options li {
					  padding: 10px;
					  border-bottom: 1px solid #ddd;
					  cursor: pointer;
					}

					.options li:last-child {
					  border-bottom: none;
					}

					.options li:hover {
					  background-color: #f5f5f5;
					}

					/* 当overlay显示时的样式 */
					.show {
					  transform: translateY(0);
					}
				</style>
				<script type="text/javascript">
				document.getElementById('mapSelectorBtn').addEventListener('click', function() {
				  document.getElementById('mapSelectorOverlay').classList.add('show');
				});

				document.getElementById('mapSelectorOverlay').addEventListener('click', function(e) {
				  if (e.target.classList.contains('cancel') || e.target === this) {
				    this.classList.remove('show');
				  }
				});

				// 点击页面其他区域关闭overlay（可选，根据需要添加）
				document.addEventListener('click', function(e) {
				  var overlay = document.getElementById('mapSelectorOverlay');
				  if (!overlay.contains(e.target) && !e.target.matches('#mapSelectorBtn')) {
				    overlay.classList.remove('show');
				  }
				});

				</script>