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">工作機(jī)會(huì)</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,//經(jīng)度
    name:'某某城市某某某某街道',//地址名稱，顯示在導(dǎo)航里面
    address:'某某城市某某某某街道某某城市某某某某街道某某城市某某某某街道某某城市某某某某街道',//詳細(xì)地址，顯示在導(dǎo)航里面
    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
      //導(dǎo)航
      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;
}