写一份微信小程序 地图的代码 显示自己的位置

以下是一个简单的微信小程序地图的代码示例，展示当前用户的位置：

<!--index.wxml-->
<view class="container">
  <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" style="width: 100%; height: 300px;"></map>
</view>

//index.js
Page({
  data: {
    longitude: 0,
    latitude: 0,
    markers: []
  },
  onLoad: function () {
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        this.setData({
          longitude: res.longitude,
          latitude: res.latitude,
          markers: [{
            id: 1,
            longitude: res.longitude,
            latitude: res.latitude,
            iconPath: '/images/location.png',
            width: 20,
            height: 20
          }]
        })
      }
    })
  }
})

/*index.wxss*/
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

map {
  border: 1px solid #ccc;
}

以上代码实现了在小程序中显示一个地图，并在地图上展示当前用户的位置。用户可以通过手势缩放地图来查看周围地理位置信息。

在JavaScript代码中，`Page`函数用于注册一个页面。`data`属性是一个对象，用于存储页面的数据。在此例中，`data`对象包含了三个属性：

- `longitude`：地图中心点的经度，初始化为0。
- `latitude`：地图中心点的纬度，初始化为0。
- `markers`：展示在地图上的标记点数组，初始化为空数组。

在`onLoad`生命周期函数中，使用`wx.getLocation` API获取当前用户的位置信息。`type`属性指定了返回位置信息的坐标系类型，这里使用`gcj02`，表示返回的位置信息是国测局加密坐标系。获取到位置信息后，将地图中心点的经度、纬度和标记点数组更新为当前用户的位置信息。

在CSS代码中，`.container`选择器设置了容器的样式，使其在页面中居中显示。`map`选择器设置了地图的边框。同时，为了在地图上展示标记点，需要准备一张icon图标，这里使用的是`/images/location.png`。