如何在网站中简单的引入高德地图

由于百度地图的生成器的插件太旧,(当然可以用百度开发者平台的JSAPI来引入地图),所以笔者这里选择了把高德地图api插入进网站中。

-第一步:登录高德开发者平台,注册高德地图开发者账号

-第二步:创建应用,并添加Key

  1. 进入高德地图开发者控制台
  2. 选择应用管理–>我的应用

3. 点击右上角的 创建新应用

4.在弹出的窗口中,填入你喜欢的应用名字和应用场景

5.点击新创建的应用旁边的 + 号

6.Key的名字任意,选择Web端(JS API),域名白名单可留空,也可写你自己的域名,点击提交即可成功创建Key

-第3步:创建高德地图HTML文件

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html,#container{
        width: 100%;
        height: 100%;
        margin: 0px
      }
    </style>
    <title>API加载</title>
  </head>
  <body>
    <div id="container" tabindex="0"></div>
    <script type="text/javascript">
        window.init = function(){
            var map = new AMap.Map('container', {
               resizeEnable: true,
               center:[121.479309, 31.25314],
               zoom:20
            });
            if (location.href.indexOf('guide=1') !== -1) {
                map.setStatus({scrollWheel: false});
                map.plugin(["AMap.ToolBar"], function() {
                  map.addControl(new AMap.ToolBar({liteStyle:true}))
                });
            }
          }
    </script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=请修改成您的准入密钥Key&callback=init"></script>
  </body>
</html>

请修改成您的准入密钥Key 修改成刚刚创建的Key密钥,并且另存为xxx.html文件

这里说一下高德地图显示位置的更改,需要修改Html文件的center:[121.479309, 31.25314],行,修改方式如下

  1.  首先进入高德地图官网
  2. 搜索你需要定位的地方,比如我要定位上海动物园
  3. 把浏览器中的经纬度参数手动复制出来,并填入center行
  4. 或者直接百度搜索经纬度查询,输入你要的地址,查询后复制出经纬度,填入center行
  5. 修改后的Html文件如下
  6. <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="chrome=1">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <style type="text/css">
          body,html,#container{
            width: 100%;
            height: 100%;
            margin: 0px
          }
        </style>
        <title>API加载</title>
      </head>
      <body>
        <div id="container" tabindex="0"></div>
        <script type="text/javascript">
            window.init = function(){
                var map = new AMap.Map('container', {
                   resizeEnable: true,
                   center:[121.3627133944, 31.1932656667],
                   zoom:20
                });
                if (location.href.indexOf('guide=1') !== -1) {
                    map.setStatus({scrollWheel: false});
                    map.plugin(["AMap.ToolBar"], function() {
                      map.addControl(new AMap.ToolBar({liteStyle:true}))
                    });
                }
              }
        </script>
        <script src="https://webapi.amap.com/maps?v=1.4.15&key=请修改成您的准入密钥Key&callback=init"></script>
      </body>
    </html>

     -第四步:将修改好的html文件上传到你的网站后台,并且在需要的地方调用<iframe>标签

<iframe src="https://www.mdrfb.com/.html" width="600" height="300" frameborder="0" scrolling="no"></iframe>

src参数填写上传的html文件的准确目录,设置合适的高度和宽度就能在网站上显示高德地图了。

预览如下:

如需修改地图缩放大小,请修改html文件的Zoom参数

WordPress需要在文本选项卡下才能填入<iframe>标签,得先从可视化界面切换成文本界面,不同版本的Wordpress可能方法不同。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

15 − 5 =