前端：高德地图快速入门使用

最新推荐文章于 2023-11-03 15:21:45 发布

weixin_33915554

最新推荐文章于 2023-11-03 15:21:45 发布

阅读量282

点赞数

文章标签：前端 javascript ViewUI

原文链接：https://juejin.im/post/5cc17ec9f265da038f77468e

版权

首先要进入高德地图的开发文档

需要做点准备，没有高德地图账号的得先注册，然后申请Key，注册这一步就不讲了，按照提示做就行

注册好之后登录，点击上图“添加 Key”

点击右侧的“创建新应用”会出现左侧的这个弹窗，根据自己需求填写选择就可以

点击右侧加号图标添加Key，根据自己需求填写选择，我是前端，理所当然选了“web端”，然后提交

回到开发文档，新建一个页面map.html,把以下的四行代码加到页面

回到开发文档，点击左侧“快速上手”，把下图红框中的js代码加到页面中

接下来就是获取中心点坐标

左侧输入我们想定位的地址，右侧会显示对应的坐标

把坐标替换原先的坐标就可以了

这是浏览器的显示

其他的东西就不讲了，这里只讲个入门，下面是我写这个demo的代码

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.14&key=16d55d5a5ed281dd19018764104b5db7"></script>
    <title>高德地图快速入门</title>
    <style type="text/css">
        #container {
            width: 1200px;
            height: 500px;
        }
        /* 去掉高德地图自带图标 */
        .amap-logo,.amap-copyright{
            display: none !important;
        }
    </style>
</head>

<body>
    <div id="container"></div>

    <script>
        var map = new AMap.Map('container', {
            zoom: 18,//级别，如果想显示得区域更具体可以调高级别
            center: [114.085947,22.547],//中心点坐标
            viewMode: '3D'//使用3D视图
        });
        //设置图标标记
        var marker = new AMap.Marker({
            position: new AMap.LngLat(114.085947,22.547),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '测试地址'
        });
        map.add(marker);
    </script>
</body>
<html>
复制代码

weixin_33915554

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端：高德地图快速入门使用

首先要进入高德地图的开发文档需要做点准备，没有高德地图账号的得先注册，然后申请Key，注册这一步就不讲了，按照提示做就行注册好之后登录，点击上图“添加 Key”点击右侧的“创建新应用”会出现左侧的这个弹窗，根据自己需求填写选择就可以点击右侧加号图标添加Key，根据自己需求填写选择，我是前端，理所当然选了“web端”，然后提交回到开发文档，新建一个页面map.html,把以下的四...
复制链接

扫一扫