123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145 |
- <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: [
- // {
- // latitude: 34.211901, // 雁塔区
- // longitude: 108.995039,
- // width: '60rpx',
- // height: '60rpx',
- // iconPath: '/static/store.png',
- // label: {
- // content: '文本111',
- // bgColor: '#fff'
- // }
- // }, {
- // latitude: 34.296789,
- // longitude: 108.971456,
- // width: '60rpx',
- // height: '60rpx',
- // iconPath: '/static/store.png',
- // label: {content:'文本1', bgColor: '#fff'}
- // }, {
- // latitude: 34.293145, // 未央区政府
- // longitude: 108.946715,
- // width: '60rpx',
- // height: '60rpx',
- // iconPath: '/static/store-s.png',
- // label: {
- // content: '文本111',
- // bgColor: '#fff'
- // }
- // }, {
- // latitude: 34.313445, // 灞桥区
- // longitude: 109.018233,
- // width: '60rpx',
- // height: '60rpx',
- // iconPath: '/static/store.png',
- // label: {
- // content: '文本111',
- // bgColor: '#fff'
- // }
- // }
- ],
- 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() // 获取个人待清运清单
- // _this.onPolyline()
- }
- })
- },
- //
- 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>
|