精华内容
下载资源
问答
  • 主要介绍了微信小程序使用map组件实现检索(定位位置)周边的POI功能,涉及微信小程序基于map组件与高德地图PAI接口的定位操作相关使用技巧,需要的朋友可以参考下
  • 从我自己开发的微信小程序中提取的一个简单demo,代码很简单,主要是通过map组件和相关api及sdk完成的功能,能够进行定位,和检索周边,真机测试可行
  • 环境搭建注册,获取APPID(没有这个不能真鸡调试)下载微信web开发者工具(挺多bug,将就用)打开微信web开发者工具,扫码登录,新建小程序,输入APPID,勾选创建quick start项目。工 ...       环境搭建 注册,...
  • 主要介绍了微信小程序开发之map地图组件,定位,并手动修改位置偏差,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 小程序map实现 浮标、定位

    千次阅读 2019-11-29 13:58:35
    就是地图上不随地图移动的图标,直接在map标签外设置cover-view,里面包裹cover-image,样式使用绝对定位即可。比如地图缩小按钮标签显示在地图右上角: wxml <!-- 缩小 --> <view class='cover-smaller'&...

    浮标

    就是地图上不随地图移动的图标,直接在map标签外设置cover-view,里面包裹cover-image,样式使用绝对定位即可。比如地图缩小按钮标签显示在地图右上角:
    .wxml

    <!-- 缩小 -->
    <map>...</map>
     <!-- 缩小 -->
        <cover-view class='cover-smaller'>
          <cover-image class='icon-set' bindtap='setSmallerClick' src='../../static/images/ic_smaller.png' />
        </cover-view>
    

    .wxss

    
    .cover-smaller {
      width: 100rpx;
      height: 100rpx;
      position: absolute;
      top: 20rpx;
      right: 10rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .
    .icon-set{
      width: 70rpx;
      height: 70rpx;
      background: white;
      border-radius: 10%;
    }
    

    定位

    在地图页onLoad方法中调用微信提供的定位方法即可,如下:
    .xml

    <view>
      <map class="map" longitude="{{longitude}}" latitude="{{latitude}}"   show-location></map>
    </view>
    
    

    .js
    注意:定位之前要授权

      onLoad: function (options) {
        //授权
        this.locationAuth();
        
      
      },
    
      locationAuth:function(){
        wx.getSetting({
          success: (res) => {
            console.log(JSON.stringify(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({
                      success: function (dataAu) {
                        if (dataAu.authSetting["scope.userLocation"] == true) {
                          wx.showToast({
                            title: '授权成功',
                            icon: 'success',
                            duration: 1000
                          })
                          //再次授权,调用wx.getLocation的API
                          this.showMaps();
                        } else {
                          wx.showToast({
                            title: '授权失败',
                            icon: 'none',
                            duration: 1000
                          })
                        }
                      }
                    })
                  }
                }
              })
            } else if (res.authSetting['scope.userLocation'] == undefined) {
              //调用wx.getLocation的API
              this.showMaps();
            }
            else {
              //调用wx.getLocation的API
              this.showMaps();
            }
          }
        })
      },
      //定位
      showMaps:function(){
        var that = this;
        wx.showLoading({
          title: "定位中",
          mask: true
        })
        wx.getLocation({
          type: 'gcj02',
          altitude: true, //高精度定位  定位成功,更新定位结果
          success: (res) => {
            var latitude = res.latitude
            var longitude = res.longitude
            that.setData({
              latitude: latitude,
              longitude: longitude,
            })
          },
          // 定位失败回调
          fail: function () {
            wx.showToast({
              title: "定位失败le",
             
            })
          },
          complete: function () {
            //隐藏加载框
            wx.hideLoading()
          }
        })
      },
    
    

    并且在app.json文件中生命权限

    "pages": [
       ........
      ],
      "permission": {
        "scope.userLocation": {
          "desc": "你的位置信息将用于小程序位置接口的效果展示"
        }
      },
    

    注意:uniapp开发时这里有个坑,需要检查下manifest.json的配置里面,微信小程序配置是否勾选位置接口选项,申请原因填上面desc的内容即可

    浮标、定位成功结果展示:

    在这里插入图片描述

    展开全文
  • map id=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;map&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; latitude=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;{{latitude}

    小程序map组件的应用方式:简单版

    在这里插入图片描述
    在这里插入图片描述

    wxml:

    <map id="map" latitude="{{latitude}}" longitude="{{longitude}}"  controls="{{controls}}" bindcontroltap="controltap"
     markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange"   scale="14"  show-location>
     </map>
    
    

    wxss:

    page{ width: 100%; height:100%; }
    #map{ width: 100%; height:100%; }
    

    js:

    data: {
        markers: [],  //地图参数:
        latitude: "", //纬度 
        longitude: "",  //经度
      },
      regionchange(e) {
        //console.log(e)
      },
      markertap(e) {
        //console.log(e)
      },
      controltap(e) {
        //console.log(e)
      },
    
      //获得地图
      getMyMap(e) {
        let that = this;
        //自行查询经纬度 http://www.gpsspg.com/maps.htm
        const mapLatitude = 23.1194300000,
              mapLongitude = 113.3212200000;
        wx.getLocation({
          type: 'wgs84', 
          success(res){
          // 当前自己的经纬度 res.latitude,res.longitude
            that.setData({
              latitude: mapLatitude,
              longitude: mapLongitude,
              markers: [{
                id: "0",
                latitude: mapLatitude,
                longitude: mapLongitude,
                iconPath: "https://xcx.quan5fen.com/Public/xcx-hitui/image/imgs-jyh/map-ico.png",
                width: 40,
                height: 40,
                callout: {
                  'display': 'ALWAYS', 'fontSize': '30rpx', 'content': '广州珠江新城',
                  'padding': '8rpx', 'boxShadow': '0 0 5rpx #333','borderRadius':'4rpx'
                }
              }],
            })
          }
        })
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.getMyMap()
      },
    

    有什么错误或优化的地方,可以提出来,大家一起学习研究…

    复杂版:微信小程序map组件路线规划,腾讯地图sdk的应用案例
    在这里插入图片描述

    展开全文
  • 在使用map进行定位时,发现定位点不在视图的中心。如下图情况; 解决方式: 将type改为gcj02,完美解决“定位点不在视图中心的问题”。

    在使用map进行定位时,发现定位点不在视图的中心。如下图情况;
    在这里插入图片描述
    解决方式:
    在这里插入图片描述
    将type改为gcj02,完美解决“定位点不在视图中心的问题”。
    在这里插入图片描述

    展开全文
  • 小程序实现map搜索/定位/检索/天气/路线规划。 小程序地图采用微信小程序提供的map组件;周边的数据坐标点通过高德地图提供的API接口,获取定位位置的...此代码提供小程序map搜索/定位/检索/天气/路线规划 搜索/定位/
  • 微信小程序 地图(map)实例  这里是小编对微信小程序 地图(map API )做的资料整理,获取当前的地址,应该如何实现的实例,大家可以看下。 今天做到地图定位的模块.模拟器肯定是获取不到位置的.下面为真机测试...
  • 本文实例讲述了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能。分享给大家供大家参考,具体如下: 效果图 实现原理 采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空...
  • 小程序地图定位

    2018-03-26 11:06:05
    小程序 地图定位,刚接触小程序的朋友可以看看,照着例子学习比较容易接受。
  • 地图采用微信小程序提供的map组件; 周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据。 WXML view class=&amp;quot;map_container&amp;quot;&...

    WXRUI体验二维码

    WXRUI体验码

    如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

    声明

    bug: 页面顶部分类【汽车服务、汽车销售等】列表和页脚的详细地址在真机测试是会出现不显示问题?
    造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡!
    解决办法:将该文本视图采用cover-view,放在map中。
    感谢: 感谢Lrj_estranged指出问题!

    效果图

    这里写图片描述

    实现方法

    1. 地图采用微信小程序提供的map组件;
    2. 周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据。

    WXML

    <view class="map_container">
      <map class="map" longitude="{{longitude}}" latitude="{{latitude}}" include-points="{{points}}" markers='{{markers}}'>
    	  <cover-view class="map-tab-bar">
    	    <cover-viewclass="map-tab-li {{item.id == status ? 'active' : ''}}" bindtap="getType" data-type="{{item.id}}" wx:key="aroundListId" wx:for="{{aroundList}}">{{item.name}}</cover-view>
    	  </cover-view>
    	  <cover-viewclass="map-tab-bar map-foot {{isShow ? '' : 'map-hide'}}">
    	    <cover-viewclass="map-name">{{name}}</cover-view>
    	    <cover-viewclass="map-address">{{address}}</cover-view>
    	  </cover-view>
      </map>
    </view>
    

    WXSS

    .map_container{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
    .map{
      width: 100%;
      height: 100%;
    }
    .map-tab-bar{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      font-size: 0;
      background-color: #fff;
    }
    .map-hide{display: none;}
    .map-foot{
      top: auto;
      bottom: 0;
      padding: 0 10px;
    }
    .map-name{
      height: 80rpx;
      line-height: 80rpx;
      font-size: 35rpx;
      overflow: hidden;
    }
    .map-address{
      height: 60rpx;
      line-height: 60rpx;
      font-size: 25rpx;
      overflow: hidden;
    }
    .map-tab-li{
      display: inline-block;
      width: 25%;
      overflow: hidden;
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      font-size: 30rpx;
      color: #333;
    }
    .map-tab-li.active{color: #fff;background-color: lightgreen;border-radius: 5px;}
    

    JS

    var app = getApp();
    var amap = app.data.amap;
    var key = app.data.key;
    Page({
      data: {
        aroundList: [
          {
            name: '汽车服务',
            id: '010000'
          },
          {
            name: '汽车销售',
            id: '020000'
          },
          {
            name: '汽车维修',
            id: '030000'
          },
          {
            name: '摩托车',
            id: '040000'
          },
          {
            name: '餐饮',
            id: '050000'
          },
          {
            name: '购物',
            id: '060000'
          },
          {
            name: '生活',
            id: '070000'
          },
          {
            name: '体育休闲',
            id: '080000'
          },
          {
            name: '医疗保健',
            id: '090000'
          },
          {
            name: '住宿',
            id: '100000'
          },
          {
            name: '风景名胜',
            id: '110000'
          },
          {
            name: '商务住宅',
            id: '120000'
          }
        ],
        status:null,
        latitude: null,
        longitude: null,
        isShow: false,
        markers: [],
        points: [],
        location: '',
        name:'',
        address: ''
      },
      onLoad: function () {
        // 页面加载获取当前定位位置为地图的中心坐标
        var _this = this;
        wx.getLocation({
          success(data) {
            if (data) {
              _this.setData({
                latitude: data.latitude,
                longitude: data.longitude,
                markers:[{
                  id:0,
                  latitude: data.latitude,
                  longitude: data.longitude,
                  iconPath: '../../src/images/ding.png',
                  width: 32,
                  height: 32
                }]
              });
            }
          }
        });
      },
      getType(e) {//获取选择的附近关键词,同时更新状态
        this.setData({ status: e.currentTarget.dataset.type})
        this.getAround(e.currentTarget.dataset.keywords,e.currentTarget.dataset.type);
      },
      getAround(keywords,types) {//通过关键词获取附近的点,只取前十个,同时保证十个点在地图中显示
        var _this = this;
        var myAmap = new amap.AMapWX({ key: key });
        myAmap.getPoiAround({
          iconPath: '../../src/images/blue.png',
          iconPathSelected: '../../src/images/ding.png',
          querykeywords: keywords,
          querytypes: types,
          location: _this.data.location,
          success(data) {
            if (data.markers) {
              var markers = [], points = [];
              for (var value of data.markers) {
                if (value.id > 9) break;
                if(value.id == 0){
                  _this.setData({
                    name: value.name,
                    address: value.address,
                    isShow: true
                  })
                }
                markers.push({
                  id: value.id,
                  latitude: value.latitude,
                  longitude: value.longitude,
                  title: value.name,
                  iconPath: value.iconPath,
                  width: 32,
                  height: 32,
                  anchor: { x: .5, y: 1 },
                  label: {
                    content: value.name,
                    color: 'green',
                    fontSize: 12,
                    borderRadius: 5,
                    bgColor: '#fff',
                    padding: 3,
                    x: 0,
                    y: -50,
                    textAlign: 'center'
                  }
                });
                points.push({
                  latitude: value.latitude,
                  longitude: value.longitude
                })
              }
              _this.setData({
                markers: markers,
                points: points
              })
            }
          },
          fail: function (info) {
            wx.showToast({title: info})
          }
        })
      }
    });
    

    总结

    1. 由于是移动端,所以人为限制只显示了9条周边数据,防止重叠部分太多。
    2. 添加指定位置的周边的方法----添加一个input,将给的关键字进行搜索,然后返回坐标,改变地图中心坐标。
    3. 改变中心坐标还有采用微信小程序自己的API(wx.chooseLocation),改变地图中心坐标。参考:微信小程序----map路线规划
    4. 高德地图提供API和微信小程序提供API的优劣:1、目前高德提供的API返回数据很快,最少目前比微信小程序自己的快很多;2、缺点也很明显就是由于是外部提供的,所以需要进行对应配置,麻烦;3、微信小程序提供的API优势就是属于本身,不用额外配置,如果以后优化了,更好。
      实例:

    用高德地图提供的 getInputtips 接口,搜索关键字和城市,返回的坐标,然后改变地图中心坐标。

    // 页面加载以输入地址为地图的中心坐标
    // 假如输入的是:成都 欧尚庭院
    myAmap.getInputtips({
      keywords: '欧尚庭院',
      city: '成都',
      success(res) {
        var tip = res.tips[0];
        var lo = tip.location.split(',')[0];
        var la = tip.location.split(',')[1];
    
        _this.setData({
          latitude: la,
          longitude: lo,
          location: tip.location,
          markers: [{
            id: 0,
            latitude: la,
            longitude: lo,
            iconPath: '../../src/images/ding.png',
            width: 32,
            height: 32
          }]
        })
      }
    })
    

    WXRUI体验二维码

    WXRUI体验码

    如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

    其他

    我的博客,欢迎交流!

    我的CSDN博客,欢迎交流!

    微信小程序专栏

    前端笔记专栏

    微信小程序实现部分高德地图功能的DEMO下载

    微信小程序实现MUI的部分效果的DEMO下载

    微信小程序实现MUI的GIT项目地址

    微信小程序实例列表

    前端笔记列表

    游戏列表

    展开全文
  • 打开微信web开发者工具,扫码登录,新建小程序,输入APPID,勾选创建quick start项目。 工程结构可以看到工程根目录中有个app.js,这里可以定义全局变量,通过getApp()获取。 项目中有了一些示例,已经有了获取用户...
  • sourceMap是什么 在前端开发过程中代码难免会有错误,即便是再小心,也有可能出现 Cannot read property 'xxx' of null 这样的低级失误,debug自然是家常便饭。如何使用chorme的控制台进行debug也有许多技巧,但本文...
  • 在微信小程序中,我们可以很方便的通过API接口来获取我们当前的位置,接下来我讲告诉大家微信获取定位的API—wx.getLocation的用法,以及我们通过获取定位,得到当地的位置,天气等信息。 ...
  • 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中。 感谢: 感谢Lrj_estranged指出问题! 效果图 实现原理 1. ...
  • 微信小程序实时获取实时定位,并把定位的坐标保存在数据库,方便后续使用 微信小程序实时获取实时定位,并把定位的坐标保存在数据库,方便后续使用 微信小程序实时获取实时定位,并把定位的坐标保存在数据库,方便...
  • 微信小程序map地图

    2021-03-29 20:34:48
    微信小程序地图操作比较简单,api也很少,使用map组件来展示。说到地图,那就先来看基础定位:  定位用到wx.getLocation(OBJECT)函数,代码如下:   wx.getLocation({ type: 'wgs84', success: function(res) { ...
  • 微信小程序获取当前位置 地图定位导航-详细代码 介绍说明https://blog.csdn.net/guochanof/article/details/90130871
  • 今天做到地图定位的模块.模拟器肯定是获取不到位置的.下面为真机测试结果. 上图: 经纬度不说了.定位用的,我这里直接输入的数字定位.但是有许多问题 下图中scale是缩放比例,这个属性目前无效.后期微信团队...
  • info.length,undefined.length肯定报错,与小程序后台报错undefined is not an object (evaluating \'i.length\')也是相匹配的 微信开发者工具下载的 sourcemaps 怎么用【官方解释,可以了解下】 ...
  • 小程序地图 位置搜索 定位 导航
  • 支付宝小程序map地图

    千次阅读 2020-12-22 15:07:30
    我这里使用的mpvue去开发的支付宝小程序,这里记录下使用map地图的过程 <map id="map" :longitude="lon" :latitude="lat" :polyline="polyline" :markers="markers" class="map" > </map> 首先...
  • map组件标点总是无法显示,初始位置定在非洲,因为腾讯地图没有覆盖非洲,不缩小就是个大白块 <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}...
  • 1、定位用到wx.getLocation函数,地图使用map组件,详细教程参照官网; 注意事项:在给经度 和纬度赋值时,千万不能赋错; 2、先看下效果图: 3、在wxml页面定义map组件,包含longitude、latitude、markers、...
  • 微信小程序map组件在mpvue中的实践

    千次阅读 2018-12-27 09:55:51
    map组件在mpvue中的实践 MAP组件文档地址 &lt;map name="map-zsb" id="map-zsb" class="map-zsb" scale="18" 缩放比例,默认16取值范围5-18 :latitude="lat&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 89,323
精华内容 35,729
关键字:

小程序map定位