微信小程序开发-高德地图api

第一步：

既然是高德地图的使用，那么我们首先进入高德地图开放平台：高德地图

注册之后在应用管理新建一个应用获取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>
</view>
<view class="map_container">
<map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map>
</view>
<view class="map_text">
<text class="h1">{{textData.name}}</text>
<text>{{textData.desc}}</text>
</view>

js：
var amapFile = require('../../libs/amap-wx.js');
var markersData = [];
Page({
data:{
weather:"",
markers: [],
latitude: '',
longitude: '',
textDa
4000
ta: {}
},
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;
}

代码没有好好整理一下，最好自己写几个例子，看看高德开放平台的参考手册 -- 链接