生活随笔
收集整理的這篇文章主要介紹了
vue使用高德地图
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
vue中高德地圖推薦使用此方法
- **前面三點可以不用看直接看第四點就行了**!!!
- 1.npm 安裝
- 2.創(chuàng)建初始文件 loadAMap.js
- 3.在頁面或者組件內(nèi)調(diào)用
- end.經(jīng)過后期踩坑高德地圖推薦使用方法直接走以下最好
前面三點可以不用看直接看第四點就行了!!!
1. 如果處理不當會出現(xiàn)地圖內(nèi)存無限遞增,包括不局限于 console.log 的使用導致
2. 內(nèi)存遞增出現(xiàn)的原因就是因為有閉包效果,內(nèi)存無法釋放
3. console.log 后會導致地圖銷毀不掉,然后出現(xiàn)內(nèi)存莫名其妙遞增
4. 初始弄起來麻煩,還不如直接 script 標簽一把梭,然后等界面js加載完畢直接調(diào)用就行了
1.npm 安裝
npm i @amap/amap-jsapi-loader --save
2.創(chuàng)建初始文件 loadAMap.js
import AMapLoader
from '@amap/amap-jsapi-loader';
export function loadAMap() {return AMapLoader
.load({key
: '替換成申請好的key值', version
: '2.0', plugins
: ['AMap.Geocoder', 'AMap.MarkerClusterer', 'AMap.MoveAnimation'], AMapUI
: { version
: '1.1', plugins
: [] }});
}
或者不用第一步直接走第二步和第三步
import AMapLoader
from '@amap/amap-jsapi-loader'
export function loadAMap () {return new Promise((resolve
, reject
) => {if (document
.getElementById('MapXXXX')) {resolve()return}if (window
.AMap
) resolve()window
.init = function () {resolve()}const script
= document
.createElement('script')script
.type
= 'text/javascript'script
.id
= 'MapXXXX'script
.src
= '//webapi.amap.com/maps?v=2.0&key=你的key值&callback=init'script
.onload
= script
.onreadystatechange = function () {if (!this.readyState
|| this.readyState
=== 'loaded' || this.readyState
=== 'complete') {resolve()}}document
.head
.appendChild(script
)})
}
3.在頁面或者組件內(nèi)調(diào)用
<template><div><div id="maps" /></div>
</template>
<script>
import { loadAMap } from '@/utils/loadAMap';
export default {mounted() {this.init();},method() {init() {loadAMap().then(() => {this.map = new AMap.Map('maps', {resizeEnable: true,zoom: 11});}).catch((err) => {console.log('err', err);});},}
}
</script>
<style lang="scss" scoped>
#maps {width:100%; height: 600px; }
</style>
結(jié)果引入成功:
end.經(jīng)過后期踩坑高德地圖推薦使用方法直接走以下最好
在vue的唯一html文件中加入以下代碼
<script src
="https://webapi.amap.com/maps?v=1.4.15&key=你的高德key&plugin=AMap.ToolBar,AMap.Driving,AMap.Walking,AMap.MouseTool,AMap.Geocoder,AMap.CircleEditor,AMap.MarkerClusterer,AMap.GraspRoad,AMap.Autocomplete,AMap.MouseTool,AMap.PolyEditor,AMap.RectangleEditor,AMap.DistrictSearch,AMap.RangingTool,AMap.PlaceSearch"></script
><script src
="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script
>
2.然后直接在 this.$nextTick() 中初始化地圖信息
data() {return {map
: null}
},
created() {this.init()
},
methods
: {init() {this.$nextTick(() => {this.map
= new AMap.Map('maps', {resizeEnable
: true,zoom
: 11})this.geocoder
= new AMap.Geocoder()this.map
.on('click', (event
) => {this.addMrker(event
.lnglat
)})})},addMrker(position
) {const _this
= thisthis.geocoder
.getAddress([position
.lng
, position
.lat
], (status
, result
) => {if (status
=== 'complete' && result
.info
=== 'OK') {this.map
.clearInfoWindow()const marker
= new AMap.Marker({map
: _this
.map
,position
: new AMap.LngLat(position
.lng
, position
.lat
),size
: new AMap.Size(60, 26),offset
: new AMap.Pixel(0, 0),extData
: result
.regeocode
})_this
.addInfowindow(marker
)marker
.on('click', (e
) => {_this
.addInfowindow(marker
)})_this
.map
.add(marker
)marker
.setMap(_this
.map
)}})}
}
附上地圖組件封裝的代碼一份
<template
><div
class="map-wrapper"><div v
-if="type !== 'view'" class="map-top"><a
-input v
-if="mapConfig.search && mapConfig.search.show" :id
="mapConfig.search.id" v
-model
="placeSearch" class="map-search" /><ul v
-if="mapOpr.length" class="map-operate"><li v
-for="(item, index) in mapOpr" :id
="item.id" :key
="index" :class="{'active': oprIndex === index}" @click
="toDraw(item, index)"><i
:class="'iconfont ' + item.icon" /><span
>{{ item
.name
}}</span
></li
></ul
><p v
-show
="isShowClear" class="clear" @click
="mapOprClear"><span
>{{ clearTxt
}}</span
></p
></div
><div
:id
="mapId" ref
="mapBox" class="map-cnt" /></div
>
</template
>
<script
>
import axios
from 'axios'
const defaultSet
= {mapKey
: '你的key'
}
const mapIcons
= {'default': {url
: require('@/assets/logo.png'),size
: [32, 32],offset
: [13, 6]}
}const sysInfo
= {sysName
: '監(jiān)測平臺',logo
: require('@/assets/logo.png'),center
: [110.439376, 30.110744]
}const mapBaseCfg
= {search
: {show
: true,id
: 'map-search'},point
: {offset
: [0, 0],icon
: 'default'}
}
export default {name
: 'AMap',props
: {mapId
: {type
: String
,default: 'map'},mapCfg
: {type
: Object
,default() {return {}}},points
: {type
: Array
,default() {return []}},type
: {type
: String
,default: ''},gridType
: { type
: String
|| Number
,default: ''},editData
: {type
: Object
,default() {return {}}},styles
: { type
: Object
,default() {return {}}},mapStyle
: { type
: String
,default: ''},imgSizeChange
: { type
: Boolean
,default: false}},data() {return {center
: {lng
: sysInfo
.center
[0],lat
: sysInfo
.center
[1]},mapConfig
: { ...mapBaseCfg
, ...this.mapCfg
},mapData
: {map
: {}, markers
: {} },oprIndex
: 0,currentMapObj
: {},isShowDistrict
: false,treeData
: [],adcode
: 0,currentLngLat
: '',placeSearch
: '',gridOpr
: {0: [ {name
: '標記點',id
: 'marker',key
: '5',icon
: 'icon-biaojidian'},{name
: '行政區(qū)域',id
: 'district',key
: '4',icon
: 'icon-hangzhengquyu'},{name
: '圓形區(qū)域',id
: 'circle',key
: '0',icon
: 'icon-hangzhengquyu'},{name
: '矩形區(qū)域',id
: 'rectangle',key
: '2',icon
: 'icon-duoxuan'},{name
: '多邊形區(qū)域',id
: 'polygon',key
: '3',icon
: 'icon-duobianxing'}],1: [],2: [ {name
: '自定義路段',id
: 'custom',key
: '1',icon
: 'icon-daolu'},{name
: '路段規(guī)劃',id
: 'roadPlan',key
: '7',icon
: 'icon-luduanguihua'},{name
: '行駛軌跡規(guī)劃',id
: 'tracePlan',key
: '8',icon
: 'icon-guiji'}]},mapOpr
: [],isShowClear
: true,clearTxt
: '清空'}},mounted() {this.$nextTick(() => {this.mapData
.mapType
= this.type
if (this.type
=== 'grid') {this.clearTxt
= '重繪'this.isShowClear
= false} else {this.clearTxt
= '清空'this.isShowClear
= true}this.clearTxt
= this.type
=== 'grid' ? '重繪' : '清空'this.mapOpr
= this.gridType
.toString() ? this.gridOpr
[this.gridType
] : []setTimeout(() => {this.mapInit()}, 0)})},methods
: {mapInit() {let _this
= thisthis.map
= new AMap.Map(this.mapId
, {center
: [this.center
.lng
, this.center
.lat
],zoom
: this.mapConfig
.zoom
|| 14,zooms
: this.mapConfig
.zooms
|| [3,18],viewMode
: this.mapConfig
.viewMode
|| '2D',})this.mapStyle
&& this.map
.setMapStyle(this.mapStyle
)this.mapData
.map
= this.map
this.map
.on('complete', () => {this.$emit('ready', this.mapData
)this.addPoint(this.map
, this.points
)this.type
!== 'view' && this.createSearch()Object
.keys(this.editData
).length
&& this.setEditData()})if (this.type
=== 'grid') {this.initMapOpr()}this.map
.on('click', (e
) => {_this
.currentLngLat
= e
.lnglat
if (_this
.type
=== 'grid') {let item
= _this
.mapOpr
[_this
.oprIndex
]switch (item
.id
) { case 'marker': {this.mapOprClear()_this
.currentMapObj
.overlays
= _this
.drawOverlay('0')_this
.currentMapObj
.oprEditor
= new AMap.CircleEditor(_this
.map
, _this
.currentMapObj
.overlays
)_this
.currentMapObj
.oprEditor
.open()_this
.getOprData()_this
.currentMapObj
.oprEditor
.on('adjust',() => {_this
.getOprData()})this.isShowClear
= truebreak}}}if (_this
.type
=== 'choose') {_this
.map
.remove(_this
.mapData
.markers
)_this
.mapData
.markers
= []_this
.mapData
.markers
.push(new AMap.Marker({map
: _this
.map
,position
: _this
.currentLngLat
}))_this
.getAddress(e
.lnglat
.lng
, e
.lnglat
.lat
, (data
) => {this.mapData
.chooseData
= {lng
: e
.lnglat
.lng
,lat
: e
.lnglat
.lat
,address
: data
}this.$emit('getMapData', this.mapData
)})}})},initMapOpr () {let _this
= thisif (this.mapOpr
.length
) {this.currentMapObj
.mouseTool
= new AMap.MouseTool(_this
.map
)this.currentMapObj
.overlays
= []this.currentMapObj
.oprEditor
= {}this.getDistrictData()this.currentMapObj
.mouseTool
.on('draw', (e
) => {_this
.currentMapObj
.overlays
= e
.obj
let currentOpr
= _this
.mapOpr
[_this
.oprIndex
]switch (currentOpr
.key
) { case '0': _this
.currentMapObj
.oprEditor
= new AMap.CircleEditor(_this
.map
, e
.obj
); breakcase '2': {let rect
= new AMap.Rectangle({map
: _this
.map
,bounds
: e
.obj
.getBounds(),strokeColor
: _this
.styles
.strokeColor
|| '#1f86ea',fillColor
: _this
.styles
.strokeColor
|| '#1f86ea',strokeWeight
: _this
.styles
.strokeWeight
|| '2',fillOpacity
: _this
.styles
.fillOpacity
|| '0.4'})_this
.map
.remove(_this
.currentMapObj
.overlays
)_this
.currentMapObj
.overlays
= rect_this
.currentMapObj
.oprEditor
= new AMap.RectangleEditor(_this
.map
, _this
.currentMapObj
.overlays
);break}case '3': {_this
.currentMapObj
.oprEditor
= new AMap.PolyEditor(_this
.map
, _this
.currentMapObj
.overlays
); break}case '1': _this
.currentMapObj
.oprEditor
= new AMap.PolyEditor(_this
.map
, e
.obj
); breakdefault: ''}_this
.currentMapObj
.oprEditor
.open()_this
.getOprData()_this
.currentMapObj
.oprEditor
.on('adjust',() => {_this
.getOprData()})_this
.isShowClear
= true_this
.currentMapObj
.mouseTool
.close(false)})}},addPoint (map
, data
) {if (data
.length
) {data
.some((item
) => {if (item
.lng
&& item
.lat
) {let position
= new AMap.LngLat(item
.lng
, item
.lat
),icon
= this.getIcon(map
, mapIcons
[this.mapConfig
.point
.icon
]),offset
= item
.offset
? new AMap.Pixel(item
.offset
[0], item
.offset
[1]) : (this.mapConfig
.point
.offset
? new AMap.Pixel(this.mapConfig
.point
.offset
[0], this.mapConfig
.point
.offset
[1]) : new AMap.Pixel(0,0))let marker
= new AMap.Marker({position
: position
,offset
: offset
,icon
: item
.img
|| icon
,content
: item
.content
,angle
: item
.direction
- 0 - 90,topWhenClick
: true, autoRotation
: true, clickable
: true,})if(item
.label
){marker
.setLabel({offset
: new AMap.Pixel(0, 0), content
: item
.label
? (item
.label
.indexOf('<') > -1 ? item
.label
: `<div class="map-labels">${item.label}</div>`) : '',direction
: 'center' });}map
.add(marker
)this.mapData
.markers
[item
.id
] = marker
}})this.map
.setCenter(new AMap.LngLat(data
[0].lng
, data
[0].lat
))}},getIcon (map
, data
) {let icon
= new AMap.Icon({image
: data
.url
|| data
,imageOffset
: data
.offset
? new AMap.Size(data
.offset
[0], data
.offset
[1]) : new AMap.Size(0, 0),size
: data
.size
? new AMap.Size(data
.size
[0], data
.size
[1]) : new AMap.Size(80, 80)})return icon
},clearMapById (id
) {let marker
= this.mapData
.markers
[id
]marker
&& map
.remove(marker
)delete this.mapData
.markers
[id
]},createSearch () {let auto
= new AMap.Autocomplete({input
: this.mapConfig
.search
.id
})AMap
.event
.addListener(auto
, 'select', (e
) => {this.map
.panTo(e
.poi
.location
)if (this.type
=== 'choose') {this.map
.remove(this.mapData
.markers
)this.mapData
.markers
= new AMap.Marker({map
: this.map
,position
: e
.poi
.location
})this.mapData
.chooseData
= {lng
: e
.poi
.location
.lng
,lat
: e
.poi
.location
.lat
,address
: e
.poi
.district
+ e
.poi
.address
}this.$emit('getMapData', this.mapData
)}})},toDraw (item
, index
) {this.oprIndex
= index
this.overlayClear()let color
= this.styles
.strokeColor
|| '#1f86ea',weight
= this.styles
.strokeWeight
|| '2'switch (item
.id
) { case 'district': {this.isShowDistrict
= truebreak}case 'circle': {this.currentMapObj
.mouseTool
.circle({strokeColor
: color
,strokeWeight
: weight
})break}case 'rectangle': {this.currentMapObj
.mouseTool
.rectangle({strokeColor
: color
,strokeWeight
: weight
})break}case 'polygon': {this.currentMapObj
.mouseTool
.polygon({strokeColor
: color
,strokeWeight
: weight
})break}case 'custom': {this.currentMapObj
.mouseTool
.polyline({strokeColor
: color
,strokeWeight
: weight
})break}default: ''}},drawOverlay (type
, data
) {let drawObj
= {},lngLat
= [],params
= {}params
.map
= this.mapparams
.strokeColor
= this.styles
.strokeColor
|| '#1f86ea'params
.fillColor
= this.styles
.strokeColor
|| '#1f86ea'params
.strokeWeight
= this.styles
.strokeWeight
|| '2'params
.fillOpacity
= this.styles
.fillOpacity
|| '0.4'data
= data
|| {}if (type
!== '0') {data
.lngLat
.split(';').some(function (item
, index
) {lngLat
[index
] = new AMap.LngLat(item
.split(',')[0], item
.split(',')[1])})}switch (type
) {case '0': { lngLat
= data
.circle
? new AMap.LngLat(data
.circle
.split(',')[0], data
.circle
.split(',')[1]) : this.currentLngLatparams
.center
= lngLatparams
.radius
= data
.radius
|| 800drawObj
= new AMap.Circle(params
)break}case '2': { params
.bounds
= new AMap.Bounds(lngLat
[0],lngLat
[1])drawObj
= new AMap.Rectangle(params
)break}case '3': { params
.path
= lngLatdrawObj
= new AMap.Polygon(params
)break}case '1': { params
.path
= lngLatdrawObj
= new AMap.Polyline(params
)break}default: ''}return drawObj
},drawDistrict (bounds
) {let color
= this.styles
.strokeColor
|| '#1f86ea',weight
= this.styles
.strokeWeight
|| '2',data
= [],_this
= thisif (bounds
.length
) {let polygon
= new AMap.Polygon({map
: _this
.map
,strokeWeight
: weight
,path
: bounds
,fillOpacity
: 0.2,fillColor
: color
,strokeColor
: color
});let point
= polygon
.getPath()let arr
= []if (point
.length
) {point
.some((item
, index
) => {arr
[index
] = item
.lng
+ ',' + item
.lat
})}data
.push(arr
.join(';'))_this
.map
.setFitView(polygon
)_this
.currentMapObj
.overlays
= polygon
this.isShowClear
= true_this
.mapData
.gridOpr
= {areaType
: '4',lngLat
: data
.join(';')}this.$emit('getMapData', this.mapData
)}},mapReset () {this.overlayClear()this.oprIndex
= 0},overlayClear () {this.currentMapObj
.overlays
&& Object
.keys(this.currentMapObj
.overlays
).length
&& this.mapData
.map
.remove(this.currentMapObj
.overlays
)this.currentMapObj
.overlays
= {}if (this.currentMapObj
.oprEditor
&& Object
.keys(this.currentMapObj
.oprEditor
).length
) {this.currentMapObj
.oprEditor
.close()}this.currentMapObj
.oprEditor
= {}},mapOprClear () {if (this.type
=== 'grid') {this.overlayClear()this.isShowClear
= falsethis.mapOpr
.length
&& this.toDraw(this.mapOpr
[this.oprIndex
], this.oprIndex
)} else {this.placeSearch
= ''}},getOprData () {let current
= this.mapOpr
[this.oprIndex
]let data
= {}, center
= {}switch (current
.key
) {case '5': { center
= this.currentMapObj
.overlays
.getCenter()data
.circle
= center
.lng
+ ',' + center
.latdata
.radius
= parseInt(this.currentMapObj
.overlays
.getRadius())break}case '0': { center
= this.currentMapObj
.overlays
.getCenter()data
.circle
= center
.lng
+ ',' + center
.latdata
.radius
= parseInt(this.currentMapObj
.overlays
.getRadius())break}case '2': { center
= this.currentMapObj
.overlays
.getBounds()data
.lngLat
= (center
.northeast
.lng
).toFixed(6) + ',' + (center
.northeast
.lat
).toFixed(6) + ';' + (center
.southwest
.lng
).toFixed(6) + ',' + (center
.southwest
.lat
).toFixed(6)break}case '3': { let point
= this.currentMapObj
.overlays
.getPath()let arr
= []if (point
.length
) {point
.some((item
, index
) => {arr
[index
] = item
.lng
+ ',' + item
.lat
})}data
.lngLat
= arr
.join(';')break}case '1': { let point
= this.currentMapObj
.overlays
.getPath()let arr
= []if (point
.length
) {point
.some((item
, index
) => {arr
[index
] = item
.lng
+ ',' + item
.lat
})}data
.lngLat
= arr
.join(';')break}default: ''}data
.areaType
= current
.key
this.mapData
.gridOpr
= data
this.$emit('getMapData', this.mapData
)},getDistrictData () {axios({url
: `https://restapi.amap.com/v3/config/district?key=${defaultSet.mapKey}&adcode=100000&keywords=$`,dataType
: 'jsonp',timeout
: 6000,}).then((res
) => {if (res
.data
.status
=== '1') {this.treeData
= res
.data
.districts
[0].districts
}})},toCancel () {this.isShowDistrict
= false},toConfirm () { let _this
= thislet district
= new AMap.DistrictSearch({subdistrict
: 0, extensions
: 'all', level
: 'province' })district
.search(this.adcode
, (status
, result
) => {this.map
.remove(_this
.currentMapObj
.overlays
)if (status
=== 'complete') {let bounds
= result
.districtList
[0].boundaries
,bound
= [],maxLen
= 0bounds
.some((item
) => {if (item
.length
> maxLen
) bound
= item
})if (bound
.length
) {this.drawDistrict(bound
)}}})this.isShowDistrict
= false},toChooseTree (selectedKeys
) {this.adcode
= selectedKeys
[0]},getAddress (lng
, lat
, callback
) {if (!lng
&& !lat
) return falseaxios({url
: `https://restapi.amap.com/v3/geocode/regeo?key=${defaultSet.mapKey}&location=${lng},${lat}&output=JSON`,dataType
: 'jsonp',timeout
: 6000,}).then((res
) => {if (res
.data
.status
=== '1') {let address
= res
.data
.regeocode
.formatted_addresscallback
&& callback(address
)}})},setEditData () { let _this
= thisif (this.type
=== 'grid') {let tempPoint
= this.editData
['lngLat'] || this.editData
['circle']let center
= tempPoint
.indexOf(';') > -1 ? tempPoint
.split(';') : [tempPoint
]_this
.map
.setCenter(new AMap.LngLat(center
[0].split(',')[0], center
[0].split(',')[1]))let oprArr
= this.gridOpr
[this.editData
.fenceType
]if (oprArr
&& oprArr
.length
) {let key
= this.editData
.areaTypeoprArr
.some((item
, index
) => {if (item
.key
=== key
) {this.oprIndex
= index
}})if (key
=== '4') {if (this.editData
.lngLat
) {let temp
= this.editData
.lngLat
.indexOf(';') > -1 ? this.editData
.lngLat
.split(';') : [this.editData
.lngLat
],bounds
= []_this
.map
.setCenter(new AMap.LngLat(temp
[0].split(',')[0], temp
[0].split(',')[1]))temp
.some((item
, index
) => {bounds
[index
] = new AMap.LngLat(item
.split(',')[0], item
.split(',')[1])})this.drawDistrict(bounds
)}} else {let type
= key
if (key
=== '5') {type
= key
}this.currentMapObj
.overlays
= this.drawOverlay(type
, this.editData
)switch (key
) {case '0': _this
.currentMapObj
.oprEditor
= new AMap.CircleEditor(_this
.map
, _this
.currentMapObj
.overlays
); breakcase '2': {this.currentMapObj
.oprEditor
= new AMap.RectangleEditor(_this
.map
, this.currentMapObj
.overlays
);break}case '3': this.currentMapObj
.oprEditor
= new AMap.PolyEditor(_this
.map
, this.currentMapObj
.overlays
); breakcase '1': this.currentMapObj
.oprEditor
= new AMap.PolyEditor(_this
.map
, this.currentMapObj
.overlays
); breakcase '5': _this
.currentMapObj
.oprEditor
= new AMap.CircleEditor(_this
.map
, _this
.currentMapObj
.overlays
)default: ''}_this
.currentMapObj
.oprEditor
.open()_this
.getOprData()_this
.currentMapObj
.oprEditor
.on('adjust',() => {_this
.getOprData()})this.isShowClear
= true}}} else if (this.type
=== 'choose' || this.type
=== 'view') {if (this.editData
.lngLat
) {this.mapData
.markers
= []this.mapData
.markers
.push(new AMap.Marker({map
: this.map
,position
: new AMap.LngLat(this.editData
.lngLat
.split(',')[0], this.editData
.lngLat
.split(',')[1])}))this.map
.setFitView()}}},setOverlayOpt (opt
) {let options
= {strokeColor
: opt
.strokeColor
,strokeWeight
: opt
.strokeWeight
,fillColor
: opt
.strokeColor
}Object
.keys(options
).forEach((key
) => {if (!options
[key
]) delete options
[key
]})this.currentMapObj
.overlays
&& Object
.keys(this.currentMapObj
.overlays
).length
&& this.currentMapObj
.overlays
.setOptions(options
)}},watch
: {points () {if (!this.map
) returnthis.addPoint(this.map
, this.points
)},mapData
: {handler
: function (val
) {this.$emit('getMapData', val
)},immediate
: true},gridType (val
) {if (val
.toString()) {this.mapOpr
= this.gridOpr
[val
]this.mapOpr
.length
&& this.toDraw(this.mapOpr
[this.oprIndex
], this.oprIndex
)}}}}
</script
>
<style lang
="scss" scoped
>
$base
: 16;
$NumberFont
: 'DINPro';
.map
-wrapper
{width
: 1000px
;height
: 500px
;position
: relative
;*{margin
: 0;padding
: 0;}.map
-top
{height
: 36px
;position
: absolute
;top
: $base
* 2;left
: $base
* 2;z
-index
: 200;display
: flex
;.map
-search
{width
: 300px
;height
: 100%;text
-indent
: $base
;}.map
-operate
{display
: flex
;height
: 100%;align
-items
: center
;background
: #fff
;box
-shadow
: 0 2px
1px
0 rgba(31,132,235,0.2);margin
-left
: $base
* 2;padding
: 0 $base
;box
-sizing
: border
-box
;li
{cursor
: pointer
;padding
: 0 $base
;&.active
{color
: #
0079fe
;}}}.clear
{display
: flex
;align
-items
: center
;height
: 100%;color
: #
0079fe
;text
-decoration
: underline
;background
: #fff
;text
-align
: center
;margin
-left
: $base
;padding
: 0 $base
;box
-shadow
: 0 2px
1px
0 rgba(31,132,235,0.2);cursor
: pointer
;}}.map
-cnt
{width
: 100%;height
: 100%;}.amap
-marker
-label
{border
: 0;background
: none
;}.map
-labels
{width
: 70px
;color
: #fff
;text
-align
: center
;h3
{color
: #fff
;margin
-bottom
: $base
;font
-size
: 24px
;font
-family
: $NumberFont
;em
{font
-size
: 12px
;}}p
{width
: 50px
;white
-space
: nowrap
;text
-overflow
: ellipsis
;overflow
: hidden
;margin
: 0 auto
;}}
}
.districtModal
{.ant
-modal
-body
{height
: 300px
;overflow
-y
: auto
;padding
: 0 $base
* 3;}.ant
-tree
-title
{font
-size
: 12px
;}
}
</style
>
總結(jié)
以上是生活随笔為你收集整理的vue使用高德地图的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯,歡迎將生活随笔推薦給好友。