賬號注冊

首先得成為高德地圖開發(fā)者，也就是說你的擁有一個賬號，當(dāng)然有公司賬號最好，沒有就暫時自己先注冊一個。

注冊好后，點(diǎn)開控制臺，右上角創(chuàng)建一個新應(yīng)用，選好你需要的環(huán)境，vue的話估計(jì)基本都是web端吧，然后就可以看到你的開發(fā)需要的key了

高德地圖插件安裝

首先說明，這里示例項(xiàng)目使用vue-cli3腳手架，不熟悉的可以先去看看vue-cli3創(chuàng)建項(xiàng)目相關(guān)。

npm安裝vue-amap

npm install vue-amap --save

頁面引入與組件配置

我這里的項(xiàng)目因?yàn)槎鄠€地方都會用的地圖，所以將地圖這一塊抽離出來做一個單獨(dú)的組件，并且是全局組件，方便頁面引用

創(chuàng)建全局組件AMap

創(chuàng)建全局地圖組件文件AMap.vue以及全局組件配置文件globalComponents.js

項(xiàng)目目錄結(jié)構(gòu)如圖所示

main.js頁面引入vue-amap以及globalComponents.js

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import globalComponents from './assets/commonJs/globalComponents'? //全局組件配置文件

import VueAMap from 'vue-amap'; // 高德地圖

import {AMapKey} from './assets/commonJs/constDatas'//AMapKey是高德地圖開發(fā)key，我這里放到了一個專門的文件管理，你也可以不必這樣做。

Vue.use(VueAMap)? //插件使用聲明

Vue.use(globalComponents)? //插件使用聲明

//下面是vue-amap初始化，請將AMapKey換成你自己的key

VueAMap.initAMapApiLoader({

? ? key:AMapKey,

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

? ? v: '1.4.4'

})

Vue.config.productionTip = false

new Vue({

? router,

? store,

? render: h => h(App)

}).$mount('#app')

配置AMap為全局組件

在globalComponents.js文件中

import AMap from '../../globalComponents/AMap/AMap'; //高德地圖組件

export default {

? install(Vue) {

? ? ? Vue.component('AMap', AMap)

? }

};

AMap頁面實(shí)現(xiàn)

**這里強(qiáng)調(diào)一下，想要使用好vue-amap，首先得在頁面引入AMap地圖標(biāo)簽創(chuàng)建地圖實(shí)例，后面才可以使用相應(yīng)的API，有些小伙伴可能并不需要展示地圖，只是想使用某個API,比如根據(jù)經(jīng)緯度獲取地址，所以在main.js中配置好后就迫不及待的去相應(yīng)的頁面來這么一段

AMap.plugin(‘AMap.Geocoder’, ()=> {

let geocoder = new AMap.Geocoder({

// city 指定進(jìn)行編碼查詢的城市，支持傳入城市名、adcode 和 citycode

city:citycode

})

geocoder.getAddress([lng,lat], (status, result)=> {

…

})

**

然后你看到可能就是下面這種

還有你可能直接在頁面引入，比如這樣 import AMap from ‘vue-amap’，然后你很可能看到下面這樣的報(bào)錯。

其他廢話不多說了，總之必須得先在html部分用標(biāo)簽創(chuàng)建好實(shí)例，其他API才可以使用。廢話不多說，上代碼，先看html部分

<template>

? ? <div class="amapBox" :style="{height}">

? ? ? ? <el-amap class="amap-box" :vid="'amap-vue'" :plugin="plugin" :center="mapCenter" :events="events" ref="map">

? ? ? ? ? ? <el-amap-marker

? ? ? ? ? ? ? ? ? ? vid="component-marker"

? ? ? ? ? ? ? ? ? ? :position="markPosition"

? ? ? ? ? ? ? ? ? ? :icon="require('../../assets/images/mapMark.png')"

? ? ? ? ? ? ? ? ? ? :draggable="true"

? ? ? ? ? ? ? ? ? ? :raiseOnDrag="true"

? ? ? ? ? ? ? ? ? ? :events="markEvents"

? ? ? ? ? ? ></el-amap-marker>

? ? ? ? </el-amap>

? ? </div>

</template>

el-amap即vue-amap創(chuàng)建實(shí)例的標(biāo)簽，class不用說，vid照寫就好，是地圖組件id，另外plugin是地圖插件配置，center是地圖的中心位置，events是事件

el-amap-marker是地圖標(biāo)記標(biāo)簽，其中position是標(biāo)簽位置，icon是標(biāo)記圖標(biāo)，可以使用網(wǎng)絡(luò)圖片或者本地圖片，本地圖片請使用require引入，draggable表示是否可以拖動標(biāo)記，events是事件

<!--js部分-->

<script>

? ? export default {

? ? ? ? name: 'AMap',

? ? ? ? //考慮到動態(tài)需求，允許默認(rèn)中心點(diǎn)和地圖高度從父組件傳遞來，如果不傳遞，則使用默認(rèn)值

? ? ? ? props:{

? ? ? ? ? ? center:{

? ? ? ? ? ? ? ? type:Array,

? ? ? ? ? ? ? ? default:()=>{return [106.61994874,26.64158513]}

? ? ? ? ? ? },

? ? ? ? ? ? height:{

? ? ? ? ? ? ? ? type:String,

? ? ? ? ? ? ? ? default:'6rem'

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? data() {

? ? ? ? ? ? return {

? ? ? ? ? ? ? ? mapCenter: [],//地圖中心坐標(biāo)數(shù)組，因?yàn)榭赡軙母附M件傳遞，所以初始為空，將會在created生命周期中賦值

? ? ? ? ? ? ? ? loaded: false,

? ? ? ? ? ? ? ? /*events是包含地圖事件的對象，init是地圖初始化時觸發(fā)，moveeend地圖拖動時觸發(fā)，click點(diǎn)擊地圖觸發(fā)，zoomchange地圖縮放級別更改后觸發(fā)*/

? ? ? ? ? ? ? ? events: {

? ? ? ? ? ? ? ? ? ? init:this.mapInit,

? ? ? ? ? ? ? ? ? ? 'moveend': this.moveend,

? ? ? ? ? ? ? ? ? ? 'zoomchange': this.zoomchange,

? ? ? ? ? ? ? ? ? ? 'click': this.mapClick

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? markEvents:{//標(biāo)記事件

? ? ? ? ? ? ? ? ? ? click:this.markClick, //標(biāo)記點(diǎn)擊觸發(fā)

? ? ? ? ? ? ? ? ? ? dragend:this.markDragend //標(biāo)記拖動觸發(fā)

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? plugin: [ //插件

? ? ? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? ? ? pName: 'Geolocation', //定位插件

? ? ? ? ? ? ? ? ? ? ? ? events: {

? ? ? ? ? ? ? ? ? ? ? ? ? ? init:this.getGolocationInit? //定位初始化函數(shù)

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? },'Autocomplete','PlaceSearch','Scale','OverView','PolyEditor','ToolBar',

? ? ? ? ? ? ? ? ],

? ? ? ? ? ? ? ? markPosition:[106.61994874,26.64158513],//標(biāo)記物位置

? ? ? ? ? ? ? ? cityInfo:{},//當(dāng)前城市信息

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? methods: {

? ? ? ? ? ? // 地圖初始化函數(shù)

? ? ? ? ? ? mapInit(o){

? ? ? ? ? ? ? ? // console.log(o.getCenter())

? ? ? ? ? ? ? ? // console.log(this.$refs.map.$$getInstance())

? ? ? ? ? ? ? ? o.getCity(result => {

? ? ? ? ? ? ? ? ? ? this.cityInfo=result

? ? ? ? ? ? ? ? ? ? this.$emit('getInitCityInfo',result)//獲取初始化城市信息并傳遞給父組件

? ? ? ? ? ? ? ? })

? ? ? ? ? ? },

? ? ? ? ? ? //點(diǎn)圖點(diǎn)擊事件

? ? ? ? ? ? async mapClick(e){

? ? ? ? ? ? ? ? // console.log(e)

? ? ? ? ? ? ? ? let {lng,lat} =e.lnglat

? ? ? ? ? ? ? ? this.markPosition=[lng,lat]

? ? ? ? ? ? ? ? this.$emit('getMapClickLngLat',[lng,lat])//獲取點(diǎn)擊地圖點(diǎn)經(jīng)緯度并傳遞給父組件

? ? ? ? ? ? ? ? let addressInfo=await this.getAddressFromLngLat(lng,lat)

? ? ? ? ? ? ? ? this.$emit('getAddressInfo',addressInfo)//點(diǎn)擊地圖獲取地址并傳遞給父組件

? ? ? ? ? ? },

? ? ? ? ? ? //定位初始化

? ? ? ? ? ? getGolocationInit(o){

? ? ? ? ? ? ? ? o.getCurrentPosition((status, result) => {

? ? ? ? ? ? ? ? ? ? if (result && result.position) {

? ? ? ? ? ? ? ? ? ? ? ? // console.log(result)

? ? ? ? ? ? ? ? ? ? ? ? let {position,addressComponent,formattedAddress}=result

? ? ? ? ? ? ? ? ? ? ? ? let {lng,lat}=position

? ? ? ? ? ? ? ? ? ? ? ? this.mapCenter = [lng, lat]

? ? ? ? ? ? ? ? ? ? ? ? this.markPosition = [lng, lat]

? ? ? ? ? ? ? ? ? ? ? ? this.loaded = true;

? ? ? ? ? ? ? ? ? ? ? ? this.$nextTick();

? ? ? ? ? ? ? ? ? ? ? ? this.$emit('getGolocationInitAddressInfo',{ //獲取定位信息并傳遞給父組件

? ? ? ? ? ? ? ? ? ? ? ? ? ? addressComponent,

? ? ? ? ? ? ? ? ? ? ? ? ? ? formattedAddress,

? ? ? ? ? ? ? ? ? ? ? ? ? ? lng,

? ? ? ? ? ? ? ? ? ? ? ? ? ? lat

? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? });

? ? ? ? ? ? },

? ? ? ? ? ? //地圖移動

? ? ? ? ? ? moveend(){

? ? ? ? ? ? },

? ? ? ? ? ? //地圖比例改變

? ? ? ? ? ? zoomchange(){

? ? ? ? ? ? },

? ? ? ? ? ? markClick(){

? ? ? ? ? ? ? ? // alert('xxx')

? ? ? ? ? ? },

? ? ? ? ? ? //根據(jù)經(jīng)緯度獲取地址

? ? ? ? ? ? getAddressFromLngLat(lng,lat){

? ? ? ? ? ? ? ? let {cityInfo}=this

? ? ? ? ? ? ? ? let {citycode}=cityInfo

? ? ? ? ? ? ? ? return new Promise((resolve,reject)=>{

? ? ? ? ? ? ? ? ? ? AMap.plugin('AMap.Geocoder', ()=> {

? ? ? ? ? ? ? ? ? ? ? ? let geocoder = new AMap.Geocoder({

? ? ? ? ? ? ? ? ? ? ? ? ? ? // city 指定進(jìn)行編碼查詢的城市，支持傳入城市名、adcode 和 citycode

? ? ? ? ? ? ? ? ? ? ? ? ? ? city:citycode

? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? ? ? geocoder.getAddress([lng,lat], (status, result)=> {

? ? ? ? ? ? ? ? ? ? ? ? ? ? // console.log(status,result)

? ? ? ? ? ? ? ? ? ? ? ? ? ? if (status === 'complete' && result.info === 'OK') {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // result為對應(yīng)的地理位置詳細(xì)信息

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let {addressComponent,formattedAddress}=result.regeocode

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let {province,city,district,township}=addressComponent

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? resolve({

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? formattedAddress,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? province,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? city,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? district,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? township

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? })

? ? ? ? ? ? },

? ? ? ? ? ? //標(biāo)記點(diǎn)拖動結(jié)束

? ? ? ? ? ? async markDragend(e){

? ? ? ? ? ? ? ? let {lng,lat} =e.lnglat

? ? ? ? ? ? ? ? let addressInfo=await this.getAddressFromLngLat(lng,lat)

? ? ? ? ? ? ? this.$emit('getAddressInfo',addressInfo)//拖動結(jié)束獲取地址并傳遞給父組件

? ? ? ? ? ? },

? ? ? ? ? ? //通過地址查詢經(jīng)緯度

? ? ? ? ? ? getLngLatFromAddress(address){

? ? ? ? ? ? ? ? if(!address) return

? ? ? ? ? ? ? ? let {cityInfo}=this

? ? ? ? ? ? ? ? let {citycode}=cityInfo

? ? ? ? ? ? ? ? return new Promise((resolve,reject)=>{

? ? ? ? ? ? ? ? ? ? AMap.plugin('AMap.Geocoder', ()=> {

? ? ? ? ? ? ? ? ? ? ? ? let geocoder = new AMap.Geocoder({

? ? ? ? ? ? ? ? ? ? ? ? ? ? city:citycode

? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? ? ? geocoder.getLocation(address, (status, result) =>{

? ? ? ? ? ? ? ? ? ? ? ? ? ? let lngLatArr=[]

? ? ? ? ? ? ? ? ? ? ? ? ? ? let {geocodes=[]} = result

? ? ? ? ? ? ? ? ? ? ? ? ? ? geocodes.forEach((item,index)=>{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let {lng,lat}=item.location

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? lngLatArr.push({lng,lat})

? ? ? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? ? ? ? ? resolve(lngLatArr)

? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? })

? ? ? ? ? ? },

? ? ? ? ? ? //搜索提示

? ? ? ? ? ? getSearchAddresList(keyword){

? ? ? ? ? ? ? ? let {cityInfo}=this

? ? ? ? ? ? ? ? let {citycode}=cityInfo

? ? ? ? ? ? ? ? return new Promise((resolve,reject)=>{

? ? ? ? ? ? ? ? ? ? AMap.plugin('AMap.Autocomplete', ()=>{

? ? ? ? ? ? ? ? ? ? ? ? // 實(shí)例化Autocomplete

? ? ? ? ? ? ? ? ? ? ? ? let autoOptions = {

? ? ? ? ? ? ? ? ? ? ? ? ? ? //city 限定城市，默認(rèn)全國

? ? ? ? ? ? ? ? ? ? ? ? ? ? city: citycode

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? let autoComplete= new AMap.Autocomplete(autoOptions);

? ? ? ? ? ? ? ? ? ? ? ? autoComplete.search(keyword, (status, result)=> {

? ? ? ? ? ? ? ? ? ? ? ? ? ? // 搜索成功時，result即是對應(yīng)的匹配數(shù)據(jù)

? ? ? ? ? ? ? ? ? ? ? ? ? ? if (status === 'complete' && result.info === 'OK') {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // result為對應(yīng)的地理位置詳細(xì)信息

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? resolve(result.tips)

? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? })

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? created(){

? ? ? ? ? ? this.mapCenter=this.center

? ? ? ? },

? ? ? ? mounted() {

? ? ? ? }

? ? }

</script>

下面css部分，高德地圖組件本身默認(rèn)沒有寬高，需要繼承父級的寬高，所以需要給el-map標(biāo)簽父級設(shè)置寬高

<style scoped lang="less">

? ? .amapBox{

? ? ? ? width:100%;

? ? }

</style>

地圖組件已經(jīng)完成，可以愉快的調(diào)用了

父組件調(diào)用AMap組件

AMap已經(jīng)配置為全局組件，所以本頁面可以直接使用，不再需要引入和注冊組件

<template>

? ? <div class="mapBox columnStart">

? ? ? ? <div class="mapSearchBox rowStart">

? ? ? ? ? ? <img src="../../../assets/images/search.png" class="searchIcon"/>

? ? ? ? ? ? <input placeholder="搜索地點(diǎn)" class="mapInput" v-model="searchName" @input="searchAddress"/>

? ? ? ? </div>

? ? ? ? <AMap @getAddressInfo="getAddressInfo" ref="amapComponent"/>

? ? ? ? <ul class="mapAddressBox">

? ? ? ? ? ? <li class="rowBtween mapAddressLi" v-for="(address,index) in addresses" :key="index" @click="chooseAddress(index)">

? ? ? ? ? ? ? ? <div class="addressBox columnStart">

? ? ? ? ? ? ? ? ? ? <div class="addressName">{{address.name}}</div>

? ? ? ? ? ? ? ? ? ? <span class="detailAddress gray999">{{address.formattedAddress}}</span>

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? <van-icon name="success" color="#4491FA" size="18" v-if="activeIndex===index"/>

? ? ? ? ? ? </li>

? ? ? ? </ul>

? ? </div>

</template>

<script>

? ? export default {

? ? ? ? name: 'ChooseAddress',

? ? ? ? data() {

? ? ? ? ? ? return {

? ? ? ? ? ? ? ? routerData:{},//路由跳轉(zhuǎn)攜帶點(diǎn)數(shù)據(jù)

? ? ? ? ? ? ? ? activeIndex:null,//選擇點(diǎn)地址下標(biāo)

? ? ? ? ? ? ? ? addresses:[],//搜索出來的地址

? ? ? ? ? ? ? ? searchName:'',//要搜索的地址名稱

? ? ? ? ? ? ? ? fromRouteName:'',//來源路由名稱

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? methods: {

? ? ? ? ? ? //選擇地址

? ? ? ? ? ? chooseAddress(index){

? ? ? ? ? ? ? ? this.activeIndex=index

? ? ? ? ? ? },

? ? ? ? ? ? //獲取地址

? ? ? ? ? ? getAddressInfo(addressInfo){

? ? ? ? ? ? ? ? // console.log(addressInfo)

? ? ? ? ? ? ? ? let {formattedAddress,province,city,district,township}=addressInfo

? ? ? ? ? ? ? ? this.addresses=[

? ? ? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? ? ? name:`${township}（${city}${district}）`,

? ? ? ? ? ? ? ? ? ? ? ? formattedAddress

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ]

? ? ? ? ? ? ? ? this.activeIndex=0

? ? ? ? ? ? },

? ? ? ? ? ? //搜索地址

? ? ? ? ? ? async searchAddress(){

? ? ? ? ? ? ? ? let {searchName}=this

? ? ? ? ? ? ? let addressInfos=await this.$refs.amapComponent.getSearchAddresList(searchName)

? ? ? ? ? ? ? ? // console.log(addressInfos)

? ? ? ? ? ? ? ? this.addresses=[]

? ? ? ? ? ? ? ? for(let i=0;i<addressInfos.length;i++){

? ? ? ? ? ? ? ? ? ? this.addresses.push({

? ? ? ? ? ? ? ? ? ? ? ? name:addressInfos[i].name,

? ? ? ? ? ? ? ? ? ? ? ? formattedAddress:`${addressInfos[i].district}${addressInfos[i].address}`

? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? //確定選擇地址

? ? ? ? ? ? sureChooseAddress(){

? ? ? ? ? ? ? ? let {addresses,activeIndex,routerData,fromRouteName}=this

? ? ? ? ? ? ? ? routerData.mapAddressInfo=addresses[activeIndex]

? ? ? ? ? ? ? ? this.$globalMethods.batchDispatchFun([

? ? ? ? ? ? ? ? ? ? {fun:'changeShowRightBtn',data:false},

? ? ? ? ? ? ? ? ])

? ? ? ? ? ? ? ? this.$router.replace({

? ? ? ? ? ? ? ? ? ? name:fromRouteName,

? ? ? ? ? ? ? ? ? ? params:{

? ? ? ? ? ? ? ? ? ? ? ? routerData,

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? })

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? mounted() {

? ? ? ? ? ? let {topTitle='地圖',routerData={},fromRouteName=''} = this.$route.params

? ? ? ? ? ? this.routerData=routerData

? ? ? ? ? ? this.fromRouteName=fromRouteName

? ? ? ? ? ? this.$globalMethods.batchDispatchFun([

? ? ? ? ? ? ? ? {fun:'changeTopTitle',data:topTitle},

? ? ? ? ? ? ])

? ? ? ? }

? ? }

</script>

<style scoped lang="less">

? ? .mapBox{

? ? ? ? background:#f5f5f5;

? ? ? ? .mapSearchBox{

? ? ? ? ? ? width:7.1rem;

? ? ? ? ? ? height:.7rem;

? ? ? ? ? ? margin:.2rem auto;

? ? ? ? ? ? background:#ffffff;

? ? ? ? ? ? border:solid .01rem #cccccc;

? ? ? ? ? ? -webkit-border-radius: .1rem;

? ? ? ? ? ? -moz-border-radius: .1rem;

? ? ? ? ? ? border-radius: .1rem;

? ? ? ? ? ? padding:0 .2rem;

? ? ? ? ? ? .searchIcon{

? ? ? ? ? ? ? ? width:.36rem;

? ? ? ? ? ? ? ? height:.36rem;

? ? ? ? ? ? ? ? margin-right:.2rem;

? ? ? ? ? ? }

? ? ? ? ? ? .mapInput{

? ? ? ? ? ? ? ? width:6rem;

? ? ? ? ? ? ? ? border:none;

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? .mapAddressBox{

? ? ? ? ? ? padding:0.2rem 0 1rem .2rem;

? ? ? ? ? ? width:100%;

? ? ? ? ? ? background:#ffffff;

? ? ? ? ? ? height:5rem;

? ? ? ? ? ? overflow:auto;

? ? ? ? ? ? .mapAddressLi{

? ? ? ? ? ? ? ? padding:.2rem 0.2rem .2rem 0;

? ? ? ? ? ? ? ? border-bottom:solid .01rem #e6e6e6;

? ? ? ? ? ? ? ? .addressBox{

? ? ? ? ? ? ? ? ? ? align-items:flex-start;

? ? ? ? ? ? ? ? ? ? .addressName{

? ? ? ? ? ? ? ? ? ? ? ? max-width:6rem;

? ? ? ? ? ? ? ? ? ? ? ? overflow:hidden;

? ? ? ? ? ? ? ? ? ? ? ? -ms-text-overflow: ellipsis;

? ? ? ? ? ? ? ? ? ? ? ? text-overflow: ellipsis;

? ? ? ? ? ? ? ? ? ? ? ? white-space: nowrap;

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? .detailAddress{

? ? ? ? ? ? ? ? ? ? ? ? margin-top:.1rem;

? ? ? ? ? ? ? ? ? ? ? ? font-size:.24rem;

? ? ? ? ? ? ? ? ? ? ? ? max-width:6rem;

? ? ? ? ? ? ? ? ? ? ? ? overflow:hidden;

? ? ? ? ? ? ? ? ? ? ? ? -ms-text-overflow: ellipsis;

? ? ? ? ? ? ? ? ? ? ? ? text-overflow: ellipsis;

? ? ? ? ? ? ? ? ? ? ? ? white-space: nowrap;

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }

? ? }

</style>

————————————————

版權(quán)聲明：本文為CSDN博主「前端小菜鳥crazy? yang」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/qq_41000974/article/details/105169669