技術標籤：支付寶小程式地圖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, //詳細地址
    })

以上預覽請到真機除錯去看~