Android地图组件

深渊向深渊呼唤

使用markers属性标注起点和终点,标注用的图标、起始点、终点不限定,起点和终点之间用polyline属性画出连接线,连接线的样式不限定。

Android地图组件

<!--index.js-->
//获取应用实例
const app = getApp()

Page({
  data: {
    longitude: 115.831258
    ,
    latitude: 28.650936,

    markers: [{
      id: 0,
      latitude: 28.650936,
      longitude: 115.831258,
      callout: {
        content: "这里是出发点",
        padding: 5,
        display: 'ALWAYS',
        textAlign: 'center',
      },
      width: 1,
      height: 1,
      name:'yzt1'
      
    },
    {
      id: 1,
      latitude: 28.653599,
      longitude: 115.831078,
      callout: {
        content: "这里是终止点",
        padding: 5,
        display: 'ALWAYS',
        textAlign: 'center',
      },
      width: 1,
      height: 1,
     name:'yzt2'
    },
    ],

    polyline: [{
      points: [{
        longitude: 115.831258,
        latitude: 28.650936
      }, {
        longitude: 115.831078,
        latitude: 28.653599
      }],
      color: "#FF0000DD",
      width: 2,
      dottedLine: true
    }]
  },
  //事件处理函数
  bindViewTap: function () {

  },
  onLoad: function () {
    var that = this
    wx.showLoading({
      title: "定位中",
      mask: true
    })
    wx.getLocation({
      type: 'gcj02',
      altitude: true,//高精度定位
      //定位成功,更新定位结果
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy

        that.setData({
          longitude: longitude,
          latitude: latitude,
          speed: speed,
          accuracy: accuracy
        })
      },
      //定位失败回调
      fail: function () {
        wx.showToast({
          title: "定位失败",
          icon: "none"
        })
      },

      complete: function () {
        //隐藏定位中信息进度
        wx.hideLoading()
      }

    })
  },
})

<!--index.wxml-->
<view >
  <map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}" show-location bindmarkertap="selectMarket" include-points="{{markers}}" polyline="{{polyline}}">
    
  </map>
</view>

<!--index.json-->
{
  "navigationBarTitleText": "南昌航空大学",
  "usingComponents": {}
}


<!--index.wxss-->
page {
  height: 100%;
}
 
.view {
  width: 100%;
  height: 100%;
}
 
map {
  width: 100%;
  height: 100%;
  background-color: red;
}

运行结果:截图显示起始点和终止点分别做了标记,起点和终点用红色的虚线连接。
Android地图组件

栏目