微信小程序---高德地图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)

经验分享 程序员 微信小程序 职场和发展