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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/tang1392/article/details/78605506

第一步:

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

注册之后在应用管理新建一个应用获取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;
}


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

没有更多推荐了,返回首页