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

map组件

效果图

wxml


  
      工作机会
      
        {{address}}
        
      
  

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;
}

你可能感兴趣的:(微信小程序中展示map及导航组件)