微信小程序---高德地图API
高德api配置到这儿就结束了,以下是我调用高德实现定位的demo
JS部分:
var amapFile = require(../../libs/amap-wx.js); //引入高德js var config = require(../../libs/config.js); //引用我们的配置文件 Page({ data: { markers: [], latitude: , longitude: , textData: {} }, onLoad: function () { var that = this; var key = config.Config.key; var myAmapFun = new amapFile.AMapWX({ key: key }); myAmapFun.getRegeo({ iconPath: "../../img/marker.png", iconWidth: 22, iconHeight: 32, success: function (data) { console.log(data); var marker = [{ id: data[0].id, latitude: data[0].latitude, longitude: data[0].longitude, iconPath: data[0].iconPath, width: data[0].width, height: data[0].height }] that.setData({ markers: marker }); that.setData({ latitude: data[0].latitude }); that.setData({ longitude: data[0].longitude }); that.setData({ textData: { name: data[0].name, desc: data[0].desc } }) }, fail: function (info) { // wx.showModal({title:info.errMsg}) } }) } })
WXML部分:
<view class="map_container"> <map class="map" id="map" longitude="{ {longitude}}" latitude="{ {latitude}}" scale="16" markers="{ {markers}}"></map> </view> <view class="map_text"> <text class="h1">{ {textData.name}}</text> <text>{ {textData.desc}}</text> </view>
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; }
此页面大概长这样:
PS: 官方开发指南地址 https://lbs.amap.com/api/wx/guide/create-project/config-project 我的小程序demo地址 (star star star)
上一篇:
uniapp开发微信小程序-2.页面制作
下一篇:
微信小程序---仿哔哩哔哩