高德地圖小程序SDK新增功能：繪制靜態(tài)圖

發(fā)布時(shí)間：2018-04-13 14:32 所屬欄目：小程序開發(fā)教程

功能增加時(shí)間：2月17日

運(yùn)用靜態(tài)地圖功能，可快速生成一張地圖圖片，可以指定顯示的地圖區(qū)域、圖片大小、以及在地圖上添加覆蓋物，如標(biāo)簽、標(biāo)注、折線、多邊形。可用于快速生成一張個(gè)性化涂鴉的靜態(tài)地圖用于查看和分享。

靜態(tài)圖上繪制點(diǎn)

1、在頁面的 js 文件中，實(shí)例化 AMapWX 對(duì)象，請(qǐng)求顯示靜態(tài)地圖。

首先，引入 amap-wx.js 文件。

JavaScript

var amapFile = require('path/to/amap-wx.js');//如：../../libs/amap-wx.js

然后，構(gòu)造 AMapWX 對(duì)象，并調(diào)用 getStaticmap 方法。

其中，

JavaScript

Page({
  data: {
    src: ''
  },
  onLoad: function() {
    var that = this;
    var myAmapFun = new amapFile.AMapWX({key:"您的Key"});
    wx.getSystemInfo({
      success: function(data){
        var height = data.windowHeight;
        var width = data.windowWidth;
        var size = width + "*" + height;
        myAmapFun.getStaticmap({
          zoom: 8,
          size: size,
          scale: 2,
          markers: "mid,0xFF0000,A:116.37359,39.92437;116.47359,39.92437",
          success: function(data){
            that.setData({
              src: data.url
            })
          },
          fail: function(info){
            wx.showModal({title:info.errMsg})
          }
        })

      }
    })
    
  }
})

2、編寫頁面的 wxml 文件，搭建頁面結(jié)構(gòu)。

HTML

<view class="img_box">
  <img src="{{src}}">
</view>

3、編寫頁面的 wxss 文件，設(shè)置頁面樣式。

CSS

.img_box{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.img_box image{
  width: 100%;
  height: 100%;
}
……

運(yùn)行程序，效果如下：

其余繪制

繪制線段

向 getStaticmap 方法中傳 paths 字段繪制線段，如果使用 paths 繪制線段，則不可再繪制區(qū)域。

JavaScript

myAmapFun.getStaticmap({
  zoom: 8,
  size: size,
  scale: 2,
  paths: "10,0x0000ff,1,,:116.31604,39.96491;116.320816,39.966606;
  116.321785,39.966827;116.32361,39.966957",
  success: function(data){
    that.setData({
      src: data.url
    })
  },
  fail: function(info){
     wx.showModal({title:info.errMsg})
  }
})

繪制區(qū)域

向 getStaticmap 方法中傳 paths 字段繪制區(qū)域，如果使用 paths 繪制區(qū)域，則不可再繪制線段。

JavaScript

myAmapFun.getStaticmap({
  zoom: 8,
  size: size,
  scale: 2,
  paths: "10,0x0000ff,0.1,0x0000ff,0.7:116.31604,39.96491;116.320816,39.966606;
  116.321785,39.966827;116.32361,39.966957;116.39361,39.966957;116.39361,39.936957",
  success: function(data){
    that.setData({
      src: data.url
    })
  },
  fail: function(info){
    wx.showModal({title:info.errMsg})
  }
})

繪制標(biāo)簽

向 getStaticmap 方法中傳 labels 字段可以繪制標(biāo)簽：

JavaScript

myAmapFun.getStaticmap({
  zoom: 8,
  size: size,
  scale: 2,
  labels: "朝陽公園,2,0,16,0xFFFFFF,0x008000:116.48482,39.94858",
  success: function(data){
    that.setData({
      src: data.url
    })
  },
  fail: function(info){
    wx.showModal({title:info.errMsg})
  }
})