123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- <template>
- <view class="map-container">
- <map
- id="map"
- :latitude="latitude"
- :longitude="longitude"
- scale="12"
- show-compass
- show-location
- :markers="markers"
- :polyline="polyline"
- style="width: 100%; height:100%;">
- </map>
- </view>
- </template>
- <script>
- import { getCleanWay } from '@/api/unclear.js'
- export default{
- data(){
- return{
- latitude: null, // 纬度
- longitude: null, // 经度
- markers: [],
- polyline: null // 路线
- }
- },
- onShow() {
- this.getLocation()
- },
- methods: {
- // 获取当前位置
- getLocation(){
- const _this = this
- uni.getLocation({
- type: 'gcj02',
- success: function (res) {
- console.log(res.latitude,res.longitude)
- _this.latitude = res.latitude // 纬度
- _this.longitude = res.longitude // 经度
- _this.getCleanWay() // 获取个人待清运清单
- }
- })
- },
- //
- getCleanWay(){
- getCleanWay({ lng: this.longitude, lat: this.latitude }).then(res => {
- if(res.status == 200){
- this.markers = []
- res.data.map(item => {
- this.markers.push({
- latitude: item.lat,
- longitude: item.lng,
- width: '60rpx',
- height: '60rpx',
- iconPath: '/static/store.png',
- label: {
- content: item.stationName || '--',
- bgColor: '#fff',
- }
- })
- })
- this.onPolyline()
- }
- })
- },
- // 连线
- onPolyline(){
- const _this = this
- // 连线需至少两个点
- if(_this.markers.length>0){
- _this.polyline = []
- _this.markers.map((item,index) => {
- _this.polyline.push({
- points: [
- {latitude: null, longitude: null},
- {latitude: null, longitude: null}
- ],
- width: 4,
- color: '#'+(~~(Math.random()*(1<<24))).toString(16)
- })
- if(index==0){
- _this.polyline[index].points[0].latitude = _this.latitude
- _this.polyline[index].points[0].longitude = _this.longitude
- _this.polyline[index].points[1].latitude = item.latitude
- _this.polyline[index].points[1].longitude = item.longitude
- }else{
- _this.polyline[index].points[0].latitude = _this.markers[index-1].latitude
- _this.polyline[index].points[0].longitude = _this.markers[index-1].longitude
- _this.polyline[index].points[1].latitude = item.latitude
- _this.polyline[index].points[1].longitude = item.longitude
- }
- })
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .map-container {
- width: 100%;
- height: 100vh;
- }
- </style>
|