微信小程序地图导航

微信小程序地图导航

1.在.wxml文件中需要位置创建map组件、导航按钮或图标

<map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}"></map>
<view class="address-wrap">
  <view class='address-desc'>
    <text>河南XXXX有限公司</text>
    <text class='ftgrey'>河南-郑州-二七区</text>
  </view>
  <view 
class='address-point'>
    <image src="../../image/icon-fujin.png" bindtap="bindMap"></image>
</view>
</view>

2.js

//导入图片自适应
//var WxAutoImage = require("js/wxAutoImageCal.js");
var app = getApp();
Page({
  data: {
    //目标经纬度
    latitude: 34.754316,
    longitude: 113.677484,
    speed: 0,//速度 
    accuracy: 16,//位置精准度 
    markers: [{
      latitude: 34.754316,
      longitude: 113.677484,
    }]
  },
  bindMap: function (e) {
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success: function(res) {
        var latitude = res.latitude
        var longitude = res.longitude
        wx.openLocation({
          latitude: latitude,
          longitude: longitude,
          name: "河南特XXXX公司",
          scale: 28
        })
      }
    })
  },
  onLoad: function(){
  }
})

3.css

map{
  width: 100%;
  height:630px;
}
.address-wrap{
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 3%;
  background-color: #f7f7f7;
  border-bottom: 1px solid #e2e2e2;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
}
.address-desc{
  font-size: 14px;
  flex: 1;
  align-self: center;
}
text{
  width: 100%;
  display: inline-block;
}
.address-point{
  width: 

24px;
  height: 24px;
  margin-left:10px; 
}
image{
  width: 24px;
  height: 24px;
}