vue-amap center和zoom

center：Array 地图中心点坐标值
zoom：地图缩放
PC上，默认范围[3,18]，取值范围[3-18]；
在移动设备上，默认范围[3-19]，取值范围[3-19]

<template><div class="amap-page-container"><el-amap vid="amapDemo":zoom="zoom":center="center":amap-manager="amapManager":events="mapEvents"class="amap-demo"><el-amap-marker vid="component-marker"v-for="(marker, index) in markers":key="index":position="marker.position":content="marker.icon"><!-- :offset="[-20,-20]"> --></el-amap-marker></el-amap></div>
</template><script>
import VueAMap from 'vue-amap'
let amapManager = new VueAMap.AMapManager()
export default {name: 'Test',components: {},data () {return {markerIcon: '<div class="jumper"><div></div><div></div><div></div></div>',center: [116.405994, 39.915378],zoom: 5,// zoom: 13,amapManager,mapEvents: {init (o) {o.setMapStyle('amap://styles/edbc379c8110f081c564f98d8c59f80c');//自定义的高德地图的样式}},markers: [{id: '01',position: [116.405994, 39.915378],icon: '',}, {id: '02',position: [121.33666, 31.148908],icon: '',}]}},methods: {},created () {},mounted () {setTimeout(() => {// 遍历出一个marker，改变它的iconfor (let i = 0; i < this.markers.length; i++) {if (this.markers[i].id === '02') {this.markers[i].icon = this.markerIconthis.zoom = 15this.center = this.markers[i].position}}}, 5000);}
}
</script>

vue-amap center和zoom相关推荐

vue使用高德地图 zoom 不生效
在使用高地图的过程中,在使用地图缩放和地图标记点的时候,会发现zoom这个属性好像没有生效.当我遇到这个问题的是真是百思不得其解,最后了解到,是因为Marker的加载会使地图缩放重新加载,导致最先开始 ...
VUE 实现简单的电子围栏（AMap）
注册账号并申请Key 第一步:main.js 下引入 vue-amap import VueAMap from 'vue-amap';Vue.use(VueAMap);VueAMap.initAMa ...
vue 高德地图Loca.GeoJSONSource、Loca.PolygonLayer绘制3D楼房、AMap.LabelMarker文字标注、Loca.ScatterLayer绘制水波扩散效果
创建地图假设已经正确引入了高德地图,这里使用2.0版本,注意了,1.4.x版本的使用和2.x版本的使用方式不一样.有很多地方不兼容哦. 话说3D效果这一块,高德是真比不上百度地图哦,要不是项目一直用 ...
vue异步加载amap高德地图,解决刷新浏览器地图不显示问题
创建amap.js /** 异步创建script标签*/ export default function MapLoader () {return new Promise((resolve, reje ...
vue 高德地图多边形_Vue + 高德地图画矢量图
功能需求引入并创建地图支持鼠标工具鼠标画矢量图(线.圆.矩形.多边形) 支持矢量图编辑.获取各点经纬度及求面积等操作自定义鼠标右键事件一图胜千言,效果图如下创建地图对象 //DOM加载后动 ...
vue人员轨迹_Vue项目（vuecli3.0搭建）集成高德地图实现路线轨迹绘制
先看最后实现的效果图高德地图api文档使用 1.在index.html里面引入高德地图js文件 2.引入之后我们就直接可以在vue组件里面使用了创建initMap方法,在mounted钩子函数中 ...
vue：高德地图的使用
1.安装 npm安装: npm install vue-amap --save CDN: <script src="https://unpkg.com/vue-amap/dist/in ...
Vue对高德地图2.0的封装使用
在Vue项目里使用高德地图,网上有几个比较好用的,例如 AMap-Vue ,文档很好,但不开源 vue-amap ,文档让人流泪懒人和需求不复杂的,可以直接使用上面的.上面两开源的已经不太活跃了,用 ...
vue 获取用户位置高德_Vue使用高德地图
主要是想记录一下使用高德地图地位以及标记当前位置,搜索位置的过程. 创建Vue项目的流程引入高德地图在index.html 的head中引入代码. 复制代码设置容器,初始化地图. .contai ...

vue-amap center和zoom

vue-amap center和zoom相关推荐

最新文章

热门文章