微信小程序---高德地图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.页面制作
下一篇:
微信小程序---仿哔哩哔哩
