功能增加時(shí)間:2月17日
運(yùn)用靜態(tài)地圖功能,可快速生成一張地圖圖片,可以指定顯示的地圖區(qū)域、圖片大小、以及在地圖上添加覆蓋物,如標(biāo)簽、標(biāo)注、折線、多邊形。 可用于快速生成一張個(gè)性化涂鴉的靜態(tài)地圖用于查看和分享。
靜態(tài)圖上繪制點(diǎn)1、在頁面的 js 文件中,實(shí)例化 AMapWX 對象,請求顯示靜態(tài)地圖。 首先,引入 amap-wx.js 文件。 var amapFile = require('path/to/amap-wx.js');//如:../../libs/amap-wx.js 然后,構(gòu)造 AMapWX 對象,并調(diào)用 getStaticmap 方法。 其中, 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)。 <view class="img_box"> <img src="{{src}}"> </view> 3、編寫頁面的 wxss 文件,設(shè)置頁面樣式。 .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ū)域。 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ū)域,則不可再繪制線段。 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)簽: 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}) } }) |