vue 使用高德地图vue-amap组件过程解析

vue 使用高德地图使用高德地图vue-amap组件过程解析组件过程解析

主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考

学习价值,需要的朋友可以参考下

这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价

值,需要的朋友可以参考下

首先

npm install -S vue-amap

然后在 main.js

// 插件集合

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

v: '1.4.4'

});

map.vue文件

其中有个BUS.js，是基于观察者模式的发布订阅封装

<template>

<div class="_map">

<div class="amap-page-container">

<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" ></el-amap-search-box>

<li class="" v-for="(item,index) in list" :key="index" :class="currIndex == index ? 'active':''" @click="select(item,index)">

<p class="address">{{item.address}}</p>

<p class="nm">{{item.name}}</p>

</li>

</ul>

</div>

</div>

</template>

<style>

top: 25px;

left: 20px;

z-index: 200 !important;

}

.amap-demo {

height: 300px;

}

.amap-logo {

display: none;

}

}

.amap-geolocation-con{

bottom: 30px !important;

z-index: 199 !important;

}

ul li.active{

color: deeppink;

}

</style>

<script>

return {

list:[],

currIndex:0,

zoom: 16,