Vue中使用高德地图

奋斗吧

擅长邻域：未填写

2023-07-28 18:24:30 296浏览

Vue中使用高德地图，一、在Vue中使用高德地图如何在Vue中引入基础高德地图步骤一：注册并登录高德地图开放平台，申请密钥步骤二：安装高德地图加载器封装一个自定义地图组件，并初始化地图根据关键词搜索，并定位到搜索的位置添加放大缩小地图、转盘点击地图获取经纬度地图上绘制标记点、圆形、曲线、矩形和多边形等,及其绘制清除总结一、如何在Vue中引入基础高德地图根据官网提示，在Web端，我们需要高德地图加载器：npmi@a

一、在Vue中使用高德地图

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

步骤一：注册并登录高德地图开放平台，申请密钥
步骤二：安装高德地图加载器
封装一个自定义地图组件，并初始化地图

根据关键词搜索，并定位到搜索的位置
添加放大缩小地图、转盘
点击地图获取经纬度
地图上绘制标记点、圆形、曲线、矩形和多边形等,及其绘制清除
总结

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

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

注意：

* 此教程适用于Web端，移动端还未尝试，感兴趣的或者有需要的可单独联系我

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

1、步骤一：注册并登录高德地图开放平台，申请密钥

高德地图开放平台

操作步骤如下图：

Vue中使用高德地图_Web

2、步骤二：安装高德地图加载器

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

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

<template>
   <!-- 百度地图  -->
  <div id="bai-du-map">
    <!-- 技术支持和联系方式  -->
    
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
    securityJsCode: '安全密钥',
}
export default {
    data() {
        return {
            map : null,
            mouseTool : null,
            overlays : [],
            auto : null,
            placeSearch : null, 
        }
    },
    methods : {
        initMap() {
            AMapLoader.load({
                "key": "申请好的Web端开发者Key，首次调用 load 时必填", 
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": [地图用到的插件],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap)=>{
                // 初始化地图
                this.map = new AMap.Map('bai-du-map',{
                    viewMode : "2D",  //  是否为3D地图模式
                    zoom : 13,   // 初始化地图级别
                    center : [113.65553,34.748764], //中心点坐标  郑州
                    resizeEnable: true
                });
            }).catch(e => {
                console.log(e);
            });
        }
};
</script>

<style scoped>
#bai-du-map {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: "微软雅黑";
}
</style>
<style>
/* 隐藏高德logo  */
.amap-logo {
    display: none !important;
}
/* 隐藏高德版权  */
.amap-copyright {
    display: none !important;
}
</style>

Vue中使用高德地图_初始化_02

注意点：

2021年起，高德地图必须使用安全密钥即是

window._AMapSecurityConfig = {
    securityJsCode: '安全密钥',
}

Vue中使用高德地图_Web_03

二、根据关键词搜索，并定位到搜索的位置

<template>
   <!-- 百度地图  -->
  <div id="bai-du-map">
    <!-- 技术支持和联系方式  -->
    
  </div>
</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, 
        }
    },
    methods : {
        initMap() {
            AMapLoader.load({
                "key": "密钥", // 申请好的Web端开发者Key，首次调用 load 时必填
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": ["AMap.AutoComplete","AMap.PlaceSearch"],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                // "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap)=>{
                this.map = new AMap.Map('bai-du-map',{
                    viewMode : "2D",  //  是否为3D地图模式
                    zoom : 13,   // 初始化地图级别
                    center : [113.65553,34.748764], //中心点坐标  郑州
                    resizeEnable: true
                });

               this.auto = new AMap.AutoComplete({
                    input : this.iptId  // 搜索框的id 
                }); 
                this.placeSearch = new AMap.PlaceSearch({
                    map: this.map,
                    panel: "panel", // 结果列表将在此容器中进行展示。
                    // city: "010", // 兴趣点城市
                    autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                    extensions: 'base' //返回基本地址信息
                });
                this.auto.on("select", this.select);//注册监听，当选中某条记录时会触发
            }).catch(e => {
                console.log(e);
            });
        },
     
        select(e) {
            this.placeSearch.setCity(e.poi.adcode);
            this.placeSearch.search(e.poi.name);  //关键字查询查询
        }
    },
    mounted() {
        this.initMap();
    },
};
</script>

Vue中使用高德地图_高德地图_04

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

<template>
   <!-- 百度地图  -->
  <div id="bai-du-map">
    <!-- 技术支持和联系方式  -->
    
  </div>
</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, 
        }
    },
    methods : {
        initMap() {
            AMapLoader.load({
                "key": "密钥", // 申请好的Web端开发者Key，首次调用 load 时必填
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": ["AMap.Scale","AMap.ToolBar","AMap.ControlBar","AMap.MouseTool","AMap.MapType","AMap.HawkEye"],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                // "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap)=>{
                this.map = new AMap.Map('bai-du-map',{
                    viewMode : "2D",  //  是否为3D地图模式
                    zoom : 13,   // 初始化地图级别
                    center : [113.65553,34.748764], //中心点坐标  郑州
                    resizeEnable: true
                });
                this.map.addControl(new AMap.Scale());   // 添加左下角的比例尺
                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.MapType());   // 添加右上角的标准图和卫星图  和路况
                this.map.addControl(new AMap.HawkEye());   // 添加地图放大镜
            }).catch(e => {
                 console.log(e);
            });
        },
    },
    mounted() {
        this.initMap();
    },
};
</script>

四、点击地图获取经纬度

initMap() {
            AMapLoader.load({
                "key": "key", // 申请好的Web端开发者Key，首次调用 load 时必填
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": ["AMap.Scale","AMap.ToolBar","AMap.AutoComplete","AMap.PlaceSearch","AMap.ControlBar","AMap.MouseTool"],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                // "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap)=>{
                // 鼠标点击获取经纬度
                this.map.on('click', function(e) {
                    console.log("经度",e.lnglat.getLng())
                    console.log("纬度",e.lnglat.getLat())
                });
            }).catch(e => {
                console.log(e);
            });
        },

五、地图上绘制标记点、圆形、曲线、矩形和多边形等,及其绘制清除

<template>
   <!-- 百度地图  -->
  <div id="bai-du-map">
    <!-- 技术支持和联系方式  -->
    
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
    // 设置安全密钥
    securityJsCode: '安全密钥',
}
export default {
    data() {
        return {
            map : null,
            mouseTool : null,
            overlays : [],
            auto : null,
            placeSearch : null, 
        }
    },
    methods : {
        initMap() {
            AMapLoader.load({
                "key": "密钥", // 申请好的Web端开发者Key，首次调用 load 时必填
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": ["AMap.Scale","AMap.ToolBar","AMap.AutoComplete","AMap.PlaceSearch","AMap.ControlBar","AMap.MouseTool"],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                // "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap)=>{
                this.map = new AMap.Map('bai-du-map',{
                    viewMode : "2D",  //  是否为3D地图模式
                    zoom : 13,   // 初始化地图级别
                    center : [113.65553,34.748764], //中心点坐标  郑州
                    resizeEnable: true
                });
                this.mouseTool = new AMap.MouseTool(this.map);
                // 监听draw事件可获取画好的覆盖物
                this.mouseTool.on('draw',function(e){
                    this.overlays.push(e.obj);
                }.bind(this)) 
            }).catch(e => {
                console.log(e);
            });
        },
        draw(type) {
            switch(type){
                case 'marker':{
                    this.mouseTool.marker({
                        //同Marker的Option设置
                    });
                    break;
                }
                case 'polyline':{
                    this.mouseTool.polyline({
                        strokeColor:'#80d8ff'
                        //同Polyline的Option设置
                    });
                    break;
                }
                case 'polygon':{
                    this.mouseTool.polygon({
                        fillColor:'#00b0ff',
                        strokeColor:'#80d8ff'
                        //同Polygon的Option设置
                    });
                    break;
                }
                case 'rectangle':{
                    this.mouseTool.rectangle({
                        fillColor:'#00b0ff',
                        strokeColor:'#80d8ff'
                        //同Polygon的Option设置
                    });
                    break;
                }
                case 'circle':{
                    this.mouseTool.circle({
                        fillColor:'#00b0ff',
                        strokeColor:'#80d8ff'
                        //同Circle的Option设置
                    });
                    break;
                }
            }
           
        }, 
    },
    mounted() {
        this.initMap();
    },
};
</script>

清除绘制

 // 清除
 // map.remove(overlays)
 // overlays = [];
 // 或者
 // mouseTool.close(true)//关闭，并清除覆盖物

六、总结

一般的，使用高德地图，不需要参考其他博主写的，基本上就是安装一个加载器@amap/amap-jsapi-loader，然后参考高德地图开放webjs文档，就完全可以自己实现业务需求

好博客就要一起分享哦！分享海报

此处可发布评论

评论（0）展开评论

暂无评论，快来写一下吧

展开评论

您可能感兴趣的博客

150万+ 人气	865 博客	0 专栏
问答	1 粉丝	0 关注

写博客博客管理

他感兴趣的技术

Java HTML PHP python JavaScript Android MySQL C Linux 微信其他

最热博客更多

1、黑客入侵的常法 4745

2、黑马Mysql从入门到高级 2215

3、Windows怎么激活？Windows激活密钥分享 1992

4、类ChatGPT项目的部署与微调(上)：从LLaMA到Alpaca、Vicuna、BELLE 1907

5、掌握Conda环境迁移的几种方式，从此不在重复配环境 1779

6、分享200+个关于AI的网站 1683

7、小迪笔记 1581

8、Yolov8详解与实战 1351

9、八股文总结 1223

10、JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序 957

Vue中使用高德地图

一、在Vue中使用高德地图

1、步骤一：注册并登录高德地图开放平台，申请密钥

2、步骤二：安装高德地图加载器

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

二、根据关键词搜索，并定位到搜索的位置

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

四、点击地图获取经纬度

五、地图上绘制标记点、圆形、曲线、矩形和多边形等,及其绘制清除

六、总结

Vue简单路由的使用

vue之vuex的简单使用简化写法

vue之vuex的简单使用

vue如何使用websocket，以及把websocket挂载到vue成为全局变量

jsp项目使用vue.js

1.vue的介绍vue脚手架安装使用

listview列表视图的使用

vue实现图表统计折线图柱状图扇形图直方图

vuex的简单使用心得

小程序地图刷新label不见了

如何使用Python OpenCV实现人脸图像卡通化

Vue嵌套路由的简单使用

vue多图片上传，照片墙，vue图片上传添加headers参数

2.vue的基本语法vue指令axios调用接口

uniapp使用editor以及注意事项

单片机扫地机器人系统

jdango使用ModelForm表单提交和表单验证

vue入门学习速成

vue里结合QuillEditor写富文本编辑器-含图片粘贴上传服务器

swing美化包substance的使用和主题选择

第八次课：统计图和轮播图

最热博客更多

博客目录关闭

Vue中使用高德地图

一、在Vue中使用高德地图

1、步骤一：注册并登录高德地图开放平台，申请密钥

2、步骤二：安装高德地图加载器

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

二、根据关键词搜索，并定位到搜索的位置

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

四、点击地图获取经纬度

五、地图上绘制标记点、圆形、曲线、矩形和多边形等,及其绘制清除

六、总结

最热博客 更多

博客目录 关闭

最热博客更多

博客目录关闭