vue 使用高德地圖插件 vue-amap文章

賬號(hào)注冊(cè)

首先得成為高德地圖開(kāi)發(fā)者助泽，也就是說(shuō)你的擁有一個(gè)賬號(hào)，當(dāng)然有公司賬號(hào)最好嚎京，沒(méi)有就暫時(shí)自己先注冊(cè)一個(gè)嗡贺。

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



高德地圖插件安裝

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

npm安裝vue-amap

npm install vue-amap --save

頁(yè)面引入與組件配置

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

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

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

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

main.js頁(yè)面引入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是高德地圖開(kāi)發(fā)key床绪，我這里放到了一個(gè)專門(mén)的文件管理客情，你也可以不必這樣做。

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

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

//下面是vue-amap初始化癞己，請(qǐng)將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頁(yè)面實(shí)現(xiàn)

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

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

let geocoder = new AMap.Geocoder({

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

city:citycode

})

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

…

})

**

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

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


其他廢話不多說(shuō)了劲阎，總之必須得先在html部分用標(biāo)簽創(chuàng)建好實(shí)例绘盟，其他API才可以使用。廢話不多說(shuō)悯仙，上代碼龄毡，先看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不用說(shuō)锡垄，vid照寫(xiě)就好沦零，是地圖組件id，另外plugin是地圖插件配置货岭，center是地圖的中心位置路操，events是事件

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

<!--js部分-->

<script>

? ? export default {

? ? ? ? name: 'AMap',

? ? ? ? //考慮到動(dòng)態(tài)需求，允許默認(rèn)中心點(diǎn)和地圖高度從父組件傳遞來(lái)，如果不傳遞峰弹，則使用默認(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)榭赡軙?huì)從父組件傳遞，所以初始為空垮卓，將會(huì)在created生命周期中賦值

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

? ? ? ? ? ? ? ? /*events是包含地圖事件的對(duì)象垫桂，init是地圖初始化時(shí)觸發(fā)，moveeend地圖拖動(dòng)時(shí)觸發(fā)粟按，click點(diǎn)擊地圖觸發(fā)诬滩，zoomchange地圖縮放級(jí)別更改后觸發(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)記拖動(dòng)觸發(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

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

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? });

? ? ? ? ? ? },

? ? ? ? ? ? //地圖移動(dòng)

? ? ? ? ? ? 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為對(duì)應(yīng)的地理位置詳細(xì)信息

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

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

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

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

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

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

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

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

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

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

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

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

? ? ? ? ? ? ? ? })

? ? ? ? ? ? },

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

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

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

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

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

? ? ? ? ? ? },

? ? ? ? ? ? //通過(guò)地址查詢經(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)全國(guó)

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

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

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

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

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

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

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

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

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

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

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

? ? ? ? ? ? ? ? })

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? created(){

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

? ? ? ? },

? ? ? ? mounted() {

? ? ? ? }

? ? }

</script>


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

<style scoped lang="less">

? ? .amapBox{

? ? ? ? width:100%;

? ? }

</style>


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

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

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

<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:[],//搜索出來(lái)的地址

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

? ? ? ? ? ? ? ? fromRouteName:'',//來(lái)源路由名稱

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? 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博主「前端小菜鳥(niǎo)crazy? yang」的原創(chuàng)文章砂蔽，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議洼怔，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末左驾，一起剝皮案震驚了整個(gè)濱河市镣隶，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌诡右，老刑警劉巖安岂，帶你破解...
    沈念sama閱讀 206,839評(píng)論 6贊 482
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異帆吻，居然都是意外死亡域那，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評(píng)論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門(mén)桅锄，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)琉雳，“玉大人样眠，你說(shuō)我怎么就攤上這事友瘤。” “怎么了檐束？”我有些...
    開(kāi)封第一講書(shū)人閱讀 153,116評(píng)論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵辫秧，是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我被丧，道長(zhǎng)盟戏，這世上最難降的妖魔是什么绪妹？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,371評(píng)論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮柿究，結(jié)果婚禮上邮旷，老公的妹妹穿的比我還像新娘。我一直安慰自己蝇摸，他們只是感情好婶肩，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,384評(píng)論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著貌夕，像睡著了一般律歼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上啡专，一...
    開(kāi)封第一講書(shū)人閱讀 49,111評(píng)論 1贊 285
  • 城市分裂傳說(shuō)
    那天险毁，我揣著相機(jī)與錄音，去河邊找鬼们童。 笑死畔况，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的慧库。 我是一名探鬼主播问窃，決...
    沈念sama閱讀 38,416評(píng)論 3贊 400
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼完沪！你這毒婦竟也來(lái)了域庇？” 一聲冷哼從身側(cè)響起，我...
    開(kāi)封第一講書(shū)人閱讀 37,053評(píng)論 0贊 259
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤覆积，失蹤者是張志新（化名）和其女友劉穎听皿，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體宽档，經(jīng)...
    沈念sama閱讀 43,558評(píng)論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡尉姨，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,007評(píng)論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了吗冤。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片又厉。...
    茶點(diǎn)故事閱讀 38,117評(píng)論 1贊 334
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖椎瘟，靈堂內(nèi)的尸體忽然破棺而出覆致，到底是詐尸還是另有隱情，我是刑警寧澤肺蔚，帶...
    沈念sama閱讀 33,756評(píng)論 4贊 324
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布煌妈，位于F島的核電站，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏璧诵。R本人自食惡果不足惜汰蜘，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,324評(píng)論 3贊 307
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望之宿。 院中可真熱鬧族操，春花似錦、人聲如沸比被。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,315評(píng)論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)姐赡。三九已至莱预，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間项滑，已是汗流浹背依沮。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,539評(píng)論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留枪狂，地道東北人危喉。 一個(gè)月前我還...
    沈念sama閱讀 45,578評(píng)論 2贊 355
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像州疾，于是被迫代替她去往敵國(guó)和親辜限。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,877評(píng)論 2贊 345

推薦閱讀更多精彩內(nèi)容