高德地图的简单使用

已于 2022-11-23 09:22:35 修改
阅读量1.5k 收藏 15
点赞数 5
分类专栏： 地图 文章标签： vue.js javascript 前端
于 2022-11-22 18:03:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44697526/article/details/127986095
版权

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

文章目录

  • 一、如何在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满足

長夜餘火
关注
  • 5
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nuxt.js 项目的使用
维克多噗噗的博客
07-02 3462
运行图 安装 npx create-nuxt-app project 配置 koa + axios typescript-vuex github ui框架 element-ui 目录结构 assets —资源目录 layouts —布局目录 middleware —中间件目录 plugins —插件目录 static —静态(后台) 在您的 vue 模板中, 如果你需要引入 a...
简单的高德地图使用。
12-09
高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。拥有导航电子地图甲级测绘资质、测绘... [1] 2018年6月5日 苹果在美国时间6月4日的苹果开发者大会上，发布了最新的iOS 12操作系统，CarPlay支持高德地图
谷歌地图amap使用教程，详细版，react，vue通用
xiaoxiongxia的博客
08-02 1635
amap地图使用，api使用，以及出现的各种问题
高德地图 toolbar
ooiuy450的专栏
03-24 1万+
打开高德地图时通常会看到在左上角有一个导航条，这个就是今天所要讲的toolbar地图控件 官网定义 地图操作工具条插件。可支持方向导航、位置定位、视野级别缩放、视野级别选择等操作。 代码示例mapObj.plugin(["AMap.ToolBar"],function(){ //加载工具条 var tool = new AMap.ToolBar(); mapObj.ad
使用高德地图JS API 开发一些常见使用问题（急救包）
weixin_45511682的博客
05-31 1342
记录高德地图JS API 一些使用问题 #版本 #密钥（_AMapSecurityConfig.securityJsCode）、key 、域名白名单、 #getBounds()、 #setLimitBounds、#zoom
高德地图---工具（自用）
Komorebi的博客
09-06 182
高德地图缩放-平移工具
高德地图自定义地图实例
sunsineq的专栏
05-12 982
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <script type="text/javascript" src="https://webap.
高德地图使用echarts文档
05-25
首先，让我们了解高德地图的基础使用。高德地图API允许开发者在网页上嵌入地图，实现各种地图功能。以下是一个简单的高德地图初始化示例： ```javascript let map = null; map = new AMap.Map('container', { ...
高德地图风场效果demo源代码
10-29
【高德地图风场效果demo源代码】是一个用于展示如何在地图上实现风场效果的示例项目。这个源代码提供了在本地运行的环境，使开发者可以观察到动态的风场特效。它不仅局限于高德地图，还兼容了其他地图服务，如百度...
JS基于高德地图定位城市闪烁特效
07-24
首先，高德地图API是高德地图提供的一套JavaScript接口，允许开发者在网页上集成地图功能，包括但不限于地图展示、地理编码、路线规划等。通过注册高德地图开发者账号并获取API密钥，我们可以将其嵌入到项目中以调用...
vue 使用高德地图vue-amap组件过程解析
10-16
`vue-amap`是一个专为Vue.js设计的高德地图插件，它使得在Vue应用中添加地图功能变得简单易行。首先，我们需要安装这个组件，通过运行以下命令： ```bash npm install -S vue-amap ``` 安装完成后，在`main.js`...
VUE地图基础操作：放大、缩小、测距、测面、复位、切换地图底图，清除作图痕迹，画矩形框圆形等自定义图案
Aa12364567的博客
08-12 1841
VUE地图基础操作：放大、缩小、测距、测面、复位、切换地图底图，清除作图痕迹，画矩形框图案。
html电脑添加高德地图,vue-cli项目h5页面或者PC端页面引入高德地图组件，多点标注，自定义弹窗的详细描述...
weixin_35214204的博客
06-24 710
1.index.html里引入标签：2.新建一个js文件(mapConf.js)export default function MapLoader () { // return new Promise((resolve, reject) => {if (window.AMap) {resolve(window.AMap)} else {var script = document.create...
第四章WebGIS开发——第3节-地图控件
gis_witch的博客
03-21 1476
1. 什么是地图控件 地图控件就是可以用来控件地图显示的工具 2. 常见的地图控件 常见的地图控件有 缩放控件 旋转控件 比例尺 鹰眼 3. 使用步骤 在高德API中, 控件通常以插件的形式做为扩展. 使用步骤如下: 使用插件 实例化插件对象 添加到地图 4. 示例 AMap.plugin( [ 'AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye',
Vue 接入高德地图
大家好，我是 ed.
03-19 5017
Vue 接入高德地图 Vue 使用高德地图，实习缩放，鼠标绘制，测距、测面积、行政区域范围绘制、关键词查询等操作。 参考资料 高德地图API官网：https://lbs.amap.com/ 高德地图2.0参考手册：https://lbs.amap.com/api/jsapi-v2/documentation#pixel 高德地图2.0示例代码：https://lbs.amap.com/demo/list/jsapi-v2 Vue接入高德地图 引用 首相要在index.html文件中引入高德地图。 &lt
高德地图初始化
qq_59741893的博客
11-24 632
placeSearch.search(val?.name ?? '', ()=> { // 注：获取坑货高德搜索完自己创建的标点覆盖物 var overlays = map.getAllOverlays() // 移除点，坑我好久 map.remove(overlays) // placeSearch.render.markerList.clear()
vue中引入高德地图
热门推荐
前端-尔嵘
12-31 2万+
总的来说，vue组件中使用高德地图的方式有两种，一种是vue-amap ：一套专门用于vue的高德地图插件；另外一种是原生的高德地图。 方式一、vue-amap： 官网API：直达车 (1)、安装依赖： npm install vue-amap -S 或者淘宝镜像： cnpm install vue-amap -save 亦或（CDN的方式获取最新版本的资源）： <sc......
高德地图js-api简单使用
zibuyu369的博客
08-09 2385
用原生js初始化一个地图容器并使用控件，添加点坐标
vue总结之vue引入高德地图
粥可温
08-31 2068
然后我们可以在package.json里面看到这样一行代码这就代表安装成功。这是一套专门用于vue的高德地图插件，在项目目录下打开入。
vue简单使用高德地图
最新发布
06-03
Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。而高德地图是一个非常流行的地图服务提供商，提供了丰富的地图 API，可以在前端页面中轻松使用。下面是简单介绍如何在 Vue.js 中使用高德地图。 首先，你需要在 index.html 中引入高德地图的 JavaScript API： ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图API Key"></script> ``` 然后，在 Vue 组件中，你可以通过以下方式来创建一个地图： ```js // 引入高德地图 import AMap from 'AMap'; // 创建组件 export default { data() { return { map: null } }, mounted() { // 初始化地图 this.map = new AMap.Map('map-container', { zoom: 10, // 地图缩放级别 center: [116.397428, 39.90923] // 地图中心点坐标 }); } } ``` 在上面的代码中，我们首先通过 `import` 引入了高德地图，并在组件中定义了一个 `map` 变量来存储地图实例。在 `mounted` 钩子函数中，我们使用 `new AMap.Map()` 创建了一个地图实例，并传入了一些参数，比如地图缩放级别和中心点坐标。 最后，我们需要在模板中添加一个容器元素，用于显示地图： ```html <template> <div id="map-container" style="height: 500px;"></div> </template> ``` 这里的 `id` 属性需要和我们在创建地图实例时传入的容器元素的 `id` 属性相同。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值