第一步:
既然是高德地图的使用,那么我们首先进入高德地图开放平台:高德地图
注册之后在应用管理新建一个应用获取key
获取key之后我们去高德地图API看看高德对API的介绍,
相关下载那有sdk的下载链接,参考文档有相关的方法介绍。
第二步:
登录微信开发者平台,在设置里面获取appid,另外在服务器域名设置里面将https://restapi.amap.com设置好。
确定都设置成功。
第三步:
打开微信开发者工具。
新建项目,输入appid。
项目文件目录:
- - libs
- - amap-wx,js
- - pages
- - index
- - index.js
- - index.json
- - index.wxml
- - index.wxss
- - utils
- - utils.js
- - app.js
- - app.json
- - app.wxss
- - project.config.json
直接撸上代码
wxml:
view view城市:{{weather.liveData.province}}-{{weather.liveData.city}}/view/viewview class="map_container" map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"/map/viewview class="map_text" text class="h1"{{textData.name}}/text text{{textData.desc}}/text/viewjs:
var amapFile = require('../../libs/amap-wx.js');var markersData = [];Page({ data:{ weather:"", markers: [], latitude: '', longitude: '', textData: {} }, onLoad: function () { var that = this; var myAmapFun = new amapFile.AMapWX({ key: '4af0431b3c68398b661cac70d4d700aa' }); myAmapFun.getWeather({ city:"武侯区", success: function (data) { //成功回调 console.log(data); that.setData({ weather:data }) }, fail: function (info) { //失败回调 console.log("failed!!!!") } }); myAmapFun.getPoiAround({ location:'104.05,30.65', //经纬度 success: function (data) { markersData = data.markers; that.setData({ markers: markersData }); that.setData({ latitude: markersData[0].latitude }); that.setData({ longitude: markersData[0].longitude }); that.showMarkerInfo(markersData, 0); }, fail: function (info) { wx.showModal({ title: info.errMsg }) } }) }, showMarkerInfo: function(data, i) { var that = this; that.setData({ textData: { name: data[i].name, desc: data[i].address } }); }, changeMarkerColor: function (data, i) { var that = this; var markers = []; markers.push(data[j]); that.setData({ markers: markers }); }, makertap: function (e) { var id = e.markerId; var that = this; that.showMarkerInfo(markersData, id); that.changeMarkerColor(markersData, id); }})wxss:
.map_container{ position: absolute; top: 0; bottom: 80px; left: 0; right: 0;}.map{ width: 100%; height: 100%;}.map_text{ position: absolute; left: 0; right: 0; bottom: 0px; height: 80px; background: #fff; padding: 0 15px;}text{ margin: 5px 0; display: block; font-size:12px;}.h1{ margin: 15px 0; font-size:15px;}代码没有好好整理一下,最好自己写几个例子,看看高德开放平台的参考手册 -- 链接













