高德地圖小程序SDK新增功能：繪制靜態圖
發布時間：2018-04-13 14:32 所屬欄目：小程序開發教程
|
功能增加時間：2月17日
運用靜態地圖功能，可快速生成一張地圖圖片，可以指定顯示的地圖區域、圖片大小、以及在地圖上添加覆蓋物，如標簽、標注、折線、多邊形。 可用于快速生成一張個性化涂鴉的靜態地圖用于查看和分享。
靜態圖上繪制點1、在頁面的 js 文件中，實例化 AMapWX 對象，請求顯示靜態地圖。 首先，引入 amap-wx.js 文件。
var amapFile = require('path/to/amap-wx.js');//如：../../libs/amap-wx.js
然后，構造 AMapWX 對象，并調用 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 文件，搭建頁面結構。
<view class="img_box">
<img src="{{src}}">
</view>
3、編寫頁面的 wxss 文件，設置頁面樣式。
.img_box{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.img_box image{
width: 100%;
height: 100%;
}
……
運行程序，效果如下：
其余繪制繪制線段向 getStaticmap 方法中傳 paths 字段繪制線段，如果使用 paths 繪制線段，則不可再繪制區域。
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})
}
})
繪制區域向 getStaticmap 方法中傳 paths 字段繪制區域，如果使用 paths 繪制區域，則不可再繪制線段。
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})
}
})
繪制標簽向 getStaticmap 方法中傳 labels 字段可以繪制標簽：
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})
}
})
|
