我们现在的需求是，显示用户在地图上所处的位置。
有的小伙伴可能会说，这个是不是需要接入第三方的地图。
其实是不需要的，从目前这个需求来看。
我们只需要引入uni-app提供的内置组件 map 。
然后设置经纬度以及缩放大小就行
下面我们就来简单的演示一下

<template>
    <view>
        <view class="page-body">
            <view class="page-map-box">
                <map style="width: 750rpx; height: 600rpx;" 
                  :latitude="latitude" 
                  :longitude="longitude" 
                  :scale="scale"></map>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data(){
        return {
            msg:'12',
            latitude: 30.572269, //纬度
            longitude: 104.066541, //经度
            scale: 14, //地图缩放程度
        }
    }
}
</script>
<style scoped>
</style>

第1点：<map> 组件的宽/高推荐写直接量，比如：750rpx，不要设置百分比值。
我尝试过写百分比也是可以正常显示的。
在写百分比的时候注意父盒子的宽高，如果父盒子没有设置宽高，会导致地图显示不出来。
既然官方说了不要写百分比咋们就不要写了。
第2点：谷歌地图使用 wgs84 坐标，其他地图使用 gcj02 坐标，用错坐标类型会显示偏移。

如果要显示用户当前所在位置。
我们需要借助一个api来获取。
uni.getLocation(options)获取当前的地理位置、速度
在获取之前，我们需要配置一下。
在HBuilder中的 uniapp项目下点击配置文件manifest.json。
选择微信小程序。填写【位置接口】描述。
或者在unpackage/dist/dev/mp-weixin/app.json中加入如下配置。
配置好后，在小程序的开发工具中看是否被正确编译了。
因为有些时候会出现丢死，此时需要再次重新写入

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "permission": {
    "scope.userLocation": {
      //描述一下你需要这个接口的原因，这个是必须的要写的。
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
 // 你调用的方法，这个也是必须的，否者会出现调用失败
 "requiredPrivateInfos": ["getLocation", "chooseLocation"],
  "usingComponents": {}
}

<template>
  <view>
    <view class="page-body">
      <view class="page-map-box">
        <map style="width: 750rpx; height: 600rpx;" 
          :latitude="latitude" 
          :longitude="longitude" 
          :scale="scale"></map>
      </view>
      <view class="btn-position">
       <button type="default" @tap="getLocationTap">获取定位</button>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data(){
    return {
      latitude:'' , //纬度
      longitude: '', //经度
      scale: 14, //地图缩放程度
    }
  },
  methods:{
    getLocationTap(){
      let that=this;
      uni.getLocation({ 
        type: 'gcj02', 
        success: function (res) { 
          console.log('经度：' + res.longitude);
          console.log('纬度：' + res.latitude); 
          that.latitude = res.latitude
          that.longitude= res.longitude
        }, 
        fail: function (res) { 
          console.log('获取位置信息失败', res); 
        } 
      })
    }
  }
}
</script>
<style scoped>
  .page-map-box{
    width: 750rpx; height: 600rpx;
  }
  .btn-position{
    margin-top: 10rpx;
  }
</style>

如果要标记当前的这个点，需要我们借助markers属性。
它接受一个数组，这个数组就是要标记的点。
其中id需要传递，否者会有提示信息。
iconPath是标记的图标地址。可以去阿里矢量图标库中下载一个图片。
width,height是这个图标的大小。
latitude,longitude是经纬度

<template>
<view>
    <view class="page-body">
        <view class="page-map-box">
            <map style="width: 750rpx; height: 600rpx;" 
              :latitude="latitude" 
              :longitude="longitude" 
              :scale="scale"
              :markers="markers"
             ></map>
        </view>
      <view class="btn-position">
         <button type="default" @tap="getLocationTap">获取定位</button>
      </view>
    </view>
</view>
</template>
<script>
export default {
    data(){
        return {
            latitude: '',
            longitude: '',
            scale: 14, // 设置地图的缩放级别
            markers: [ // 设置标记点
                {  
                    id:1001,
                    width:50,
                    height:50,
                    latitude: this.latitude*1,
                    longitude: this.longitude*1,
                    iconPath: '../../static/weizhi.png',
                },
           ],
        }
    },
    methods:{
        getLocationTap(){
        let that=this;
        uni.getLocation({ 
          type: 'gcj02', 
          success: function (res) { 
            console.log('经度：' + res.longitude);
            console.log('纬度：' + res.latitude); 
            that.latitude = res.latitude
            that.longitude= res.longitude
          }, 
          fail: function (res) { 
            console.log('获取位置信息失败', res); 
          } 
        })
        }
    }
}
</script>
<style scoped>
  .page-map-box{
    width: 750rpx; height: 600rpx;
  }
  .btn-position{
    margin-top: 10rpx;
  }
</style>