支付宝小程序map地图

我这里使用的mpvue去开发的支付宝小程序，这里记录下使用map地图的过程

<map
      id="map"
      :longitude="lon"
      :latitude="lat"
      :polyline="polyline"
      :markers="markers"
      class="map"
    >
</map>

首先polyline路线
在data中

polyline: [
        {
          points: [
            {latitude: 40.038540, longitude: 116.272389},
            {latitude: 40.041407, longitude: 116.274738}
          ],
          color: "#003355",
          width: 5,
          dottedLine: false,
        },
      ],

这个没什么问题，经纬度在写的时候注意下就好了
如果打开没有显示路线说明初始经纬度不在polyline范围中

接下来 markers 标点

markers: [
        {
          id: 1,
          latitude:'' ,
          longitude: '',
          width: 30,
          height: 50,
          iconPath: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=862691749,1690286630&fm=26&gp=0.jpg",
        },
        {
          id: 2,
          latitude:'' ,
          longitude: '',
          width: 19,
          height: 31,
          iconPath: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2609580352,4233204507&fm=26&gp=0.jpg",
        },
        {
          id: 3,
          latitude:'' ,
          longitude: '',
          width: 19,
          height: 31,
          iconPath: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3064920752,1494594665&fm=26&gp=0.jpg",
          callout: {
                content: "报警位置",
            },
        }
      ],

之前 iconPath 图片我使用的../相对路径 标点图片没有显示但是官方说明
项目目录下的图片路径，不能用相对路径只能用 / 开头的绝对路径。
示例：/pages/image/test.jpg
然后我去使用 / 绝对路径，结果还是不显示，
最后把图片换成url形式可以解决

my.chooseLocation({})打开地图选择位置
success：返回值

name String 位置名称。

address String 详细地址。

latitude Number 纬度，浮点数，范围为-90~90，负数表示南纬。

longitude Number 经度，浮点数，范围为-180~180，负数表示西经。

my.openLocation({})打开小程序内置地图（可跳转至第三方高德地图App）

 my.openLocation({
      longitude: this.data.longitude, // 经度
      latitude: this.data.latitude, //纬度
      name: this.data.name, // 位置名称
      address: this.data.address, //详细地址
    })

以上预览请到真机调试去看~