AMap 地图定位插件

AMap 是中国领先的在线地图服务提供商，为全球用户提供高精、实时的地图信息服务。本文将介绍一个基于 AMap 地图定位插件的简单示例网站。

网站功能

该示例网站提供了一个基于 AMap 地图的定位服务，允许用户在网页上查看当前的位置和地图信息。用户可以点击页面上的按钮进行定位操作，并在地图上标记当前位置。

代码实现

以下是示例网站使用的 HTML 和 JavaScript 代码：

<!DOCTYPE html>  
<html lang="zh">  
<head>  
<meta charset="utf-8">  
<title>AMap 定位示例</title>  
<style>  
.amap-geolocation-con {  
position: relative;  
width: 100%;  
height: 400px;  
}  
.amap-geo {  
background: #fff url(https://webapi.amap.com/theme/v1.3/markers/b/loc_gray.png) 50% 50% no-repeat;  
width: 35px;  
height: 35px;  
border: 1px solid #ccc;  
border-radius: 3px;  
right: 4px;  
}  
.amap-locate-loading .amap-geo {  
background-image: url(https://webapi.amap.com/theme/v1.3/loading.gif);  
}  
.amap-locate {  
position: absolute;  
width: 18px;  
height: 18px;  
background: url(https://webapi.amap.com/theme/v1.3/map_view.png);  
_background: url(https://webapi.amap.com/theme/v1.3/map_view.gif); /* IE6及更早版本兼容 */  
background-pos: 0 center; /* CSS3新属性值 */  
}  
</style>  
</head>  
<body>  
<div class="amap-geolocation-con">  
<div class="amap-geo"></div>  
</div>  
  
<button id="locateBtn">定位</button>  
  
<script>  
// 在此处编写 AMap API 初始化和定位相关的代码逻辑  
</script>  
</body>  
</html>

.amap-geolocation-con 是包含定位图标的容器，.amap-geo 是定位图标的样式。.amap-locate 是定位按钮的样式。通过添加定位按钮和相应的点击事件监听器，可以在用户点击按钮时执行定位操作。你可以在 <script> 标签内编写 AMap API