1.首先注册一个地图API账号
2.开发文档 => Web开发 => Javascript API => 开发指南 => 账号和获取密钥 => 根据使用方法创建密钥
3.Hello World 根据使用方法操作以下功能
- 准备HTML
- 准备JS
- 添加标记点(也就是默认定位的地方)如果想要默认定位到自己想要的地方可以在 开发支持 => 地图工具 => 坐标拾取器 => 搜索自己想要默认地位的地方 => 复制坐标获取结果 => 粘贴至JS中(设置地图中心点坐标)
4.因为引入的地图会有地图自带的logo,我们可以找到logo的地方右键检查,找到logo的标签去设置一个 display: none !important;
5.如果需要地图定位 进阶教程 => 服务插件和工具 => 定位 => 浏览器定位(cv)=> JS API的加载(返回旧版本) => 直接加载JSAPI脚本 => 几何计算 => 距离、长度、面积
- 引入地图
<script src = 'https://webapi.amap.com/maps?v=2.0&key=您申请的key值'></script>
- 调用定位插件
AMap.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位,默认:true
timeout: 10000, // 设置定位超时时间,默认:无穷大
offset: [10, 20], // 定位按钮的停靠位置的偏移量
zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
position: 'RB' // 定位按钮的排放位置, RB表示右下
})
geolocation.getCurrentPosition(function(status,result){
if(status=='complete'){
onComplete(result)
}else{
onError(result)
}
});
function onComplete (data) {
// data是具体的定位信息
}
function onError (data) {
// 定位出错
}
})
- 计算距离、长度、面积
var p1 = [116.434027, 39.941037];
var p2 = [116.461665, 39.941564];
// 返回 p1 到 p2 间的地面距离,单位:米
var dis = AMap.GeometryUtil.distance(p1, p2);
6.使用DEMO(示例DEMO)想要什么功能就点击进去根据提示添加