map組件

效果圖

wxml

<map id="mapId" class="map" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" enable-zoom="{{false}}" enable-scroll="{{false}}" bindcallouttap="onCalloutTap">
  <cover-view class="address-box" marker-id="1" slot="callout" >
      <cover-view class="address-title">工作機會</cover-view>
      <cover-view class="address-content">
        <cover-view class="text">{{address}}</cover-view>
        <cover-image  class="enter" src="./img/enter.png"></cover-image>
      </cover-view>
  </cover-view>
</map>

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