精华内容
下载资源
问答
  • 微信小程序高德地图的dome,很容易看懂,便于开发。容易上手
  • 微信小程序 高德地图SDK: 简介 微信小程序 SDK 帮您在微信小程序中获取高德丰富的地址描述、POI和实时天气数据。 功能介绍 账号与Key的申请 注册成为高德开发者需要分三步: 第一步,注册高德...
  • 前言 最近项目中做到相关网约车小程序。需要使用到地图中的路线规划,对3种地图进行了分析。这里稍微做一下总结: ...2、微信小程序API 之 位置 API wx.getLocation(OBJECT)、wx.chooseLocation(OBJECT)
  • 微信小程序高德地图获取当前定位 //定位方法 getUserLocation: function () { var _this = this; wx.getSetting({ success: (res) => { // res.authSetting[‘scope.userLocation’] == undefined 表示 初始化...

    微信小程序高德地图获取当前定位## 微信小程序

    //定位方法
    getUserLocation: function () {
    var _this = this;
    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: ‘拒绝授权’,
    icon: ‘none’,
    duration: 1000
    })
    } else if (res.confirm) {
    //确定授权,通过wx.openSetting发起授权请求
    wx.openSetting({
    success: function (res) {
    if (res.authSetting[“scope.userLocation”] == true) {
    wx.showToast({
    title: ‘授权成功’,
    icon: ‘success’,
    duration: 1000
    })
    //再次授权,调用wx.getLocation的API
    _this.gaodeGetLocation();
    } else {
    wx.showToast({
    title: ‘授权失败’,
    icon: ‘none’,
    duration: 1000
    })
    }
    }
    })
    }
    }
    })
    } else if (res.authSetting[‘scope.userLocation’] == undefined) {
    //用户首次进入页面,调用wx.getLocation的API
    _this.gaodeGetLocation();
    }else {
    console.log(‘授权成功’)
    //调用wx.getLocation的API
    _this.gaodeGetLocation();
    var page = getCurrentPages().pop();
    if (page == undefined || page == null) return;
    page.onLoad();
    }
    }
    })
    },
    //通过两点经纬度计算距离(KM)
    distance:function(la1, lo1, la2, lo2) {
    var La1 = la1 * Math.PI / 180.0;
    var La2 = la2 * Math.PI / 180.0;
    var La3 = La1 - La2;
    var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));
    s = s * 6378.137;//地球半径
    s = Math.round(s * 10000) / 10000;
    console.log(“计算结果”,s);
    return s;
    },
    //高德地图获取定位
    gaodeGetLocation:function(){
    var that = this;
    var myAmapFun=new aMap.AMapWX({key:’*********自己的高德地图key’});
    myAmapFun.getRegeo({
    success:(res)=>{
    console.log(res)
    wx.setStorageSync(‘gaodeAddress’,res[0].regeocodeData.addressComponent.city)
    //console.log(“高德地图获取定位:”+JSON.stringify(res),res[0].regeocodeData.formatted_address);
    //计算两个经纬度距离
    var jl = that.distance(39.928712, 116.393345, res[0].latitude, res[0].longitude);
    console.log(“打印计算两个点的距离:”+jl);
    this.setData({
    gaodeAddress:res[0].regeocodeData.addressComponent.city,
    })
    }
    })
    },

    展开全文
  • //高德定位 自行下载该js包 import amapFile from '@/common/amap-wx.js'; var GD_MAP_KEY = this.env_common.GD_MAP_KEY //高德申请的key wx.getSetting({ success(res) { //去判断开启定位权限 if (res....
    
    //高德定位 自行下载该js包
    	import amapFile from '@/common/amap-wx.js';
    
    var GD_MAP_KEY = this.env_common.GD_MAP_KEY //高德申请的key
    wx.getSetting({
    	success(res) {
    		//去判断开启定位权限
    		if (res.authSetting['scope.userLocation'] == false) { // 如果已拒绝授权,则打开设置页面
    			wx.openSetting({
    				success(res) {
    					// console.log(res)
    				}
    			})
    		} else {
    			//高德定位
    			var myAmapFun = new amapFile.AMapWX({key:GD_MAP_KEY});
    			myAmapFun.getPoiAround({
    			      // iconPathSelected: '选中 marker 图标的相对路径', //如:..­/..­/img/marker_checked.png
    			      // iconPath: '未选中 marker 图标的相对路径', //如:..­/..­/img/marker.png
    			      success: function(data){
    					  console.log(123123123)
    					  console.log(data.markers[0])         
    			      },
    			      fail: function(info){
    			      }
    			    })
    		}
    	}
    })
    
    展开全文
  • 微信小程序高德地图简单集成

    千次阅读 2018-03-23 10:36:18
    本人也是小白,学习微信小程序地图的集成.首先你要去高德开放平台上我的控制台上创建一个应用,获取key值:http://lbs.amap.com/再根据文档去下载 amap-wx.js 文件 地址http://lbs.amap.com/api/wx/guide/route/route,...

    本人也是小白,学习微信小程序地图的集成.

    首先你要去高德开放平台上我的控制台上创建一个应用,获取key值:http://lbs.amap.com/


    再根据文档去下载 amap-wx.js 文件 地址http://lbs.amap.com/api/wx/guide/route/route,

    在打开已经创建的小程序目录,在目录添加libs文件夹,把amap-wx.js放进去


    然后看代码操作:

    js文件中:


    wxml:


    wxss:


    注意的就是要把key加进去.

    然后就可以完成一个简单的小程序定位:


    还有一个问题就是在手机上看不到,模拟器能看到不知道什么原因,远程调试也能操作.



    展开全文
  • 主要介绍了微信小程序基于高德地图查找位置并显示文字,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • miniProgramAmap 微信小程序基于高德地图API出行路线规划,地图导航 体验二维码,微信扫一扫
  • 微信小程序使用高德地图

    万次阅读 2018-05-07 21:22:25
    微信小程序—-高德地图开发应用(获取key)1.利用高德开发平台创建应用http://lbs.amap.com/dev/index 2、点击创建新应用进入创建模态框3.添加新Key在创建的应用上点击”添加新Key”按钮。 得到KEY微信小程序—-...

    微信小程序—-高德地图开发应用(获取key)

    1.利用高德开发平台创建应用

    http://lbs.amap.com/dev/index
    这里写图片描述

    2、点击创建新应用进入创建模态框

    这里写图片描述

    3.添加新Key

    在创建的应用上点击”添加新Key”按钮。
    这里写图片描述

    得到KEY

    这里写图片描述

    微信小程序—-map路线规划

    进入页面直接定位到当前位置,输入目的地!

    案例代码:

    WXML:

    <view class="tui-map">
      <map id="map" longitude="{{currentLo}}" latitude="{{currentLa}}" scale="{{scale}}" markers="{{markers}}" polyline="{{polyline}}"  include-points="{{includePoints}}" show-location style="width: 100%; height: 100%;"></map>
    </view>
    <view class="tui-map-search" bindtap="getAddress">
       <icon size='20' type='search' class='tui-map-search-icon'></icon> 
      <input class="tui-map-input" placeholder="搜索" focus="{{focusStatus}}"></input>
    </view>
    <view class="tui-search-bottom {{show ? '' : 'tui-hide'}}">
      <view class="page-group">
        <view class="page-nav-list {{statusType == 'car' ? 'active' : ''}}" data-type="car" bindtap="goTo">驾车</view>
        <view class="page-nav-list {{statusType == 'walk' ? 'active' : ''}}" data-type="walk" bindtap="goTo">步行</view>
        <view class="page-nav-list {{statusType == 'ride' ? 'active' : ''}}" data-type="ride" bindtap="goTo">骑行</view>
      </view>
      <view class="tui-warn">
        {{distance}}</view>
      <view class="tui-warn">
        {{duration}}分钟
      </view>
    </view>

    JS

    var amapFile = require('../../src/js/amap-wx.js');
    Page({
      data: {
        key: 'c290b7e016c85e8f279b2f80018c6fbf',
        show: false,
        currentLo : null,
        currentLa : null,
        newCurrentLo : null,
        newCurrentLa : null,
        distance : 0,
        duration : 0,
        markers : null,
        scale: 16,
        polyline: null,
        statusType: 'car',
        includePoints:[]
      },
      onLoad(){
        var _this = this;
        wx.getLocation({
          success(res){
            _this.setData({ 
              currentLo: res.longitude, 
              currentLa: res.latitude,
              includePoints: [{
                longitude: res.longitude,
                latitude: res.latitude
              }],
              markers: [{
                id: 0,
                longitude: res.longitude,
                latitude: res.latitude,
                title: res.address,
                iconPath: '../../src/images/navi_s.png',
                width: 32,
                height: 32
              }]
            });
          }
        })
      },
      getAddress(e){
        var _this = this;
        wx.chooseLocation({
          success(res){
            var markers = _this.data.markers;
            markers.push({
              id: 0,
              longitude: res.longitude,
              latitude: res.latitude,
              title: res.address,
              iconPath: '../../src/images/navi_e.png',
              width: 32,
              height: 32
            });
    
            var points = _this.data.includePoints;
            points.push({
              longitude: res.longitude,
              latitude: res.latitude
            });
            _this.setData({
              newCurrentLo: res.longitude,
              newCurrentLa: res.latitude,
              includePoints: points,
              markers: markers,
              show:true
            });
            _this.getPolyline(_this.data.statusType);
          }
        });
      },
      drawPolyline(self,color){
        return {
          origin: this.data.currentLo + ',' + this.data.currentLa,
          destination: this.data.newCurrentLo + ',' + this.data.newCurrentLa,
          success(data) {
            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])
                  })
                }
              }
            }
            self.setData({
              distance: data.paths[0].distance,
              duration: parseInt(data.paths[0].duration/60),
              polyline: [{
                points: points,
                color: color,
                width: 6,
                arrowLine: true
              }]
            });
          }
        }
      },
      getPolyline(_type){
        var amap = new amapFile.AMapWX({ key: this.data.key });
        var self = this;
        switch (_type){
          case 'car':
            amap.getDrivingRoute(this.drawPolyline(this,"#0091ff"));
            break;
          case 'walk':
            amap.getWalkingRoute(this.drawPolyline(this, "#1afa29"));
            break;
          case 'ride':
            amap.getRidingRoute(this.drawPolyline(this, "#1296db"));
            break;
          default:
            return false;
        }
      },
      goTo(e){
        var _type = e.currentTarget.dataset.type;
        this.setData({statusType : _type});
        this.getPolyline(_type);
      }
    })

    WXSS

    .tui-map-search{
      width: 100%;
      height: 80rpx;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000000;
      box-sizing: border-box;
      padding: 5rpx 10px;
      background-color: #fff;
      line-height: 70rpx;
    }
    .tui-map-input{
      height: 70rpx;
      line-height: 70rpx;
      font-size: 30rpx;
      margin-left: 25px;
    }
    .tui-map-search-icon{
      position: absolute;
      top: calc(50% - 10px);
      left: 10px;
    }
    .tui-map{
      width: 100%;
      height: calc(100% - 80rpx);
      position: fixed;
      bottom: 0;
      left: 0;
    }
    .tui-map-direction{
      width: 32px;
      height: 32px;
      position: fixed;
      right: 10px;
      bottom: 80px;
      z-index: 100000;
    }
    
    .page-group{
      display: table;
      width: 100%;
      table-layout: fixed;
      background-color: #fff;
    }
    .page-nav-list{
      padding:20rpx 0 ;
      font-size: 30rpx;
      display: table-cell;
      text-align: center;
      width: 100%;
      color: #222;
    }
    .page-nav-list.active{color:blue;}
    .tui-warn{
      height: 50px;
      line-height: 50px;
      padding-left: 10px;
      color: lightseagreen;
      font-size: 30rpx;
    }
    .tui-search-bottom{
      height: 150px;
      background: #fff;
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 1000;
    }

    注意

    在实例化 AMapWX 对象前,必须引入amap-wx.js,amap-wx.js下载
    网址:http://lbs.amap.com/api/wx/download

    展开全文
  • 微信小程序 高德小程序SDK使用总结

    千次阅读 2017-11-23 10:40:22
    高德地图poi搜索加分页和每页记录数据 高德地图的poi搜索的方法介绍如下 可以看到,参数是没有分页的,但项目中需要分页结果,那我们进而找到了高德周边搜索的最终方法: 高德周边搜索的方法介绍: ...
  • 微信小程序地图气泡点击事件 在使用微信小程序时,在点击气泡时会需要实现相关效果,气泡点击事件:bindcallouttap。 1.给地图图标的气泡绑定事件。 2.当点击气泡时,回去相关信息并实现相关的效果。 参照微信小...
  • 地址链接 1、高德地图,小程序sdk文档地址 2、高德地图,小程序sdk下载地址 微信小程序地图插件系列其他文章 微信小程序地图插件系列(二):微信小程序使用百度地图 提示:以下是本篇文章正文内容,下面案例可供...
  • 微信小程序---高德地图API

    万次阅读 2018-11-29 10:16:16
    本文章介绍微信小程序调用高德地图API的过程,使用高德定位功能做演示。 微信小程序目前支持百度地图、高德地图、腾讯地图。用法都基本一致,简单说一下他们的区别,高德地图精度应该是最准确的,毕竟本来就是做...
  • uniapp 微信小程序引用高德地图

    千次阅读 2020-09-25 19:24:40
    2.打开网址下载微信小程序sdk 3.解压后得到 amap-wx.js 文件 放入的项目中 4.在需要使用高德地图的vue文件中引入 amap-wx.js 文件 import amap from '@/common/amap-uni.js'; 5.然后,在.vue中实例化 AMapWX 对象,...
  • 迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用。现在分享到互联网社区中,帮助后续有需要的开发者。 1.组件介绍 1.1 组件效果预览图 ​小程序组件继承了外部样式colorui的色彩,但实际动画会根据父...
  • 1.登录高德地图https://lbs.amap.com/ ...2. 到微信小程序中 a.新建wxs文件夹将amap-wx.js文件复制粘贴进去 b.使用: 代码:varamapFile=require('../../wxs/amap-wx.js'); c.获取定位...
  • 怎么改才能让marker的两个标记变成活的经纬度,原来的高德地图API是两个写死的经纬度,[高德路线规划](http://lbs.amap.com/api/wx/guide/route/route),现在这个样子是我自己改的,摸索了微信小程序3天了,还不太懂...
  • 近期一直在研究小程序地图组件开发,使用的是高德微信小程序sdk查找周边poi数据,并展示到地图上。 根据getPoiAround接口协议传入对应的参数测试发现目前该接口最多只能返回20条数据,不支持分页,重要的是他的第一...
  • index.wxml:  longitude:经度  latitude:维度  地图所定位的区域 index.js  地图所定位的点 转载于:https://www.cnblogs.com/yxj9536/p/10319122.html...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,124
精华内容 1,249
关键字:

微信小程序高德地图

微信小程序 订阅