vue2+高德地图web端开发（一）（个人整理的笔记）

最新推荐文章于 2024-02-16 13:26:11 发布
最新推荐文章于 2024-02-16 13:26:11 发布
阅读量843 收藏 12
点赞数 11
文章标签： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78796401/article/details/136046535
版权

前言

在此声明本文章是本人学习整理的笔记，偶然间看到B站的视频，已获得原创作者简明编程的同意

准备工作 

成为开发者并创建 key

高德api网址：https://lbs.amap.com

具体可看官方文档：https://lbs.amap.com/api/javascript-api-v2/prerequisites

npm 引入高德 

安装使用 Loader

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

新建组件：

 编写基础结构

<template>
    <div id="container"></div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style scoped>
  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    position:absolute
  }
  </style>

注意：这里的地图盒子的样式一定要加上position:absolute

 一开始不知道，地图一直不显示出来，经过多方查阅才知道。

相对定位(relative)，绝对定位(absolute)，固定定位(fixed)_position:absolute-CSDN博客

 引入AMapLoader

import AMapLoader from '@amap/amap-jsapi-loader'
    window._AMapSecurityConfig = {
  		securityJsCode: '你的安全密钥'
    }

初始化地图

methods:{
    initMap(){
        AMapLoader.load({
            key:"",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            const map = new AMap.Map("container",{  //设置地图容器id
                viewMode:"3D",    //是否为3D地图模式
                zoom:5,           //初始化地图级别
                center:[105.602725,37.076636], //初始化地图中心点位置
            });
        }).catch(e=>{
            console.log(e);
        })
    },
},

 调用方法对页面进行渲染

mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap()
}

 导入使用组件

<template>
  <div>
      <MapView />
  </div>
</template>

<script>
import MapView from "./components/MapView.vue";
export default {
components: {MapView}
}
</script>

<style>
</style>

效果展示：

导入控件

有三种导入地图控件间的方法：（this的用法以及在普通函数和箭头函数的指向相关知识）

一种是官方推荐的异步加载方式：

<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "6c59a952bf5373b78b97c3152618998c",
};
export default {
  data() {
    
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "5b243c91635abec127c6b8c2c80ca2d2", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       
      }).then((AMap) => {
        const map = new AMap.Map("container", {
          //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zoom: 10, //初始化地图级别
          center: [121.473667, 31.230525], //初始化地图中心点位置
        })
        // 异步加载多个组件
        map.plugin(
          ["AMap.ToolBar", "AMap.Scale", "AMap.ControlBar", 'AMap.HawkEye',"AMap.MapType"],
          function(){
            // 添加比例尺控件
            map.addControl(new AMap.Scale());

            // 添加工具栏控件
            map.addControl(new AMap.ToolBar());

            // 添加地图类型切换控件
            map.addControl(new AMap.MapType());
            
            map.addControl(new AMap.HawkEye());

            map.addControl(new AMap.ControlBar())

            // 其他地图初始化代码...
          })
          }
        ).catch((e) => {
          console.log(e);
        
      })
    },
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
};
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

 第二种是箭头函数：

<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "6c59a952bf5373b78b97c3152618998c",
};
export default {
  data() {
    return{
      map:null
    }
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "5b243c91635abec127c6b8c2c80ca2d2", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       
      }).then((AMap) => {
        this.map = new AMap.Map("container", {
          //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zoom: 10, //初始化地图级别
          center: [121.473667, 31.230525], //初始化地图中心点位置
        })
        // 异步加载多个组件
        AMap.plugin(
          ["AMap.ToolBar", "AMap.Scale", "AMap.ControlBar", 'AMap.HawkEye',"AMap.MapType"],
          ()=>{
            // 添加比例尺控件
            this.map.addControl(new AMap.Scale());

            // 添加工具栏控件
            this.map.addControl(new AMap.ToolBar());

            // 添加地图类型切换控件
            this.map.addControl(new AMap.MapType());

            this.map.addControl(new AMap.HawkEye());

            this.map.addControl(new AMap.ControlBar())

            // 其他地图初始化代码...
          })
          }
        ).catch((e) => {
          console.log(e);
        
      })
    },
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
};
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

注意：

一开始是这么写是错误的：

  const map = new AMap.Map("container", {
          //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zoom: 10, //初始化地图级别
          center: [121.473667, 31.230525], //初始化地图中心点位置
        });
        // 异步加载多个组件
        AMap.plugin(
          ["AMap.ToolBar", "AMap.Scale", "AMap.OverView"],
          function () {
            // 添加比例尺控件
            map.addControl(new AMap.Scale());

            // 添加工具栏控件
            map.addControl(new AMap.ToolBar());

            // 添加鹰眼图控件
            // 注意：AMap.HawkEye 控件在新版高德地图API中可能已经被移除或更名，你可能需要查找替代方案
            // 如果存在，可以这样添加：
            // this.map.addControl(new AMap.HawkEye());

            // 添加地图类型切换控件
            map.addControl(new AMap.MapType());

            // 添加地理定位控件
            map.addControl(new AMap.Geolocation());

            // 其他地图初始化代码...
          }
        )

在异步加载插件的回调中，我们需要确保回调函数的上下文（this）正确指向Vue实例，因为在JavaScript中，函数的上下文（也就是this的值）是由该函数在哪里被调用决定的，而不是在哪里被定义。在普通的函数调用中，this通常指向全局对象（在浏览器中是window）。然而，在Vue的方法中，this应该指向Vue实例。

在你的代码中，AMap.plugin方法的回调函数是一个普通函数，而不是箭头函数。普通函数有自己的this上下文，它不会被外部作用域中的this值所影响。因此，如果你直接在Vue的方法中使用普通函数作为回调函数，那么在该回调函数中，this将不会指向Vue实例，而是指向全局对象（在浏览器中是window）。

为了解决这个问题，你可以使用箭头函数作为回调函数。箭头函数不会创建它自己的this上下文，它会捕获其所在上下文的this值作为自己的this值。因此，在箭头函数中，this将指向Vue实例，就像在其他Vue方法中一样。

以下是代码示例：

AMap.plugin( 
["AMap.ToolBar", "AMap.Scale", "AMap.OverView"], 
(AMap) => { // 使用箭头函数作为回调函数 
// 添加比例尺控件 
map.addControl(new AMap.Scale()); 


// 添加工具栏控件 
map.addControl(new AMap.ToolBar()); 


// 添加地图类型切换控件 
map.addControl(new AMap.MapType()); 


// 添加地理定位控件 
map.addControl(new AMap.Geolocation()); 


// 其他地图初始化代码... 
} 
).catch((e) => { 
console.log(e); 
});

在这个修改后的示例中，箭头函数(AMap) => {...}作为AMap.plugin的回调函数，它将捕获并保留外部作用域中的this值（即Vue实例），因此在回调函数中你可以正常访问Vue实例的方法和数据。

这样做可以确保在回调函数中正确访问Vue实例，从而能够正确地调用Vue实例中的方法和访问其数据属性。

 那能否写成下面的两种呢

 this.map = new AMap.Map("container", {
          //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zoom: 10, //初始化地图级别
          center: [121.473667, 31.230525], //初始化地图中心点位置
        })
        // 异步加载多个组件
        this.map.plugin(
          ["AMap.ToolBar", "AMap.Scale", "AMap.ControlBar", 'AMap.HawkEye',"AMap.MapType"],
          ()=>{
            // 添加比例尺控件
            this.map.addControl(new AMap.Scale());

            // 添加工具栏控件
            this.map.addControl(new AMap.ToolBar());

            // 添加地图类型切换控件
            this.map.addControl(new AMap.MapType());

            this.map.addControl(new AMap.HawkEye());

            this.map.addControl(new AMap.ControlBar())

            // 其他地图初始化代码...
          })
          }
        )
const map = new AMap.Map("container", {
          //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zoom: 10, //初始化地图级别
          center: [121.473667, 31.230525], //初始化地图中心点位置
        })
        // 异步加载多个组件
        AMap.plugin(
          ["AMap.ToolBar", "AMap.Scale", "AMap.ControlBar", 'AMap.HawkEye',"AMap.MapType"],
          function(){
            // 添加比例尺控件
            map.addControl(new AMap.Scale());

            // 添加工具栏控件
            map.addControl(new AMap.ToolBar());

            // 添加地图类型切换控件
            map.addControl(new AMap.MapType());

            map.addControl(new AMap.HawkEye());

            map.addControl(new AMap.ControlBar())

            // 其他地图初始化代码...
          })
          }
        )

当然是可以的

还有第三种方法——在loader的plugins中进行引入：

<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "6c59a952bf5373b78b97c3152618998c",
};
export default {
  data() {
    return{
      map:null
    }
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "5b243c91635abec127c6b8c2c80ca2d2", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins:["AMap.ToolBar", "AMap.Scale", "AMap.ControlBar", 'AMap.HawkEye',"AMap.MapType"]
      }).then((AMap) => {
        const map = new AMap.Map("container", {
          //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zoom: 10, //初始化地图级别
          center: [121.473667, 31.230525], //初始化地图中心点位置
        })    
            // 添加比例尺控件
            map.addControl(new AMap.Scale());

            // 添加工具栏控件
            map.addControl(new AMap.ToolBar());

            // 添加地图类型切换控件
            map.addControl(new AMap.MapType());

            map.addControl(new AMap.HawkEye());

            map.addControl(new AMap.ControlBar())

            // 其他地图初始化代码...
        
      }).catch((e) => {
          console.log(e);
        
      })
    },
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
};
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

异步加载的主要用处是提高网页的加载速度和用户体验。具体来说，异步加载有以下几个优点：

  1. 非阻塞性：与同步加载相比，异步加载不会阻止浏览器的后续处理与解析。这意味着当浏览器加载某个组件（如 JavaScript 文件或 API）时，它不会停止渲染页面或执行其他脚本。这可以显著提高页面的加载速度，因为浏览器可以同时处理多个任务。
  2. 减少依赖：异步加载允许你在其他脚本执行之前或之后加载特定的 JavaScript 文件或 API。这可以减少脚本之间的依赖关系，使得代码更加模块化和可维护。
  3. 按需加载：异步加载可以根据需要动态地加载 JavaScript 文件或 API。这意味着你可以只在需要时才加载特定的功能或组件，从而减少不必要的网络请求和资源浪费。
  4. 更好的用户体验：由于异步加载可以减少页面加载时间并避免阻塞，因此它可以提供更好的用户体验。用户可以更快地看到和交互页面内容，而不会因为等待某个组件加载而感到烦恼。

在开发实践中，异步加载通常用于加载大型 JavaScript 库、第三方 API、广告脚本等。通过使用异步加载技术，你可以优化网页的性能并提升用户的满意度。

效果展示

松果猿
关注
  • 11
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【高德地图API】Web地图开发系列(二)
2401_84447149的博客
05-01 694
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
vue2项目中引入高德地图--1 简单应用
Zhang_zhangxka的博客
01-12 1986
4.5 在then里面写固定的配置项（viewmode：选择是2d还是3d；zoom：地图的层级，越高显示越近；center：第一次进入页面经纬度显示的地点）4.4初始化地图 --如图配置项 （key：申请的key；plugins：需要用到的插件列表）2.安装高德地图的包 --npm i @amap/amap-jsapi-loader --save。1.首先我们需要进入到高德地图的官方网站申请一个key和密钥 ，创建一个项目--4.1需要给一个带宽高的div盒子 放置地图。3.新建一个放地图的vue组件。
vue2+高德地图web端开发（二）
最新发布
2301_78796401的博客
02-16 1398
通常情况下，开发者需要根据表单控件事件的触发来执行AMap.AutoComplete的search()方法，并将返回结果绘制成 DOM 显示到页面上。当然当然，还有极其简单的方法，直接将输入框 的id写入autoOptions中，都不需要那些杂七杂八的什么事件总线啥的（我也是后来才发现，本来以为不同组件之前的id是需要传递的）中执行的某些操作，而您又没有实现这个钩子函数，那么组件的行为就可能会与预期不符。钩子函数，这个数据获取和状态更新的操作就不会发生，从而影响到组件的渲染和行为。
vue2+高德地图web端开发
一步一个脚印，踏实努力，向着目标前进
08-14 720
mounted在上述代码中，需要替换为你自己的高德地图API密钥。是一个HTML元素的ID，用于容纳地图。需要注意的是，使用高德地图API需要在高德开放平台注册并获取API密钥。在开发过程中，可以参考高德地图的开发文档和示例代码，以了解更多API的使用方法和功能。另外，如果需要在Vue中使用高德地图的UI组件，可以考虑使用Vue组件库，如vue-amap或vue2-amap。这些组件库提供了封装好的Vue组件，可以方便地在Vue中使用高德地图的UI组件和功能。
Vue2+高德地图（仅供自己使用）
caizhuangzhuang的博客
01-17 328
vue2
Vue2项目使用高德地图
GP2719434241的博客
05-08 3634
在vue2中使用高德地图的一些简单功能
前端系列——vue2+高德地图web端开发（使用和引入）
weixin_55683934的博客
04-19 3188
文章有参考其他博主的 如有雷同 纯属巧合！！
vue+高德地图写地图选址组件的方法
11-29
现在做这个移动端的项目中有一个地图选址的功能，本来高德地图中有一个现成的选址组件，但是有两个问题，因为他是用iframe引用的，第一改不了样式，这点还勉强能接受；第二他的左上角有一个返回键，在搜索的时候可以...
vue+高德地图实现地图搜索及点击定位操作
12-28
最近有个需求是实现一个使用地图搜索定位的功能，在网上参考了下其他的文章，感觉不是很完善，自己整理了一下，可以实现点击定位，搜索列表定位等功能，可能有些地方是多余的，需要的自己看着改下 [removed]...
vue2用高德地图实现绘制多边形电子围栏
09-05
vue2用高德地图实现绘制多边形电子围栏
vue基于Vue2.0和高德地图的地图组件实例
08-30
本篇文章主要介绍了vue基于Vue2.0和高德地图的地图组件实例，非常具有实用价值，需要的朋友可以参考下
安卓高德地图开发自定义线路规划(按着自己定义的经纬度规划线路)
07-09
自定义地图的线路规划问题，代码可以直接的借用，方便大家学习
Vue2项目使用高德地图实现地图显示、标记以及获取坐标信息
weixin_52114010的博客
08-31 2442
1.功能中包含了使用api的逆编码方法，所以需要使用web服务的key，在导入时使用的key为web端的key，需要使用两个；在main.js中导入AMap插件，这里使用的key为前面申请的两个key中的web端的key；2.在调用官方接口时，会产生跨域问题，需要在vue.config.js中进行代理操作。如图所示：新建一个web端（JS API）和web服务key；”，这个网址中给出了地理编码以及逆编码的接口，可以直接调用。进入高德控制台首页我的应用中添加两个KEY“在项目根目录下使用下载amap插件。
Vue2中使用高德地图
努力的nana
11-07 1818
vue中使用高德地图，进行点的涟漪的绘制
vue2： 百度地图基础
weixin_1095的博客
06-05 115
【代码】vue 百度地图基础。
vue2高德地图基本使用（记录）
qq_45271317的博客
06-15 329
记录使用 高德地图
高德地图开发
qq_14993591的博客
01-27 2939
1、原生js使用 1.1、引入js 去高德开发者平台创建一个自己key，具体步骤官网有。 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 1.2、设置地图容器 <div id="container"></div> 这是个全屏地图 html, body{ width:100%; hei
【高德地图WEB开发】 入门篇（地图/搜索/经纬度/缩放层级）
Ghmin的博客
03-05 2542
本篇文章是高德地图web开发入门篇，实现地图搜索等基本功能，后续会继续更新地图标记点、驾车、骑行、货车等单地点\多地点导航、公交路线、兴趣周边点、及其他地图功能开发文章，所有功能均使用js实现，这样在各个框架均可使用。
vue echarts +高德地图 大屏 字体太小
09-24
在使用vue echarts和高德地图进行大屏展示时，字体过小可能会影响用户的阅读体验。为了解决这个问题，我们可以采取以下几种方法。 1. 调整echarts和地图容器的大小：可以通过设置容器的宽度和高度，将其放大以适应...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值