微信小程序使用高德地图(amap)实现检索定位附近周边的POI功能示例

先给大家看一下效果图展示:

1、登录高德地图开发者平台 https://lbs.amap.com/,申请接口Key

 2、在高德开发平台下载微信小程序SDK,https://lbs.amap.com/api/wx/download

解压下载的文件得到 amap-wx.js ,在创建的项目中,新建一个名为 libs 目录,将 amap-wx.js 文件拷贝到 libs 的本地目录下。

3、微信小程序后台添加安全域名(这个必须设置,不然无法使用定位功能)

登录微信公众平台,在 "设置" → "开发设置" 中设置 request 合法域名,将 https://restapi.amap.com 中添加进去,如下图所示:

4、具体代码

index.wxml

<view class="search">
  <van-search value="" placeholder="请输入要搜索的地址名称" data-city="{{city}}" data-longitude="{{longitude}}" data-latitude="{{latitude}}" bind:change="onInputChange" bind:focus="onInputFocus" shape="round" />
</view>
<!--地图-->
<view wx:if="{{mapshow}}">
  <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" wx:if="{{maptextshow}}">
    <view class="name">{{textData.name}}</view>

    <view class="desc">
      <my-icon type="map;" size="35" color="#4295FA" />
      <view class="address">{{textData.address}}<text style="color:#4295FA;" wx:if="{{range!=''}}">(距离你{{range}})</text></view>
    </view>

    <view class="navigation" bindtap='map'>
      <my-icon type="navigation;" size="70" color="#0AC408" />
    </view>
  </view>
</view>
<!--搜索相关内容-->
<view wx:if="{{tipshow}}">
  <view bindtouchstart="bindSearch" data-keywords="{{item.name}}" class="{{index % 2 == 0?'odd_row':'even_row'}}" data-index="{{index}}" wx:for="{{tips}}" wx:for-item="item" wx:key="mykey">
    {{item.name}}
  </view>
</view>

注明:搜索框使用的是vant-weapp框架,参考文档:https://github.com/youzan/vant-weapp

index.wxss

.search {
  width: 100%;
  height: 100rpx;
}

.map_container {
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 100rpx;
  bottom: 100rpx;
  left: 0;
  right: 0;
}

.map {
  width: 100%;
  height: 100%;
}

.map_text {
  width: 95%;
  height:auto;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #fff;
  padding: 2.5%;
  overflow: hidden;
}

.map_text .navigation {
  position: absolute;
  right: 20rpx;
  top: 35rpx;
}

.map_text .name {
  line-height: 60rpx;
  font-size: 30rpx;
  padding-left: 10rpx;
}

.map_text .desc {
  width: 100%;
  display: flex;
  line-height: 35rpx;
}

.map_text .desc .address {
  width: calc(100% - 120rpx);
  width: -webkit-calc(100% - 120rpx);
  width: -moz-calc(100% - 120rpx);
  font-size: 25rpx;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.odd_row {
  color: #666;
  padding: 10rpx 30rpx;
  height: 70rpx;
  line-height: 70rpx;
  background: rgba(236, 255, 255, 0.8);
  cursor: pointer;
}

.even_row {
  color: #666;
  padding: 10rpx 30rpx;
  height: 70rpx;
  line-height: 70rpx;
  background: rgba(241, 255, 222, 0.8);
  cursor: pointer;
}

index.js

//引入高德SDK
var amapFile = require('../../libs/amap-wx.js');
var key = "高德地图的key";
var markersData = [];
Page({
  /**
   * 页面的初始数据
   */
  data: {
    markers: [],
    latitude: '',
    longitude: '',
    textData: {},
    city: '',
    keywords: '加油站',
    mapshow:true,
    maptextshow: false,
    tipshow:false,
    tips: {},
    isIos: false, 
    currentLocation:{},
    range:'',
  },
  makertap: function (e) {
    var id = e.markerId;
    var that = this;
    that.showMarkerInfo(markersData, id);
    that.changeMarkerColor(markersData, id);
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (e) {
    var that = this;
     //判断是不是ios系统
    wx.getSystemInfo({
      success: function (res) {
        if (res.platform == "ios") {
          that.setData({
            isIos:true
          });
        }
      }
    });
    //获取当前位置
    that.getMyLocation();
    wx.getSetting({
      success: (res) => {
        // res.authSetting['scope.userLocation'] == undefined  表示 初始化进入该页面
        // res.authSetting['scope.userLocation'] == false  表示 非初始化进入该页面,且未授权
        // res.authSetting['scope.userLocation'] == true  表示 地理位置授权
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
          wx.showModal({
            title: '是否授权当前位置',
            content: '需要获取您的地理位置,请确认授权,否则无法获取您所需数据',
            success: function (res) {
              if (res.cancel) {
                wx.showToast({
                  title: '授权失败',
                  image: '/images/fail.png',
                  duration: 1000
                })
                that.setData({
                  textData: {
                    name: 'Error:用户取消授权',
                    address: '无法加载地图,请在设置中允许请求位置信息'
                  }
                });
              } else if (res.confirm) {
                wx.openSetting({
                  success: function (dataAu) {
                    if (dataAu.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: '授权成功',
                        icon: 'success',
                        duration: 1000
                      })
                      //再次授权后,加载地图
                      that.showMap(that.data.keywords);
                    } else {
                      wx.showToast({
                        title: '授权失败',
                        image: '/images/fail.png',
                        duration: 1000
                      });
                      that.setData({
                        textData: {
                          name: 'Error:授权失败',
                          address: '无法加载地图,请在设置中允许请求位置信息'
                        }
                      });
                    }
                  }             
                })
              }
            }
          })
        } else { 
          //授权后默认加载
          that.showMap(that.data.keywords);
        }
      }
    });
    
  },
  showMap: function (keywords){
    var that = this;
    var myAmapFun = new amapFile.AMapWX({ key: key });
    var params = {
      iconPathSelected: '../../images/marker_checked.png',
      iconPath: '../../images/marker.png',
      success: function (data) {
        markersData = data.markers;
        var poisData = data.poisData;
        var markers_new = [];
        markersData.forEach(function (item, index) {
          markers_new.push({
            id: item.id,
            latitude: item.latitude,
            longitude: item.longitude,
            iconPath: item.iconPath,
            width: item.width,
            height: item.height
          })
        })
        if (markersData.length > 0) {
          that.setData({
            markers: markers_new
          });
          that.setData({
            city: poisData[0].cityname || ''
          });
          that.setData({
            latitude: markersData[0].latitude
          });
          that.setData({
            longitude: markersData[0].longitude
          });
          that.showMarkerInfo(markersData, 0);
        } else {
          that.setData({
            textData: {
              name: '抱歉,未找到结果',
              address: 'Error:no results found'
            },
            range : ''
          });
        }

      },
      fail: function (info) {
        /*
        //如果想使用定位来计算距离的话,苹果手机就得要求用户打开定位服务
        if (that.data.isIos){ 
          wx.showModal({
            title: '提示',
            content: '定位失败,请前往设置打开定位权限(设置 → 隐私 → 定位服务)' ,
            success: function (res) {             
              if (res.confirm) {
                //用户可能已重新开启定位,因此在这里尝试重新加载地图
                that.showMap(that.data.keywords);
              } else if (res.cancel) {
                //用户点击取消,返回上一菜单
                wx.navigateBack({ changed: true });
              }
            }
          });
        }
        */
      }
    }
    params.querykeywords = keywords;
    myAmapFun.getPoiAround(params)
  },
  onInputFocus: function (e) { 
    this.setData({
      mapshow: false,
      tipshow: true
    }); 
  },
  onInputChange: function (e) { 
    var that = this;
    var keywords = e.detail;
    if (keywords==""){
      that.setData({
        mapshow: true,
        tipshow: false
      }); 
    }
    var dataset = e.target.dataset;
    var myAmapFun = new amapFile.AMapWX({ key: key });
    myAmapFun.getInputtips({
      keywords: keywords,
      location: dataset.longitude + ',' + dataset.latitude,
      city: dataset.city,
      success: function (data) {
        if (data && data.tips) {     
          that.setData({
            tips: data.tips
          });   
        }
      }
    })
  },
  bindSearch: function (e) {
    var keywords = e.target.dataset.keywords;
    this.setData({
      mapshow: true,
      tipshow: false
    }); 
    this.showMap(keywords);
  },
  showMarkerInfo: function (data, i) {
    var that = this;
    console.log(that.data.currentLocation);
    //计算距离
    var lat1 = that.data.currentLocation.latitude;
    var lng1 = that.data.currentLocation.longitude;
    var lat2 = data[i].latitude;
    var lng2 = data[i].longitude;
    var distance = that.getDistance(lat1, lng1, lat2, lng2);
    distance = parseInt(distance * 1000);
    if (distance != null && distance>0){
      var range = distance + "米";
      if (distance >= 1000) {
        range = (Math.round(distance / 100) / 10).toFixed(1) + "公里";
      }
    }
    that.setData({
      textData: {
        name: data[i].name,
        address: data[i].address == "" ? '地址不详' : data[i].address,
        latitude: data[i].latitude,
        longitude: data[i].longitude,    
      },
      range: range,
      maptextshow:true
    });
  },
  changeMarkerColor: function (data, i) {
    var markers = [];
    for (var j = 0; j < data.length; j++) {
      if (j == i) {
        data[j].iconPath = "../../images/marker_checked.png";
      } else {
        data[j].iconPath = "../../images/marker.png";
      }
      markers.push({
        id: data[j].id,
        latitude: data[j].latitude,
        longitude: data[j].longitude,
        iconPath: data[j].iconPath,
        width: data[j].width,
        height: data[j].height
      })
    }
    this.setData({
      markers: markers
    });
  },
  map: function (e) { 
    var that=this;
    wx.openLocation({
      //当前经纬度
      latitude: that.data.textData.latitude,
      longitude: that.data.textData.longitude,
      //缩放级别默认18,缩放比例为5-18
      scale: 10,
      //位置名
      name: that.data.textData.name,
      //详细地址
      address: that.data.textData.address,
      success: function (res) {
      },
      fail: function (err) {
        wx.showToast({
          title: '调用地图失败',
          image: '/images/fail.png',
          duration: 1000
        })
      },
    })
  },
  /// <summary>
  /// 给定的经度1,纬度1;经度2,纬度2. 计算2个经纬度之间的距离。
  /// </summary>
  /// <param name="lat1">经度1</param>
  /// <param name="lon1">纬度1</param>
  /// <param name="lat2">经度2</param>
  /// <param name="lon2">纬度2</param>
  /// <returns>距离(公里、千米)</returns>
  getDistance: function (lat1, lon1, lat2, lon2) {
    var EARTH_RADIUS = 6378.137; //地球半径
    var radLat1 = lat1 * Math.PI / 180.0;
    var radLat2 = lat2 * Math.PI / 180.0;
    var radlon1 = lon1 * Math.PI / 180.0;
    var radlon2 = lon2 * Math.PI / 180.0;
     //差值
    var vLat = radLat1 - radLat2;
    var vLon = radlon1 - radlon2;
    //s就是一个球体上的切面,它的圆心即是球心的一个周长最大的圆。
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(vLat / 2), 2) +
      Math.cos(radLat1) * Math.cos(radLat2) *
    Math.pow(Math.sin(vLon / 2), 2)));
    s = s * EARTH_RADIUS;
    var distance = Math.round(s * 10000) / 10000;
    return distance; 
  },
  //获取当前位置
  getMyLocation:function(){
    var that=this;
    wx.getLocation({
      type: 'gcj02',
      success(data) {
        if (data) {
          that.setData({
            currentLocation:data
          });
        }
      }
    });
  },
})

7、 官方参考示例(demo)地址:

https://github.com/amap-demo/wx-regeo-poiaround-weather

发布了381 篇原创文章 · 获赞 133 · 访问量 63万+
展开阅读全文

微信程序高德地图API路线规划

09-21

#wxml代码# ``` <view class="flex-style"> <view class="flex-item active" bindtouchstart="goToCar">驾车</view> <view class="flex-item" bindtouchstart="goToWalk">步行</view> <view class="flex-item" bindtouchstart="goToBus">公交</view> <view class="flex-item" bindtouchstart="goToRide">骑行</view> </view> <view class="map_box"> <map id="navi_map" longitude="{{longitude}}" latitude="{{latitude}}" scale="12" markers="{{markers}}" polyline="{{polyline}}" show-location="true"></map> </view> <view class="text_box"> <view class="text">{{distance}}</view> <view class="text">{{cost}}</view> <view class="detail_button" bindtouchstart="goDetail">详情</view> </view> ``` #js代码# ``` var amapFile = require('../../utils/amap-wx.js'); var config = require('../../utils/config.js'); Page({ data: { markers: [{ iconPath: "../../img/mapicon_navi_s.png", id: 0, latitude:'', longitude:'', width: 23, height: 33 },{ iconPath: "../../img/mapicon_navi_e.png", id: 0, latitude:'', longitude:'', width: 24, height: 34 }], distance: '', cost: '', polyline: [] }, onLoad: function() { var that = this; var key = config.Config.key; var myAmapFun = new amapFile.AMapWX({key: key}); myAmapFun.getDrivingRoute({ success: function(data){ origin: data[0].longitude,data[0].latitude; destination: data[1].longitude,data[1].latitude; var marker = [{ latitude: data[0].latitude, longitude: data[0].longitude }, { latitude: data[1].latitude, longitude: data[1].longitude } ] that.setData({ markers: marker[0], latitude: data[0].latitude, longitude: data[0].longitude }); that.setData({ markers: marker[1], latitude: data[1].latitude, longitude: data[1].longitude }); var points = []; if(data.paths && data.paths[0] && data.paths[0].steps){ var steps = data.paths[0].steps; for(var i = 0; i < steps.length; i++){ var poLen = steps[i].polyline.split(';'); for(var j = 0;j < poLen.length; j++){ points.push({ longitude: parseFloat(poLen[j].split(',')[0]), latitude: parseFloat(poLen[j].split(',')[1]) }) } } } that.setData({ polyline: [{ points: points, color: "#0091ff", width: 6 }] }); if(data.paths[0] && data.paths[0].distance){ that.setData({ distance: data.paths[0].distance + '米' }); } if(data.taxi_cost){ that.setData({ cost: '打车约' + parseInt(data.taxi_cost) + '元' }); } } }) }, goDetail: function(){ wx.navigateTo({ url: '../navigation_car_detail/navigation' }) }, goToCar: function (e) { wx.redirectTo({ url: '../navigation_car/navigation' }) }, goToBus: function (e) { wx.redirectTo({ url: '../navigation_bus/navigation' }) }, goToRide: function (e) { wx.redirectTo({ url: '../navigation_ride/navigation' }) }, goToWalk: function (e) { wx.redirectTo({ url: '../navigation_walk/navigation' }) } }) ``` 怎么改才能让marker的两个标记变成活的经纬度,原来的高德地图API是两个写死的经纬度,[高德路线规划](http://lbs.amap.com/api/wx/guide/route/route),现在这个样子是我自己改的,摸索了微信小程序3天了,还不太懂,希望有大神能不吝赐教!! 问答

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

©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览