(圖一) 頁面預(yù)覽 ：當(dāng)前位置（紅色 圖標(biāo)處）

（圖二）頁面預(yù)覽： 文字設(shè)置 + 彈框設(shè)置

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

(圖四) 時(shí)間軸插件

<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"><!-- 在地圖上標(biāo)記點(diǎn) --><el-amap-markerv-for="(marker,index) in markers":key="index":position="marker" ></el-amap-marker><!-- 坐標(biāo)點(diǎn) --><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><!-- 點(diǎn)擊地圖的按鈕 --><div class="toolbar"><button @click="getMap()">獲取地圖信息</button><button @click="switchWindow(0)">展示第一個(gè)位置</button><button @click="switchWindow(1)">展示第二個(gè)位置</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: '你的開發(fā)者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' // 版本號(hào)})},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) => {// 將當(dāng)前位置標(biāo)記為AAMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) {const marker = new SimpleMarker({iconLabel: 'A',iconStyle: 'red',map: o,position: o.getCenter()})})console.log('當(dāng)前位置的坐標(biāo)', 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]// 點(diǎn)擊選擇新地址為中心點(diǎn)const msg = {key: '3df604a614d7f0e325f79bb25cdee15c',location: this.center.join()}// 獲取當(dāng)前地址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// 點(diǎn)擊選擇新地址并獲取地址的名稱}}})}},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！ 馬優(yōu)晨，我在這里呢 ！</p>`,visible: true,events: {close () {console.log('關(guān)閉窗口一！')}}}, {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">我在國(guó)際博覽中心！</p>',visible: true,events: {close () {console.log('關(guān)閉窗口二！')}}}],// 放置圖片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>探索寶藏的第一個(gè)線索！</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>探索寶藏的第二個(gè)線索！</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>探索寶藏的第三個(gè)線索！</p>',offset: [0, 0],events: {click: () => {alert('click text')}}}],slotWindow: {position: [121.5163285, 31.21515044]},// 當(dāng)前窗口currentWindow: {position: [0, 0],content: '',events: {},visible: false},// 個(gè)人定義的地址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})},// 在地圖上添加標(biāo)記的點(diǎn)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>

總結(jié)

以上是生活随笔為你收集整理的使用vue-amap的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。