精华内容
下载资源
问答
  • 小程序之map组件.zip

    2020-04-17 15:44:58
    小程序之map组件 代码:<map id="myMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" show-location="true"> 仅学习演示 </map>
  • 主要介绍了微信小程序使用map组件实现路线规划功能,结合具体实例形式分析了微信小程序基于map组件的地理位置获取、路径规划等相关操作技巧,需要的朋友可以参考下
  • 主要介绍了微信小程序map组件结合高德地图API实现wx.chooseLocation功能,结合实例形式分析了map组件调用高德地图API接口获取地理位置提示列表并返回location相关操作技巧,需要的朋友可以参考下
  • 本文实例讲述了微信小程序使用map组件实现检索(定位位置)周边的POI功能。分享给大家供大家参考,具体如下: 声明 bug: 页面顶部分类【汽车服务、汽车销售等】列表和页脚的详细地址在真机测试是会出现不显示问题? ...
  • 微信小程序map组件

    2018-08-10 13:06:36
    微信小程序实现map组件 微信开发者工具 微信小程序实现map组件 微信开发者工具
  • 从我自己开发的微信小程序中提取的一个简单demo,代码很简单,主要是通过map组件和相关api及sdk完成的功能,能够进行定位,和检索周边,真机测试可行
  • 这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先 npm install -S vue-amap 然后在 main.js ...
  • 使用wepy框架,请求回来的数据设置给data里面初始化的markers,使用wx:if在拿到数据后渲染map组件,模拟器上没问题,真机上map组件渲染不出来   本主题由 Rolan 于 2018-10-12 14:17 审核通过       (此图片...
  • 微信小程序开发-排队取号,map组件使用案例源码.zip
  • uniapp 地图Map组件

    千次阅读 2021-03-04 22:31:15
    uniapp 地图组件mapAPI地址: https://uniapp.dcloud.io/component/map 注意官方的话,很重要: 地图组件用于展示地图,而定位API只是获取坐标,请勿混淆两者。 地图组件用于展示地图,而定位API只是获取坐标,...

    需求:在地图上标注用户当前位置,并显示位置信息。

    设计图:

    思路:

    uniapp 地图组件mapAPI地址:

    https://uniapp.dcloud.io/component/map

    注意官方的话,很重要:

    地图组件用于展示地图,而定位API只是获取坐标,请勿混淆两者。

    地图组件用于展示地图,而定位API只是获取坐标,请勿混淆两者。

    地图组件用于展示地图,而定位API只是获取坐标,请勿混淆两者。

    啥意思呢 ?就是地图组件只是负责展示地图,不负责获取坐标,要额外去获取坐标和地理位置。当时没看懂,百度了很久很久很久很久,才知道地图和定位,是分开的两个功能。

     

    1.首先,展示地图 (官方代码)

    <template>
        <view>
            <view class="page-body">
                <view class="page-section page-section-gap">
                    <map style="width: 100%; height: 300px;" 
                        :latitude="latitude" 
                        :longitude="longitude" 
                        :markers="covers"
                    >
                    </map>
                </view>
            </view>
        </view>
    </template>
    export default {
        data() {
            return {
                id:0, // 使用 marker点击事件 需要填写id
                title: 'map',
                latitude: 39.909,
                longitude: 116.39742,
                covers: [{
                    latitude: 39.909,
                    longitude: 116.39742,
                    iconPath: '../../../static/location.png'
                }]
            }
        },
        methods: {}
    }

     

    2.  markers 标记点数据covers 、中心经度longitude 、中心纬度latitude都是写死的,需要动态获取当前用户的定位。

    获取定位的方法: 

     uni.getLocation(OBJECT)  

    https://uniapp.dcloud.io/api/location/location?id=getlocation

    uni.getLocation({
            /* 
              map组件默认为国测局坐标gcj02,
              调用 uni.getLocation返回结果传递给组件时,需指定 type 为 gcj02 
            */
            type: "gcj02",
            altitude: true,
            geocode: true, 
            success: (e) => {
    
              // 定位得到的经纬度 
              let longitude = e.longitude
              let latitude = e.latitude
    
              // 设置中心经纬度
              this.longitude = longitude
              this.latitude = latitude
    
              // 画出定位位置
              this.covers[0] = {
                longitude,
                latitude, 
                iconPath: "../../static/baseIcon/dingwei.png",
              }
    
              /* 抛出获取到地址的省市区数据 */ 
              let address = e.province + e.city + e.street + e.streetNum + e.poiName         
              
            }
          })

    所有代码:

    <!-- 地图组件,不是定位组件 -->
    
    <template>
      <view class="general-map-contain">
        <map
          style="width: 100%; height: 400rpx"
          :latitude="latitude"
          :longitude="longitude"
          :markers="covers"
        />
      </view>
    </template>
    
    <script> 
    export default {  
      data() {
        return {
          // 中心纬度
          latitude: '',
          // 中心经度
          longitude: '',
          // 标记点
          covers: [],
        }
      },
      mounted() {
        this.$nextTick(() => {
          // 进入页面,获取用户经纬度地址
          this.getMyLocation();
        });
      },  
      methods: {
        
        getMyLocation() {      
          uni.getLocation({
            /* 
              map组件默认为国测局坐标gcj02,
              调用 uni.getLocation返回结果传递给组件时,需指定 type 为 gcj02 
            */
            type: "gcj02",
            altitude: true,
            geocode: true,  {
            success: (e) => {
               // 中心经纬度
               this.longitude = longitude
               this.latitude = latitude
    
               
              console.log('定位所有数据:',e) 
              let longitude = e.longitude
              let latitude = e.latitude
              
              // 标注定位位置
              this.covers[0] = {
                longitude,
                latitude, 
                iconPath: "../../static/baseIcon/dingwei.png",
              }
    
              /* 地址的省市区具体信息 */ 
              let address = e.province + e.city + e.street + e.streetNum + e.poiName         
              
            }
          })
        }
      }
    }
    </script>

     

     

     

     

     

     

     

     

    展开全文
  • 此外必须引用的Map组件外,我们目前提供了最常用的10个地图组件,能满足大部分简单的业务场景;如果你有更复杂的需求,或者找到替代提供的组件功能不够,你完全可以自定义一个地图组件,然后根据高德原生API做高德...
  • 本文实例讲述了微信小程序使用map组件实现解析经纬度功能。分享给大家供大家参考,具体如下: 声明 bug: 页脚的详细地址在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比...
  • UNIAPP MAP组件

    2020-09-24 18:21:48
    UNIAPP MAP组件 在APP里面用了用了uniapp的map组件后,覆盖所有层级。 这时候如果想在map地图上面加一些搜索框之类的 就要用到 uniapp 里面的subnvue subnvue 的层级是最高的,所以注意Vue页面里面有tab 的时候嵌套...

    UNIAPP MAP组件

    在APP里面用了用了uniapp的map组件后,覆盖所有层级。
    这时候如果想在map地图上面加一些搜索框之类的 就要用到 uniapp 里面的subnvue

    在这里插入图片描述

    subnvue 的层级是最高的,所以注意Vue页面里面有tab 的时候嵌套了几个组件,这时候要注意了,尽量避免。
    uniapp 提供了方法可以隐藏subnvue
    比如:const myBarVue = uni.getSubNVueById(‘myBar’);
    myBarVue.hide()
    nvue不能用阴影如图:所以CSS记得删掉阴影在这里插入图片描述

    展开全文
  • 说起微信小程序的map组件,可以说是良心之作了,一个组件解决了所以接入地图的所有麻烦,但是在实际小程序的试用过程中还是存在点问题的。 如下情景: 刚开始接入map组件的时候是在微信开发工具的模拟器上预览的,...
  • 微信小程序-map组件

    千次阅读 2019-03-17 11:41:58
    小程序中的map组件 :官方文档中的map介绍 登录“微信小程序”,在小程序后台中,“开发”-&gt;“开发者工具”-&gt;“腾讯位置服务”申请开通。具体步骤参考 《小程序个性地图使用指南》 小程序个性地图...

    在小程序中使用个性化地图

    小程序中的map组件 :官方文档中的map介绍

    登录“微信小程序”,在小程序后台中,“开发”->“开发者工具”->“腾讯位置服务”申请开通。具体步骤参考 《小程序个性地图使用指南》

    小程序个性地图的设置参考: 小程序Javascript SDK。在此获取 qqmap-wx-jssdk.min.js 文件。

    遇到的问题

    微信小程序的map组件的层级是最高的,当你希望在map 组件之上显示其他的标签,在模拟器上是可以的,但是显示在手机上,就只有map组件了。不是没有渲染,而是被map组件覆盖了, 因为在小程序中,map组件的优先级是最高的,即使你使用了 z-index 也无济于事。

    解决方法:

    微信小程序为我们提供了 cover-view 组件,可覆盖的原生组件有 map , video ,canvas , camera ,live-player , live-pusher。

    当把标签换为 cover-view 后,的确能显示在 map 组件之上。但是当需求是希望在map组件上显示一个 搜索框 时,问题又来了。因为在 cover-view 中只支持嵌套 cover-view ,cover-image ,button。

    而希望显示 input ,会报如下错误:

    解决思路:

    在 cover-view 下写 input 标签。

    将 cover-view 的高度和 input 的高度相同(假如为50px),在为 input 设置 margin-top:50px(即 cover-view 和 input 的高度),这样就会显示重叠的效果。

    将 cover-view 标签中的内容和 input 中的 value 值进行绑定,即使用同一个数据,这样当用户输入需要搜素的地方时,这两个标签的内容就会同步。 

    关键代码:

    .wxml

    <cover-view id='searchDiv'>
      <!-- 输入框,通过将 cover-view 中的内容和 input 标签的 value 设置相同的数据实现 -->
      <cover-view  bindtap='tapInput'>
        <cover-view class='text'>{{key || "搜周边"}}</cover-view>
        <input type="text" class='search_input' wx:value="{{key}}" placeholder='搜周边' focus='{{inputFocus}}' confirm-type="done" bindinput="set_key" bindblur='blurInput'/>
      </cover-view>
      <!-- 搜索图片 -->
      <cover-view  catchtap='search_key' class='search_icon' >
        <cover-image src='/images/map/search.png'></cover-image>
      </cover-view>
    </cover-view>

    .wxss

    #searchDiv{
      top: 5px;
      width: 80%;
      margin: 0 10%;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 5px;
      box-shadow: 0px 0px 5px #E0E3E4; 
      position: fixed;
    }
    #searchDiv .text,#searchDiv .search_input,#searchDiv .search_icon{
      height: 50px;
      line-height: 50px;
    }
    #searchDiv .text{
      margin-left: 20px;
    }
    #searchDiv .search_input{
      margin-left: 20px;
      /* 使视觉上和text保持一致 */
      margin-top: -50px;
    }
    #searchDiv .search_icon{
      display: inline-block;
      top: 0;
      position: absolute;
      right: 0px;
    }
    #searchDiv .search_icon cover-image{
      width: 30px;
      height: 30px;
      padding: 10px;
    }

     .js

    tapInput() {
      this.setData({
        // 为 input 设置获取焦点
        inputFocus: true
      });
    },
    // input 失去焦点后将 input 的输入内容给 cover-view
    blurInput(e) {
      this.setData({
        key: e.detail.value
      });
    }

    以上是自己练习时遇到的问题和解决方法,下面附上微信小程序调用 map 组件的完整代码。

    微信小程序调用 map 组件的完整代码

    map.wxml

    <view class='maps'>
      <map
        id="map"
        longitude="{{longt}}"
        latitude="{{lat}}"
        scale="16"
        controls="{{controls}}"
        bindcontroltap="controltap"
        markers="{{markers}}"
        bindmarkertap="markertap"
        polyline="{{polyline}}"
        bindregionchange="regionchange"
        show-location
        show-compass="true"
      ></map>
      
      <cover-view id='searchDiv'>
        <!-- 输入框,通过将 cover-view 的内容和 input 标签的value 绑定相同的 data 实现 -->
        <cover-view  bindtap='tapInput'>
          <cover-view class='text'>{{key || "搜周边"}}</cover-view>
          <input type="text" class='search_input' wx:value="{{key}}" placeholder='搜周边' focus='{{inputFocus}}' confirm-type="done" bindinput="set_key" bindblur='blurInput'/>
        </cover-view>
        <!-- 搜索图片 -->
        <cover-view  catchtap='search_key' class='search_icon' >
          <cover-image src='/images/map/search.png'></cover-image>
        </cover-view>
      </cover-view>
    </view>

    map.wxss

    #searchDiv{
      top: 5px;
      width: 80%;
      margin: 0 10%;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 5px;
      box-shadow: 0px 0px 5px #E0E3E4; 
      position: fixed;
    }
    #searchDiv .text,#searchDiv .search_input,#searchDiv .search_icon{
      height: 50px;
      line-height: 50px;
    }
    #searchDiv .text{
      margin-left: 20px;
    }
    #searchDiv .search_input{
      margin-left: 20px;
      /* 使视觉上和text保持一致 */
      margin-top: -50px;
    }
    #searchDiv .search_icon{
      display: inline-block;
      top: 0;
      position: absolute;
      right: 0px;
    }
    #searchDiv .search_icon cover-image{
      width: 30px;
      height: 30px;
      padding: 10px;
    }
    #map{
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
    }

    map.js

    // 引入SDK核心类
    var QQMapWX = require('../../utils/qqmap/qqmap-wx-jssdk.min.js');
    
    // 实例化API核心类
    var qqmapsdk = new QQMapWX({
      // 登录 小程序后台,在腾讯位置服务中获取 key ,并在此处的key值中写入你的key
      key: '...' // 必填
    });
    
    Page({
      data: {
        inputFocus: false,
        key:"",
        searchRes:[],
        longt: 114.68308,
        lat: 33.63497,
        markers: [ {
            iconPath: '/images/map/position.png',
            id: -1,
            latitude: 33.63497,
            longitude: 114.68308,
            width: 30,
            height: 30,
            title: '周口师范学院'
        }],
        polyline: [{
          points: [{
            longitude: 113.3245211,
            latitude: 23.10229
          }, {
            longitude: 113.324520,
            latitude: 23.21229
          }],
          color: '#FF0000DD',
          width: 2,
          dottedLine: true
        }]
      },
      regionchange(e) {
        // console.log(e.type)
      },
      markertap(e) {
        // console.log(e.markerId)
      },
      controltap(e) {
        // console.log(e.controlId)
      },
      set_key:function(e){
        this.setData({
          key: e.detail.value
        })
      },// 事件触发,调用接口
      search_key: function () {
        var _this = this;
        console.log(this.data.key);
        if (this.data.key == '' || this.data.key == "搜周边"){
          wx.showToast({
            icon: 'none',
            title: '请输入您要游览的地方'
          });
          return;
        }
        // 调用接口
        qqmapsdk.search({
          keyword: _this.data.key,  //搜索关键词
          location: '33.625607,114.64202',  //设置周边搜索中心点
          success: function (res) { //搜索成功后的回调
            if(res.data.length == 0){
              wx.showToast({
                icon:'none',
                title: '未搜索到您游览的地方'
              });
              return;
            }
            var mks = []
            for (var i = 0; i < res.data.length; i++) {
              mks.push({ // 获取返回结果,放到mks数组中
                title: res.data[i].title,
                id: res.data[i].id,
                latitude: res.data[i].location.lat,
                longitude: res.data[i].location.lng,
                iconPath: '/images/map/position.png', //图标路径
                width: 30,
                height: 30
              })
            }
            _this.setData({ 
              markers: mks, //设置markers属性,将搜索结果显示在地图中
              lat:mks[0].latitude, // 设置地图中心点的经纬度
              longt:mks[0].longitude
            })
          },
          fail: function (res) {
            if (res.data.length == 0) {
              wx.showToast({
                icon: 'none',
                title: '搜索失败'
              });
              return;
            }
          },
          complete: function (res) {
            console.log(res);
          }
        });
      },
      tapInput() {
        this.setData({
          // 为 input 设置获取焦点
          inputFocus: true
        });
      },
      // input 失去焦点后将 input 的输入内容给 cover-view
      blurInput(e) {
        this.setData({
          key: e.detail.value
        });
      }
    })

     

    展开全文
  • 在最初的开发上希望能够使用百度地图的SDK,但是uniapp在接入地图功能时和web端开发还是有很大区别的,uniapp提供了一个地图组件<map>,因为产品只涉及到APP端,这里使用的是高德地图的SDK(这也是官方的推荐...

    1、地图SDK的选择

    博主在使用uniapp开发地图功能之前,使用过百度地图的SDK开发web地图功能。在最初的开发上希望能够使用百度地图的SDK,但是uniapp在接入地图功能时和web端开发还是有很大区别的,uniapp提供了一个地图组件<map>,因为产品只涉及到APP端,这里使用的是高德地图的SDK(这也是官方的推荐)

    注:在真机调试时,APP端的<map>组件使用的就是高德地图,配置其他的SDK会在打包后使用

    2、不同页面文件选择

    使用uniapp进行APP开发时,可以选择vue页面(后缀为.vue)和nvue页面(后缀为.nvue),<map>组件在两种页面中的差异就是层级问题,因为在开发地图功能时,往往需要在地图之上绘制一些其他内容:

    推荐仔细阅读:Uniapp的map组件介绍

    使用vue页面开发(存在层级问题)

    想要在map组件上添加其他内容:可以使用map组件中的的marker、control和uniapp中的<cover-view>标签;也可以使用subNvue,因为subNvue是原生的页面,和map组件不存在层级问题

    注意:uniapp的<cover-view>标签并不支持相互嵌套,在cover-view中能展示的内容非常有限,涉及到复杂的功能,推荐使用vue页面+subNvue混合开发

    使用nvue页面开发(不存在层级问题)
    使用nvue页面,需要将nvue页面和vue页面一样在pages.json中配置,在nvue页面中不存在层级问题,可以在map组件中随意嵌套标签,但是nvue页面参考的是weex框架,在布局上只支持flex布局,不支持添加阴影,支持的标签和CSS也有限,并不支持SCSS等CSS处理器

    推荐仔细阅读:Uniapp的nvue框架教程

    3、开发常见问题总结

    问题1:app在打包后地图不显示?

    app打包后地图不显示可能是在manifest.json中没有勾选map组件并配置高德地图或者百度地图的秘钥,这种情况下会出现包含地图的页面打开后地图区域显示为白色。

    问题2:使用map组件添加markers后不显示?

    这种情况通常是我们需要从后端获取定位点信息,将定位动态展示为地图上的marker,此时的markers绑定的数组是动态改变的,在改变markers绑定的数组后,需要对markers所绑定的数组进行重新赋值,例如:

    markers=[{
    	latitude: 获取的纬度,
    	longitude: 获取的经度,
    }]//每次都对markers重新赋值
    

    问题3:Android上的marker正常显示,但是ios上的marker不能显示?

    这种情况可能是markers在使用的时候没有配置id属性导致的(亲测),这里建议使用时可以参考Uniapp的hello-uniapp中的用法

    问题4:map组件的相关JS API使用无效?

    这种情况下,通过uni.createMapContext获取到了地图对象,但是使用相关的API却无效。我们使用map的页面必须是在pages.json配置,并且可以使用路由跳转的页面,否则就会导致相关的JS API使用无效,博主遇到此问题时,是在subNvue页面中使用了相关的JS API。

    ❤️❤️博主也是一个使用uniapp开发的小白,如有不对的地方,谢谢指正!❤️❤️

    展开全文
  • uniapp的map组件

    千次阅读 2020-09-18 16:59:49
    uni-app 地图使用的是腾讯地图 ...map style="width: 100%; height: 560px;" :controls="controls" :circles="circles" :polyline='polyline' :scale="scale" :latitude="latitude" :longitude="longitude" :m
  • uniapp 自定义map组件

    千次阅读 2020-02-25 21:09:52
    开发中uniapp的map组件无法选择本地之外的地区,所以要自定义组件,在uniapp中因为双向绑定会有问题所以,经过大佬指点做成如下 <template> <view class="card map_address"> <view class="mapBox...
  • uniapp nvue map组件

    千次阅读 2021-01-16 14:25:40
    Map组件功能使用uni.getLocation新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右...
  • 小程序map组件的使用

    千次阅读 2019-05-20 17:17:24
    做项目的过程中需要根据某一个坐标获取这个坐标附近的门店,使用到了map组件: 首先在选择门店的时候: 点击请选择安装门店,进入address.wxml文件中: address.js文件这样写: 首先在onReady(){}里面获取map上下文...
  • uniapp 踩坑Map组件

    千次阅读 2020-10-20 15:23:58
    map style="width: 100%; height:94vh;" :latitude="latitude" :longitude="longitude" :markers="marker" :scale='scale' :controls="controls" :circles="circles" :polyline="polyline"&
  • 通过map组件中的 markers 属性 设置标记点 用于在地图上显示标记的位置 1、想要动态改变标记点图标 必须把默认的标记点覆盖,用到了markers参数下的 iconPath设置标记点的图标,如果需求只需要简单的动态改变标记点...
  • 微信小程序:map组件

    千次阅读 2018-08-17 13:26:52
    今天上午终于开始接受map组件的挑战,我不滴不说我真的是很懒,好吧,也有点会拒绝困难,但如果真的需要,我也可以去学习去解决,大概我的身边缺少一个让我有动力的吧,别问我今天怎么就写了啊,我只是不想让自己...
  • map组件的@markertap事件,并且markers里面的每一项必须要有id,用于区分标注的点和性能优化 3、代码块 @markertap这个事件可以拿到market的id,与标注点数组的id相比较就可以拿到标注点的经纬度,至于怎么用可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 277,377
精华内容 110,950
关键字:

map组件