微信小程序地图展示

1、wxml

<view>
    <!-- 这是地图部分 -->
    <view class="map_container">
        <map class='map' longitude='{{longitude}}' latitude='{{latitude}}' scale='{{scale}}' markers='{{markers}}' controls="{{controls}}" bindcontroltap="bindcontroltap" polyline='{{polyline}}' circles="{{circles}}" bindmarkertap='bindmarkertap' bindcontroltap='bindcontroltap'show-location></map>
    </view>
            
    <!-- 以下是导航部分 -->
    <view class='list-guide'>
        <!-- 这里的坐标本应该是从服务器获取数据的,这时丈先写死在页面上了 -->
        <view bindtap="onGuideTap" data-latitude='39.92392' data-longitude='116.411885' data-bankName='最高人民检察院'>
            <image src='/images/banklist/daohang.png' class='list-guide-imgae'></image>
            <text class='list-guide-text'>导航</text>
        </view>
        <view bindtap='onbankTap' data-bankId="{{item.BANK_ID}}">
            <image src='/images/banklist/xiangqing.png' class='list-guide-imgae'></image>
            <text class='list-guide-text'>详情</text>
        </view>
    </view>
</view>

2、JS

    /**
     * 页面的初始数据
     */
    data: {
        addmissage: '选的位置',
        // markers	 Array	标记点
        stitle:'故宫',
        latitude: "",
        longitude: "",
        scale: 14,
        markers: [],
        //controls控件 是左下角圆圈小图标,用户无论放大多少,点这里可以立刻回到当前定位(控件（更新一下,即将废弃，建议使用 cover-view 代替）)
        controls: [{
            id: 1,
            iconPath: '../../images/img/controls.png',
            position: {
                left: 15,
                top: 260 - 50,
                width: 40,
                height: 40
            },
            clickable: true
        }],
        distanceArr: []
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var that = this
        //获取当前的地理位置、速度
        wx.getLocation({
            type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
            success: function (res) {
                //赋值经纬度
                that.setData({
                    latitude: res.latitude,
                    longitude: res.longitude,
                })
            }
        })
    },

3、wxss

.map_container {
  height: 260px;
  width: 100%;
}
.map {
  height: 100%;
  width: 100%;
}
.list-guide{
  display: flex;  
  flex-direction: row; 
  justify-content:space-around;
  border-top: 1px solid #ededed;
  height: 80rpx;
}
.list-guide-imgae{
  height: 70rpx;
  width: 70rpx;
  margin-right: 20px;
  vertical-align: middle;
}
.list-guide-text{
  vertical-align: middle;
  line-height: 90rpx;
  font-size: 35rpx;
}

4、此时运行还是会报错，需要在app.js中加入一下内容

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }

5、看一下效果