123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- <template>
- <view class="map-container">
- <map
- id="map"
- :latitude="latitude"
- :longitude="longitude"
- scale="12"
- show-compass
- show-location
- :markers="covers"
- :polyline="polyline"
- style="width: 100%; height:100%;">
- </map>
- </view>
- </template>
- <script>
- export default{
- data(){
- return{
- latitude: null, // 纬度
- longitude: null, // 经度
- covers: [
- {
- latitude: 34.211901, // 雁塔区
- longitude: 108.995039,
- width: '72rpx',
- height: '72rpx',
- title: '21',
- iconPath: '/static/logo.jpg'
- }, {
- latitude: 34.296789,
- longitude: 108.971456,
- width: '72rpx',
- height: '72rpx',
- title: '22',
- label: {content:'文本1', color: '#ff0000'},
- iconPath: '/static/logo.jpg'
- }, {
- latitude: 34.293145, // 未央区政府
- longitude: 108.946715,
- width: '72rpx',
- height: '72rpx',
- title: '23',
- iconPath: '/static/logo.jpg'
- }, {
- latitude: 34.313445, // 灞桥区
- longitude: 109.018233,
- width: '72rpx',
- height: '72rpx',
- title: '24',
- iconPath: '/static/logo.jpg'
- }
- ],
- 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.onPolyline()
- }
- })
- },
- // 连线
- onPolyline(){
- const _this = this
- // 连线需至少两个点
- if(_this.covers.length>0){
- _this.polyline = []
- _this.covers.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.covers[index-1].latitude
- _this.polyline[index].points[0].longitude = _this.covers[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>
|