Web页面地图引入

原创已于 2023-05-10 20:58:20 修改 · 607 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

于 2023-05-10 16:35:23 首次发布

文章介绍了如何注册地图API账号，通过开发文档获取密钥，并在Web应用中使用JavascriptAPI设置地图中心点。此外，还讲解了如何隐藏地图logo，利用定位插件进行浏览器定位，以及使用AMap.GeometryUtil进行距离计算。

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）想要什么功能就点击进去根据提示添加