Vue-amp基于高德地图

2024-04-14 12:36

本文主要是介绍Vue-amp基于高德地图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、安装相关依赖

npm install vue-amp --save

二、在main.js文件中引用

然后在main.js入口文件中引入高德地图,分发出去,让每个组件都可以使用,

    import AMap from 'vue-amap'

    Vue.use(AMap)

初始化地图

AMap.initAMapApiLoader({

// 高德的key

key: 'a33ac630e30cd71cf228e2f465e8a96b',

// 插件集合

plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],

v: '1.4.4'

});

三、vue-amap | 基于 Vue 2.x 与高德的地图组件

官方网址:组件 | vue-amap

四、某一页面引入地图组件

import mapAdd from './mapAdd.vue'//高德地图

map-add ref="mapEdit" @obtain="position" :index="index">map-add>

五、地图为单独一个组件

<template><div><el-dialog :title="title" :visible.sync="editFormVisible" :modal-append-to-body="false" @close="close" ><div id="dialog_content" style="height: 360px;overflow-y: scroll" v-loading="loading"><div class="amap-page-container"><el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" ref="input"></el-amap-search-box><el-amap vid="amapDemo" :center="mapCenter" :zoom="12" class="amap-demo"><el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker"  :draggable="true" :events="marker.events" :visible="marker.visible"></el-amap-marker></el-amap></div></div><div slot="footer" class="dialog-footer"><dj-button-save @click="handleSave"/><dj-button-cancel @click="editFormVisible=false"/></div></el-dialog></div>
</template><script>export default {props:['index'],data(){return{editFormVisible:false,loading:false,title:'',ruleForm:{name:''},list:'',//传过来的坐标值searchName:'',//传过来的搜索值markers: [],searchOption: {city: '济南',citylimit: false},mapCenter:  [117.11946,36.654395]}},created(){},methods:{onSearchResult(pois) {let latSum = 0;let lngSum = 0;this.markers = []if (pois.length > 0) {this.markers.push([pois[0].lng, pois[0].lat]);pois.forEach(poi => {let {lng, lat} = poi;lngSum += lng;latSum += lat;});let center = {lng: lngSum / pois.length,lat: latSum / pois.length};this.mapCenter = [center.lng, center.lat];}console.log(this.markers,'marke')},close(){this.loading = truethis.markers = []this.ruleForm.name = ''this.$refs['input'].keyword = ''},handleSave(){const position = this.markers[0][0]+'/'+this.markers[0][1];const site =  this.$refs['input'].keyword;console.log(site)this.$emit('obtain',position,this.index,site)this.$nextTick(()=>{this.editFormVisible = false})},show(visible = true) {this.editFormVisible = visiblethis.loading = falsethis.$nextTick(()=>{// console.log(this.list,'9999')this.$refs['input'].keyword = this.searchNamethis.markers.push(this.list)this.mapCenter = this.list})},/*** 处理新建*/handleCreate(title,list,searchName) {this.title = titlethis.list = listthis.searchName = searchName// 显示弹框this.show()},}}
</script><style scoped>
#container{width: 96%;margin-left: 2%;height: 350px;position: absolute;top: 150px;
}
.amap-demo {height: 350px;
}.search-box {position: absolute;top: 25px;left: 20px;
}.amap-page-container {position: relative;
}
</style>

这篇关于Vue-amp基于高德地图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/903004

相关文章

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关