绘制静态图 |
您所在的位置：网站首页 › 地图怎么绘制路线图片 › 绘制静态图 |
绘制静态图
|
简介 由于微信内无法运行第三方地图，高德对广大开发者提供了静态地图功能，可快速生成一张地图图片，可以指定显示的地图区域、图片大小、以及在地图上添加覆盖物，如标签、标注、折线、多边形。 可用于快速生成一张个性化涂鸦的静态地图用于查看和分享。  静态图上绘制点1、在页面的 js 文件中，实例化 AMapWX 对象，请求显示静态地图。 首先，引入 amap-wx.js 文件（amap-wx.js 从相关下载页面下载的 zip 文件解压后得到）。 JavaScriptvar amapFile = require('path/to/amap-wx.js');//如：../../libs/amap-wx.js然后，构造 AMapWX 对象，并调用 getStaticmap 方法。 其中， JavaScriptPage({ 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 文件，搭建页面结构。 WXML3、编写页面的 wxss 文件，设置页面样式。 WXSS.img_box{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .img_box image{ width: 100%; height: 100%; } ……运行程序，效果如下：  其余绘制绘制线段向 getStaticmap 方法中传 paths 字段绘制线段，如果使用 paths 绘制线段，则不可再绘制区域。 JavaScriptmyAmapFun.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 绘制区域，则不可再绘制线段。 JavaScriptmyAmapFun.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 字段可以绘制标签： JavaScriptmyAmapFun.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}) } }) 参考示例点我获取详细信息>> |
【本文地址】
今日新闻 |
推荐新闻 |