在Vue3中引入高德地图API控件Control

迷茫的Queteen

已于 2023-11-19 19:49:51 修改

阅读量577

点赞数 1

分类专栏：高德地图api的学习文章标签： javascript 开发语言

于 2023-11-17 22:29:57 首次发布

本文链接：https://blog.csdn.net/weixin_54937289/article/details/134471588

版权

高德地图api的学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.添加和移除控件

添加控件

map.addControl()

移除控件

map.removeControl()

2.高德地图API常见控件

AMap.Sclae：比例尺
AMap.ToolBar：工具条（地图放大和缩小控件）
AMap.ControlBar：控制盘（翻转和旋转按钮，翻转主要用于3D地图，旋转在3D和3D地图下都可用）
AMap.HawkEye：鹰眼图

地图控件-控件和弹窗-进阶教程-地图 JS API 2.0|高德地图API (amap.com)

引入方式都需要实例化对象后再加到map对象上

 例如引入工具条
  方式一：
    var toolbar = new AMap.ToolBar()
    map.addControl(new AMap.ToolBar())
  方式二
    map.addControl(new AMap.ToolBar())

3.JS API加载控件

插件形式引入代码

AMap.plugin(
                [
                    'AMap.ToolBar',
                    'AMap.Scale',
                    'AMap.HawkEye',
                    'AMap.Geolocation',
                ],
                function () {
                    const scale = new AMap.Scale()
                    const controlBar = new AMap.ToolBar({
                        position: {
                            top: '110px',
                            right: '40px',
                        },
                    })
                    const overview = new AMap.HawkEye({
                        opened: false,
                    })
                    const location = new AMap.Geolocation()
                    map.addControl(new AMap.ToolBar())
                    map.addControl(scale)
                    map.addControl(overview)
                    map.addControl(location)
                    function toggleScale(checkbox) {
                        if (checkbox.checked) {
                            scale.show()
                        } else {
                            scale.hide()
                        }
                    }
                    function toggleBar(checkbox) {
                        if (checkbox.checked) {
                            controlBar.show()
                        } else {
                            controlBar.hide()
                        }
                    }
                    function toggleOverview(checkbox) {
                        if (checkbox.checked) {
                            overview.show()
                        } else {
                            checkbox.hide()
                        }
                    }
                }
            )

4.HTML页面加载控件

详见官网

地图控件的添加和移除-地图控件-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)

5.小总结

1. 官网上的案例有些要引入js文件，可在vue项目中的public文件下创建index.html文件，引入如下代码，需要再加上；

<!DOCTYPE html>
<html lang="">
  <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" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/prety-json.css"
    />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <script src="https://webapi.amap.com/loader.js"></script>
    <div id="app"></div>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script
      type="text/javascript"
      src="https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js"
    ></script>
  </script>
  <script
      type="text/javascript"
      src="https://webapi.amap.com/demos/js/liteToolbar.js"
    ></script>
    <!-- built files will be auto injected -->
  </body>
</html>

2.刚开始写代码会出现奇奇怪怪的错误，很有可能的由于大小写/拼写错误导致；

3.注意引入的高德地图API版本，有些功能只能在最新版本中实现；

感概：实习真累，机械工作好无聊，什么时候能找到开发实习啊，一天实习完基本没时间学习啊【哭哭哭】

如有错误，欢迎指出！