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