微信小程序中展示map及导航组件

map组件

效果图

wxml

js

Component({
  properties: {

  },
  data: {
    latitude: 23.099994,//纬度
    longitude: 113.324520,//经度
    name:'某某城市某某某某街道',//地址名称，显示在导航里面
    address:'某某城市某某某某街道某某城市某某某某街道某某城市某某某某街道某某城市某某某某街道',//详细地址，显示在导航里面
    markers:[{
      id:1,
      width:10,
      height:20,
      latitude: 23.099994 - 0.00132,//marker偏移到地图中心
      longitude: 113.324520,
      customCallout:{
        display:'ALWAYS'
      }
    }],
  },
  methods: {
    onCalloutTap(){
      let {name,address,latitude,longitude} = this.data
      //导航
      wx.openLocation({
        name,
        address,
        latitude,
        longitude,
        scale: 18
      })
    }
  }
})

wxss

.map {
  width: 100%;
  height: 290rpx;
}
.map .address-box {
  background-color: #fff;
  padding: 20rpx;
  width: 562rpx;
  height: 142rpx;
  border-radius: 20rpx;
}
.address-title {
  margin-bottom: 10rpx;
  font-size: 30rpx;
}
.address-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.address-content .text {
  margin-right: 40rpx;
  flex: 1;
  font-size: 30rpx;
  color: #666;
  word-break: break-all;
  word-wrap:break-word;
  white-space:pre-line;
}
.map .address-box .enter {
  width: 22rpx;
  height: 28rpx;
}