高德地图定位API使用示例

本文档将介绍如何使用高德地图的定位服务。首先，我们会展示一个简单的网页布局，其中包括一个用于显示当前位置的元素和一个用于触发定位请求的按钮。当用户点击按钮时，我们将调用高德地图的定位服务，并将返回的位置信息更新到网页上。

1. 引入CSS样式

为了显示高德地图的定位图标，我们需要引入一些CSS样式。这些样式来自于高德地图官方提供的样式库，可以在以下链接找到：https://lbs.amap.com/api/webservice/guide/api/markers/style.html

<link rel="stylesheet" href="https://amap.amap.com/jsapi_demos/static/amap/css/v2/main.css" />

2. HTML结构

我们创建一个用于显示位置信息的元素和一个用于触发定位请求的按钮。当用户点击按钮时，将触发JavaScript函数 getLocation()。

<!DOCTYPE html>  
<html>  
<head>  
<title>高德地图定位API使用示例</title>  
<!-- 引入CSS样式 -->  
<link rel="stylesheet" href="https://amap.amap.com/jsapi_demos/static/amap/css/v2/main.css" />  
</head>  
<body>  
<div id="mapContainer"></div>  
<button onclick="getLocation()">获取我的位置</button>  
  
<script>  
// JavaScript代码部分将在下方编写  
</script>  
</body>  
</html>

3. JavaScript代码

我们来实现 getLocation() 函数。这个函数将调用高德地图的定位服务，并将返回的位置信息更新到网页上。为了实现这个功能，我们需要先初始化一个高德地图实例，然后在页面加载完成后调用 initMap() 方法。最后，我们在 getLocation() 函数中发起一个定位请求，并更新位置信息。

”`javascript
// 在HTML文档中的