vue 使用 amap 创建地图

vue 使用 amap 创建地图

👍记得点赞哦 😄

👇大佬请看👇
为了方便,我使用的组件方式；方法也都在这里；后续不断完善和更新

1. 创建地图组件（过于简单不讲，不会的话去看文档学习吧，太基础了 o(╥﹏╥)o ！）

2. 创建地图 首先需要一个块来存放地图 也就是 div + id

 <div id="pointMap"></div>

· 为了限制大小样式（注：边框大小之类，地图内样式或地图上添加东西不在这！！） 我还加了一层

<div class="map_con" :style="styleObject">
    <div id="pointMap"></div>
 </div>

3. 初始化方法：

/* 放到data里
amapManager:{};
zoom：12 // 可监听一下 方便传值控制  // 官方范围 3-18 有效
center：[116.2349 ，39.551] // 同上  //先经度在纬度
*/
//将方法放在created里调用
initMap(){
    this.amapManager = new AMap.Map('pointMap', {  // 注意id对应
                  resizeEnable: true, //是否监控地图容器尺寸变化
                  buildingAnimation: "true", //3D视图楼块动画，PC端默认true，  可以不写
                  pitch: "60", //俯仰角度
                  zoom: this.zoom, //初始化地图层级  //通俗理解 放大尺寸 标尺
                  center: [this.center[0], this.center[1]], //初始化地图中心点
              });
              this.amapManager.setMapStyle("amap://styles/normal"); // 官方样式
}

其它页面调用时就会出现以下效果，如有需要直接写到页面也可。看自己需求,

效果：

都看👓完了，就👍1️⃣👇吧

下篇文章：地图描点+描点居中+删除描点