微信小程序开发-高德地图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: '',    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;}

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