程序员经验分享-hwhale

高德地图的简单使用

2023-10-28

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

  • 一、如何在Vue中引入基础高德地图
    • 1、注册并登录高德地图开放平台
    • 2、安装高德地图加载器
  • 二、封装一个自定义地图组件，并初始化
  • 三、添加放大缩小地图、转盘
  • 四、点击地图获取经纬度

提示：以下是本篇文章正文内容，下面案例可供参考

一、如何在Vue中引入基础高德地图？

根据官网提示，在Web端，我们需要高德地图加载器：npm i @amap/amap-jsapi-loader -S

@amap/amap-jsapi-loader加载器npm地址

1、注册并登录高德地图开放平台 （高德地图开放平台）

​

​

​

生成好的安全密钥、key值

​ 

2、安装高德地图加载器

npm i @amap/amap-jsapi-loader -S

二、封装一个自定义地图组件，并初始化地图

<template>
    <el-main>
        <!-- 高德地图  -->
        <div id="gao-de-map"></div>
    </el-main>
    
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
    securityJsCode: '安全密钥',
}
export default {
    props: ["iptId"],
    data() {
        return {
            map: null,
            mouseTool: null,
            overlays: [],
            auto: null,
            placeSearch: null,
        }
    },
    mounted() {
        // this.initMap();
    },
    created() {
        this.initMap();
    },
    methods: {
        initMap() {
            AMapLoader.load({
                "key": "key值",
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

                // 需要使用的的插件列表，如比例尺'AMap.Scale'等 
                "plugins": [
                    "AMap.Scale", // 右下角缩略图插件 比例尺
                    "AMap.DistrictSearch", // 地区搜索
                    "AMap.Autocomplete", // 输入提示插件
                    "AMap.PlaceSearch", // POI搜索插件
                    "AMap.OverView", // 地图鹰眼插件
                    "AMap.ToolBar", // 地图工具条
                    "AMap.MapType", // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
                    "AMap.PolyEditor", // 编辑 折线多，边形
                    "AMap.CircleEditor", // 圆形编辑器插件
                    "AMap.Geolocation", // 定位控件，用来获取和展示用户主机所在的经纬度位置
                    "AMap.Geocoder", // 地理编码器
                    "AMap.HawkEye", // 地图放大镜
                    "AMap.ControlBar", // 方向盘
                    "AMap.MouseTool", // 鼠标工具
                ],

            }).then((AMap) => {
                // 初始化地图
                this.map = new AMap.Map('gao-de-map', {
                    viewMode: "3D",  //  是否为3D地图模式
                    zoom: 12,   // 初始化地图级别
                    center: [113.280637, 23.125178], //中心点坐标  广州
                    resizeEnable: true,
                });

            }).catch(e => {
                console.log('e =====> ',e);
            });
        },
    },
}
</script>

<style scoped>
#gao-de-map {
    overflow: hidden;
    width: 1600px;
    height: 830px;
    margin: 0 auto;
}
</style>

​

​ 

三、添加放大缩小地图、转盘

<template>
    <el-main>
        <!-- 高德地图  -->
        <div id="gao-de-map"></div>
    </el-main>
    
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
    securityJsCode: '安全密钥',
}
export default {
    props: ["iptId"],
    data() {
        return {
            map: null,
            mouseTool: null,
            overlays: [],
            auto: null,
            placeSearch: null,
        }
    },
    mounted() {
        // this.initMap();
    },
    created() {
        this.initMap();
    },
    methods: {
        initMap() {
            AMapLoader.load({
                "key": "key值",
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

                // 需要使用的的插件列表，如比例尺'AMap.Scale'等 
                "plugins": [
                    "AMap.Scale", // 右下角缩略图插件 比例尺
                    "AMap.DistrictSearch", // 地区搜索
                    "AMap.Autocomplete", // 输入提示插件
                    "AMap.PlaceSearch", // POI搜索插件
                    "AMap.OverView", // 地图鹰眼插件
                    "AMap.ToolBar", // 地图工具条
                    "AMap.MapType", // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
                    "AMap.PolyEditor", // 编辑 折线多，边形
                    "AMap.CircleEditor", // 圆形编辑器插件
                    "AMap.Geolocation", // 定位控件，用来获取和展示用户主机所在的经纬度位置
                    "AMap.Geocoder", // 地理编码器
                    "AMap.HawkEye", // 地图放大镜
                    "AMap.ControlBar", // 方向盘
                    "AMap.MouseTool", // 鼠标工具
                ],

            }).then((AMap) => {
                // 初始化地图
                this.map = new AMap.Map('gao-de-map', {
                    viewMode: "3D",  //  是否为3D地图模式
                    zoom: 12,   // 初始化地图级别
                    center: [113.280637, 23.125178], //中心点坐标  广州
                    resizeEnable: true,
                });

                
                let toolBar = new AMap.ToolBar({
                    position: {
                        bottom: '210px',
                        right: '35px'
                    }
                });
                let controlBar = new AMap.ControlBar({
                    position: {
                        bottom: '280px',
                        right: '10px',
                    },
                });
                this.map.addControl(toolBar);   // 添加右下角的放大缩小
                this.map.addControl(controlBar);   // 方向盘


            }).catch(e => {
                console.log('e =====> ',e);
            });
        },
    },
}
</script>

<style scoped>
#gao-de-map {
    overflow: hidden;
    width: 1600px;
    height: 830px;
    margin: 0 auto;
}
</style>

四、点击地图获取经纬度

<template>
    <el-main>
        <!-- 高德地图  -->
        <div id="gao-de-map"></div>
    </el-main>
    
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
    securityJsCode: '安全密钥',
}
export default {
    props: ["iptId"],
    data() {
        return {
            map: null,
            mouseTool: null,
            overlays: [],
            auto: null,
            placeSearch: null,
        }
    },
    mounted() {
        // this.initMap();
    },
    created() {
        this.initMap();
    },
    methods: {
        initMap() {
            AMapLoader.load({
                "key": "key值",
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

                // 需要使用的的插件列表，如比例尺'AMap.Scale'等 
                "plugins": [
                    "AMap.Scale", // 右下角缩略图插件 比例尺
                    "AMap.DistrictSearch", // 地区搜索
                    "AMap.Autocomplete", // 输入提示插件
                    "AMap.PlaceSearch", // POI搜索插件
                    "AMap.OverView", // 地图鹰眼插件
                    "AMap.ToolBar", // 地图工具条
                    "AMap.MapType", // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
                    "AMap.PolyEditor", // 编辑 折线多，边形
                    "AMap.CircleEditor", // 圆形编辑器插件
                    "AMap.Geolocation", // 定位控件，用来获取和展示用户主机所在的经纬度位置
                    "AMap.Geocoder", // 地理编码器
                    "AMap.HawkEye", // 地图放大镜
                    "AMap.ControlBar", // 方向盘
                    "AMap.MouseTool", // 鼠标工具
                ],

            }).then((AMap) => {
                // 初始化地图
                this.map = new AMap.Map('gao-de-map', {
                    viewMode: "3D",  //  是否为3D地图模式
                    zoom: 12,   // 初始化地图级别
                    center: [113.280637, 23.125178], //中心点坐标  广州
                    resizeEnable: true,
                });

                
                let toolBar = new AMap.ToolBar({
                    position: {
                        bottom: '210px',
                        right: '35px'
                    }
                });
                let controlBar = new AMap.ControlBar({
                    position: {
                        bottom: '280px',
                        right: '10px',
                    },
                });


                this.map.addControl(toolBar);   // 添加右下角的放大缩小
                this.map.addControl(controlBar);   // 方向盘


                this.map.addControl(new AMap.Scale());   // 添加左下角的比例尺
                this.map.addControl(new AMap.MapType());   // 添加右上角的标准图和卫星图  和路况
                this.map.addControl(new AMap.HawkEye());   // 添加地图放大镜
                let toolBar = new AMap.ToolBar({
                    position: {
                        bottom: '210px',
                        right: '35px'
                    }
                });
                let controlBar = new AMap.ControlBar({
                    position: {
                        bottom: '280px',
                        right: '10px',
                    },
                });


            }).catch(e => {
                console.log('e =====> ',e);
            });
        },
    },
}
</script>

<style scoped>
#gao-de-map {
    overflow: hidden;
    width: 1600px;
    height: 830px;
    margin: 0 auto;
}
</style>

总结

一般的，使用高德地图，基本上就是安装一个加载器@amap/amap-jsapi-loader，然后参考高德地图开放webjs文档，就完全可以自己实现业务需求
高德地图开放webjs文档 ,这个API文档写的很好，包括了针对于Vue和React的基本引用，以及相关地图需求都有API满足

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

地图

vuejs

javascript

前端

高德地图的简单使用 的相关文章

随机推荐

  • NeurIPS 2022

    点击下方卡片 关注 CVer 公众号 AI CV重磅干货 第一时间送达 点击进入 gt CV 微信技术交流群 快来加入NeurIPS 2022细胞图像分割竞赛 助力生命科学领域单细胞分析 丰厚奖励等你拿 比赛背景和数据 基于显微镜图像的单细

  • 简单的debug32的基本语法介绍（基于dos环境）

    1 打开文件 debug 文件名 exe 2 r 简单的输入 r时就是查看当前各项寄存器的值 并由当前的地址 存储的指令等等 并且 我们可以用 r命令来对寄存器的值进行修改 如 r ax 3 a a指令可以让我们依次对内存单元直接写入汇编语

  • SQL优化（三）:SQL优化实战

    前两节基本是讲了SQL优化重要的工具大概思路 你连explain都看不明白 遇到慢查询一个SQL执行半天的情况 估计优化起来肯定无处着手 这节主要是SQL优化的具体实战 常见的一些问题 本文实际上也收到很多别的文章影响 收集了一些大牛的优化

  • TortoiseGit disconnected no supported authentication

    今天 我发现一个从远程服务器上获取到的工程 用Git没问题 而TortoiseGit报错 Disconnected No supported authentication methods available server sent publ

  • RFID门禁系统快速识别车辆管理

    01 社会背景 随着生活水平的不断提高 汽车开始大量进入家庭 在中国城市汽车的保有量迅速增加情况下 车辆的管理已成为一个难题 对车辆进行有效的管理 其核心问题是如何对车辆进行识别 本文介绍了一个基于射频识别技术的门禁管理系统 将RFID技术

  • 总结node的优缺点

    Node js采用了谷歌的v8引擎 同时提供了多个系统级的API 这样就避免了在浏览器端运行javascript代码各种的限制 而node js就是运行在服务器端的js代码 JavaScript原始运行环境 JavaScript最早在浏览器

  • python+pyqt制作的可最小化到托盘的桌面图形应用代码实例

    本篇文章主要讲解使用python pyqt制作的可以最小化到托盘的桌面图形应用实例 日期 2023年6月11日 作者 任聪聪 效果演示 说明 实现桌面应用显示窗口 关闭窗口缩小到托盘 点击托盘显示窗口 邮件图标显示退出按钮 点击退出按钮即可

  • 寻路算法 --- A星寻路算法

    深度寻路算法应用场景 仅用于空旷地形 小游戏或者大游戏的某个小模块 点击地图 人物一步步试探 广度寻路算法应用场景 只适用于小地图 回合制的走格子游戏 上帝视角 在走之前已经把路都找出来了 A星寻路算法应用场景 应用场景广泛 RPG游戏 为

  • Python经典基础编程练习题（二）——每日10题

    1 编写一个程序 输入若干个单词 并且以逗号分隔按字母顺序排序后 以逗号分隔打印单词 输入 without hello bag world 输出 bag hello without world 解题思路 掌握分词和排序函数 a input

  • 面经——嵌入式软件工程师面试遇到的经典题目

    参考 嵌入式软件工程师面试遇到的经典题目 作者 一只青木呀 发布时间 2020 11 04 23 43 16 网址 https blog csdn net weixin 45309916 article details 109499825

  • Android-Java和HTML5交互-混合开发-优化

    现在很多的 APP中会嵌套HTML5的页面 比如经常变化的等等 有一部分页面需要原生Java与HTML5中的js进行交互操作 下面介绍一下android中HTML5的使用 1 关于HTML5种cookie 网页中可能会用到 用户信息等很多参

  • algorithm头文件下的常用函数

    max min abs max x y 和min x y 的两个参数可以是浮点数 abs x 的参数必须是整数 浮点型的绝对值要使用math头文件下的fabs swap reverse reverse it1 it2 可以将数组指针在 it

  • 华为8.21日成渝地区笔试题，，，超详细的喔

    8月22日面试的 面试感受放到牛客网上了 点下面链接即可 https www nowcoder com discuss 235118 笔试一共三道题 分别是100分 200分 300分 可以使用本地IDE 第一题 报文转义AC20 如果报文

  • c# 三维向量常用运算函数

    三维向量运算 求点到直线垂足交点 点到直线距离 计算向量夹角 计算AB与CD两条直线的交点 计算AB与CD两条线段的交点 判断点是否在四边形内 abcd为正方形时不准确 判断点p 是否在四边形abcd内 求点到直线垂足交点

  • rocketmq参数配置

    下载代码 git clone https github com tgou RocketMQ 1 打包 mvn Dmaven test skip trueclean package install assembly assembly U 2

  • [转]Mapx在C#中的应用

    在这段代码中 我们应用MapX控件结合老美地图做了最基本的 地图浏览功能 放大 缩小 拖动 全图 测量距离 测量面积 杨雨田 YangYutian Hotmail Com using System using System Drawing

  • 如何使用git命令添加文件和提交文件

    转载 https www cnblogs com olive27 p 6047646 html 1 进入指定文件夹内 启动 git bash here 2 初始化文件夹 git init 3 开始添加文件 所有文件添加方法 git add

  • 带有v-model的input 保证内容是非负整数，键盘输入适用

    带有v model的input 保证内容是非负整数 键盘输入适用 输入小数时自动四舍五入成整数 输入负数时自动变0 遇到的坑 不太会vue 一直按照普通input搞得 给input的value赋值 以为就完了 结果输入小数后 确实立刻变成了

  • Scala中的 方法map和flatMap

    map操作 map操作是针对集合的典型变换操作 它将某个函数应用到集合中的每个元素 并产生一个结果集合 比如 给定一个字符串列表 我们可以通过map操作对列表的中每个字符串进行变换 让每个字符串都变成大写字母 这样变换后就可以得到一个新的集

  • 高德地图的简单使用

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 文章目录 一 如何在Vue中引入基础高德地图 1 注册并登录高德地图开放平台 2 安装高德地图加载器 二 封装一个自定义地图组件 并初始化 三 添加放大缩小地图 转盘 四 点

热门标签