小程序中使用高德地图

小程序中使用高德地图：
第一步：申请高德地图的秘钥，https://lbs.amap.com/api/wx/summary/
按照官网这个步骤来就行。
第二步：注册完之后下载amap-wx.js这个js文件拷贝到你的项目中

第三步：设置小程序安全通讯域名，为了保证高德小程序 SDK 中提供的功能的正常使用，需要设置安全域名。
登录微信公众平台，在 “设置”－>“开发设置” 中设置 request 合法域名，将 https://restapi.amap.com 中添加进去，如下图所示：

第四步：
1、在你需要引用地图的页面的js文件中引入 amap-wx.js 文件。

var amapFile = require('path/to/amap-wx.js');//如：..­/..­/libs/amap-wx.js

然后，在js 中实例化 AMapWX 对象，调用 getPoiAround 方法，获取POI数据。
为保证 marker 以自定义的图标显示，需在项目中新建 img 目录，并将 marker 对应的图标拷贝到项目的本地的 img 目录中，同时在 index.js 添加以下代码：

var markersData = [];
Page({
  data: {
    markers: [],
    latitude: '',
    longitude: '',
    textData: {}
  },
  makertap: function(e) {
    var id = e.markerId;
    var that = this;
    that.showMarkerInfo(markersData,id);
    that.changeMarkerColor(markersData,id);
  },
  onLoad: function() {
    var that = this;
    var myAmapFun = new amapFile.AMapWX({key:'您的key'});
    myAmapFun.getPoiAround({
      iconPathSelected: '选中 marker 图标的相对路径', //如：..­/..­/img/marker_checked.png
      iconPath: '未选中 marker 图标的相对路径', //如：..­/..­/img/marker.png
      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 = [];
    for(var j = 0; j < data.length; j++){
      if(j==i){
        data[j].iconPath = "选中 marker 图标的相对路径"; //如：..­/..­/img/marker_checked.png
      }else{
        data[j].iconPath = "未选中 marker 图标的相对路径"; //如：..­/..­/img/marker.png
      }
      markers.push(data[j]);
    }
    that.setData({
      markers: markers
    });
  }

})

2、设置 index.wxml 文件。
index.wxml 在项目空间的 page/index 目录下，该文件是页面结构文件，用来搭建页面结构，绑定数据和交互处理函数等。
示例代码如下：

<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>

3、设置 index.wxss 文件。
index.wxss 在项目空间的 page/index 目录下，是页面样式文件。
示例代码如下：

.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;
}

这样就可以了，关于高德地图一些具体的属性和方法 就参照官方文档来就行了https://lbs.amap.com/api/wx/summary