原生html js中引入高德地图插件

最新推荐文章于 2024-04-17 09:51:22 发布

走向大前端

最新推荐文章于 2024-04-17 09:51:22 发布

阅读量791

点赞数 2

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/abs_botton/article/details/122128111

版权

第一步搜索高德地图开发平台注册开发者账号,

第二步申请key码: 点击应用管理

创建新应用,填写相应信息后,会生成key码以及安全秘钥

准备好开发key码后,就可以去代码里操作了

首先线上引入map.loader;

 <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode:'您的秘钥',
      }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您的key码"></script>

创建一个盒子供地图来使用

 <div id="container" style="width: 500px; height: 500px;"></div>

设置地图配置

<script>
   var map = new AMap.Map('container', {
    zoom:11,//级别
    center: [116.397428, 39.90923],//中心点坐标
    viewMode:'3D'//使用3D视图
});
</script>

这样一个基本的地图就显示出来了

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode:'a6c379decf7caed734f91d652202f8fa',
      }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=6269d1c5deae61aaf372171ad1c9b752"></script>
</head>
<body>
    <div id="container" style="width: 500px; height: 500px;"></div>
</body>
<script>
   var map = new AMap.Map('container', {
    zoom:11,//级别
    center: [116.397428, 39.90923],//中心点坐标
    viewMode:'3D'//使用3D视图
});
</script>
</html>

完成页面如下:

走向大前端

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
原生html js中引入高德地图插件

第一步搜索高德地图开发平台注册开发者账号,第二步申请key码: 点击应用管理创建新应用,填写相应信息后,会生成key码以及安全秘钥准备好开发key码后,就可以去代码里操作了首先线上引入map.loader; <script src="https://webapi.amap.com/loader.js"></script> <script type="text/javascript"> window._AMapSecur..
复制链接

扫一扫