使用vue-amap

(图一) 页面预览：当前位置（红色图标处）

（图二）页面预览：文字设置 + 弹框设置

(图三) 搜索插件 + toolBar 插件

(图四) 时间轴插件

<template><div class="amap-page-container"><!-- 搜索框 --><el-amap-search-box class="search-box":search-option="searchOption":on-search-result="onSearchResult"></el-amap-search-box><el-amapref="map"vid="amapDemo":center="center":map-manager="amapManager":zoom="zoom":plugin="plugin":events="events"class="amap-demo"><!-- 在地图上标记点 --><el-amap-markerv-for="(marker,index) in markers":key="index":position="marker" ></el-amap-marker><!-- 坐标点 --><el-amap-marker vid="amapDemo" :position="center"></el-amap-marker><el-amap-info-window:position="currentWindow.position":content="currentWindow.content":visible="currentWindow.visible":events="currentWindow.events"></el-amap-info-window><!-- 放置图片 --><el-amap-ground-image v-for="(groundimage,index) in groundimages":url="groundimage.url":key="index":bounds="groundimage.bounds":events="groundimage.events"></el-amap-ground-image><!-- 文字 --><el-amap-text v-for="(text,index) in texts":text="text.text":key="index":offset="text.offset":position="text.position":events="text.events"></el-amap-text><el-amap-text v-for="(text,index) in texts2":text="text.text":key="index":offset="text.offset":position="text.position":events="text.events"></el-amap-text><el-amap-text v-for="(text,index) in texts3":text="text.text":key="index":offset="text.offset":position="text.position":events="text.events"></el-amap-text></el-amap><!-- 点击地图的按钮 --><div class="toolbar"><button @click="getMap()">获取地图信息</button><button @click="switchWindow(0)">展示第一个位置</button><button @click="switchWindow(1)">展示第二个位置</button></div></div>
</template>
<script>
import Vue from 'vue'
import VueAMap from 'vue-amap'
Vue.use(VueAMap)let amapManager = new VueAMap.AMapManager()
export default {name: 'Gaode',created () {VueAMap.initAMapApiLoader({key: '你的开发者key',plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation','AMapUI.loadUI', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.PolyEditor', 'AMap.CircleEditor'],uiVersion: '1.0.11' // 版本号})},mounted () {this.currentWindow = this.windows[1]// 初始化窗口信息},data: function () {let me = thisme.city = me.city || '上海'return {zoom: 12,center: [121.59996, 31.197646], // 中心位置makerConf: {position: [121.59996, 31.197646],content: ''},amapManager,events: {init: (o) => {// 将当前位置标记为AAMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) {const marker = new SimpleMarker({iconLabel: 'A',iconStyle: 'red',map: o,position: o.getCenter()})})console.log('当前位置的坐标', o.getCenter())console.log('方法', this.$refs.map.$$getInstance())o.getCity(result => {console.log(result)})},'moveend': () => {},'zoomchange': () => {},'click': (e) => {console.log(e)this.center = [e.lnglat.lng, e.lnglat.lat]// 点击选择新地址为中心点const msg = {key: '3df604a614d7f0e325f79bb25cdee15c',location: this.center.join()}// 获取当前地址console.log(this, 'this')this.$$.ajax({url: 'https://restapi.amap.com/v3/geocode/regeo',data: msg,success: data => {console.log(data)let d = data.regeocodeif (d) {this.address = d.formatted_address// 点击选择新地址并获取地址的名称}}})}},markers: [[121.49996, 31.297646],[121.40018, 31.197622],[121.49991, 31.207649]],searchOption: {city: '上海',citylimit: true},mapCenter: [121.40996, 31.197646],// ToolBar工具条插件、MapType插件、Scale比例尺插件、OverView鹰眼插件plugin: ['ToolBar', {pName: 'MapType',defaultType: 0,events: {init (o) {console.log(o)}}}, {pName: 'Scale',events: {init (instance) {console.log(instance)}}}, {pName: 'OverView',events: {init (instance) {console.log(instance)}}}],windows: [ // 窗口信息框{position: [121.69996, 31.237646],content: `<img style="width:50px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543494665847&di=152e6f241b64580684a1c048ec9acd7e&imgtype=0&src=http%3A%2F%2Fp0.so.qhmsg.com%2Ft017668631465b251d5.gif"><p style="color:red">Hi！  马优晨，我在这里呢 ！</p>`,visible: true,events: {close () {console.log('关闭窗口一！')}}}, {position: [121.5875285, 31.21515044],content: '<img style="width:50px;" src="https://b305.photo.store.qq.com/psb?/V12aHQSq1CQ6SF/jfM4Tyeelt4v09alIPSOBkDqUCRgwqCHQKMs5iV4x3A!/b/dDEBAAAAAAAA&bo=wAMABQAAAAARB*Y!&rf=viewer_4"><p style="color:red">我在国际博览中心！</p>',visible: true,events: {close () {console.log('关闭窗口二！')}}}],// 放置图片groundimages: [{url: 'https://imedl.sogoucdn.com/cache/skins/uploadImage/2018/11/12/15420362056827_former.gif',bounds: [[121.5273285, 31.21515044], [122.9273285, 32.31515044]],events: {click () {alert('click groundimage')}}}],// 放置文字texts: [{position: [121.5273285, 31.27515044],text: `<img style="width:50px;" src="http://imgsa.baidu.com/exp/w=500/sign=ce843cf58282b9013dadc333438ca97e/10dfa9ec8a13632763a8d5e1998fa0ec09fac79e.jpg"><p>探索宝藏的第一个线索！</p>`,offset: [0, 0],events: {click: () => {alert('click text')}}}],// 放置文字texts2: [{position: [121.6873285, 31.19515044],text: '<img style="width:50px;" src="http://cdn.duitang.com/uploads/item/201501/10/20150110172950_aenAB.thumb.700_0.gif"><p>探索宝藏的第二个线索！</p>',offset: [0, 0],events: {click: () => {alert('click text')}}}],// 放置文字texts3: [{position: [121.6873285, 31.29515044],text: '<img style="width:50px;" src="http://b-ssl.duitang.com/uploads/item/201710/05/20171005143631_5yZeJ.gif"><p>探索宝藏的第三个线索！</p>',offset: [0, 0],events: {click: () => {alert('click text')}}}],slotWindow: {position: [121.5163285, 31.21515044]},// 当前窗口currentWindow: {position: [0, 0],content: '',events: {},visible: false},// 个人定义的地址address: ''}},methods: {getMap () {console.log(amapManager._componentMap)console.log(amapManager._map)},// 切换信息窗口switchWindow (tab) {this.currentWindow.visible = falsethis.$nextTick(() => {this.currentWindow = this.windows[tab]this.currentWindow.visible = true})},// 在地图上添加标记的点addMarker: function () {let lng = 121.5 + Math.round(Math.random() * 1000) / 10000let lat = 31.197646 + Math.round(Math.random() * 500) / 10000this.markers.push([lng, lat])},// 搜索框输入onSearchResult (pois) {console.log(pois, '123456789')let me = thislet latSum = 0let lngSum = 0if (pois.length > 0) {var poi = pois[0]let lng = poi['lng']let lat = poi['lat']me.center = [lng, lat]me.makerConf.position = [lng, lat]me.list = poispois.forEach(poi => {let {lng, lat} = poilngSum += lnglatSum += latthis.markers.push([poi.lng, poi.lat])})let center = {lng: lngSum / pois.length,lat: latSum / pois.length}this.mapCenter = [center.lng, center.lat]}}}
}
</script><style scoped>.amap-demo {height: 1200px;}.search-box {position: absolute;top: 25px;left: 70px;}.amap-page-container {position: relative;}.toolbar button {background: #42b983;border: 0;color: white;padding: 8px;margin: 0 5px;border-radius: 3px;cursor: pointer;margin-top:10px;}
</style>

使用vue-amap相关推荐

高德地图导入（选点读取地址和经纬度）
准备工作首先要去高德开放平台免费申请一个key.申请key的过程暂不赘述,相信没人傻到需要看文档才会操作,不过需要注意的是,在本项目中需要申请:web端(JSAPI):然后就可以掏出高德地图官方文档 ...
bmaplib vue 调用_Vue-cli3/4中使用AMap、BMap
首先国内三大地图服务商高德地图(AMap)腾讯地图(qqmap) 百度地图(BMap) 其中AMap 和 qqmap 使用的坐标系为 GCJ02 火星坐标系 BMap使用的坐标系为 BD09 百度 ...
amap vueamap 与_在vue中使用高德地图vue-amap
1.安装 vue-amap我安装指定版本0.5.10的版本 npm i --save vue-amap@0.5.10 2.main.js中的配置 // 高德离线地图 import VueAMap fr ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
VUE 实现简单的电子围栏（AMap）
注册账号并申请Key 第一步:main.js 下引入 vue-amap import VueAMap from 'vue-amap';Vue.use(VueAMap);VueAMap.initAMa ...
vue项目中调用高德地图vue-amap 插件的AMap.PlaceSearch简用
vue项目调用高德地图vue-amap 插件的AMap.PlaceSearch简用结合 elementui 的 el-input 直接下拉选取地点不展示地图 1.下载 npm install v ...
高德地图api @amap/amap-jsapi-loader封装成方法(定位、点标记、路径规划、搜索等) 适用于vue等框架
高德地图api 封装成公共方法用于项目中目前封装的方法有定位点标记比例尺插件信息窗体经纬度附近搜索关键字搜索交通路径规划(经纬度或地点名) 步行路径规划(经纬度或地点名) 经纬度获取地 ...
vue 高德地图Loca.GeoJSONSource、Loca.PolygonLayer绘制3D楼房、AMap.LabelMarker文字标注、Loca.ScatterLayer绘制水波扩散效果
创建地图假设已经正确引入了高德地图,这里使用2.0版本,注意了,1.4.x版本的使用和2.x版本的使用方式不一样.有很多地方不兼容哦. 话说3D效果这一块,高德是真比不上百度地图哦,要不是项目一直用 ...
android高德地图获取海拔_在vue中使用高德地图开发，以及AMap的引入？
百度引入BMap ,一个import 即可,可AMap 却报AMap is not difined ? 1.首先在 externals: { "BMap": "BMap& ...
vue初始化高德地图报错‘AMap‘ is not defined
在使用高德地图的时候在Index.html里面引入了在文件中也这么初始化了可是报错了 'AMap' is not defined' 试了多种办法都没用,最后试着在.eslintrc.js中配置了一 ...

使用vue-amap

使用vue-amap相关推荐

最新文章

热门文章