精华内容
下载资源
问答
  • 除本章节介绍的小程序地图基础属性外,腾讯位置服务推出《微信小程序解决方案》,从检索API、基础地图组件、个性化、插件、行业方案等多个层面,为不同场景需求的小程序开发者提供完整的地图能力。 个性化地图 个性...

    完整微信小程序(Java后端) 技术贴目录清单页面(必看)

    地图(v2.7.0 起支持同层渲染,相关api wx.createMapContext

    小程序解决方案

    除本章节介绍的小程序地图基础属性外,腾讯位置服务推出《微信小程序解决方案》,从检索API、基础地图组件、个性化、插件、行业方案等多个层面,为不同场景需求的小程序开发者提供完整的地图能力。

    个性化地图

    个性化地图样式是腾讯位置服务开放的一项高级能力,开发者可以根据自身产品的使用场景,UI风格, 选取或者创建风格匹配的地图样式。小程序内地图组件应使用同一 subkey,可通过 layer-style(位置服务官网设置的样式 style 编号)属性配置,并支持动态切换样式。 组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。详情见:个性化地图使用指南

    小程序插件

    腾讯位置服务基于微信提供的小程序插件能力,专注于(围绕)地图功能,打造一系列小程序插件,可以帮助开发者简单、快速的构建小程序,是您实现地图功能的最佳伙伴。目前插件提供路线规划、地铁图、地图选点服务,详情见:小程序地图插件使用指南

    地图检索

    腾讯位置服务在微信开放社区的服务平台上线了一系列地图检索服务,包含4个POI数据类(逆地址解析、地址解析、地点搜索、关键词输入提示)、2个路线规划类(驾车路线规划、步行路线规划)、1个坐标工具类(坐标转换),覆盖了绝大部分地图应用场景。或者登陆位置服务官网的Webservice使用指南了解详细介绍。 微信小程序开发者可以使用海外地图进行展示,若需要海外检索能力,可在海外位置服务进行申请。

    小程序示例中心

    包含Map组件、API、插件等功能使用方法,全面了解小程序下的所有地图能力。示例内容源码开放,降低各位开发者接入成本。

    img

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pA6Y15o8-1623278170717)(image-20210610055134026.png)]

    近期新增功能

    1. 支持点聚合,适用于marker过多场景。
    2. 支持彩虹蚯蚓线,常用于路线规划场景。
    3. 覆盖物支持调整与其它地图元素的压盖关系。
    4. 支持marker(小车)平移动画,适用于轨迹回放场景。

    地图基础属性

    属性类型默认值必填说明最低版本
    longitudenumber中心经度1.0.0
    latitudenumber中心纬度1.0.0
    scalenumber16缩放级别,取值范围为3-201.0.0
    min-scalenumber3最小缩放级别2.13.0
    max-scalenumber20最大缩放级别2.13.0
    markersArray. 标记点1.0.0
    coversArray.即将移除,请使用 markers1.0.0
    polylineArray. 路线1.0.0
    circlesArray. 1.0.0
    controlsArray.控件(即将废弃,建议使用 cover-view 代替)1.0.0
    include-pointsArray.缩放视野以包含所有给定的坐标点1.0.0
    show-locationbooleanfalse显示带有方向的当前定位点1.0.0
    polygonsArray. 多边形2.3.0
    subkeystring个性化地图使用的key2.3.0
    layer-stylenumber1个性化地图配置的 style,不支持动态修改
    rotatenumber0旋转角度,范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角2.5.0
    skewnumber0倾斜角度,范围 0 ~ 40 , 关于 z 轴的倾角2.5.0
    enable-3Dbooleanfalse展示3D楼块(工具暂不支持)2.3.0
    show-compassbooleanfalse显示指南针2.3.0
    show-scalebooleanfalse显示比例尺,工具暂不支持2.8.0
    enable-overlookingbooleanfalse开启俯视2.3.0
    enable-zoombooleantrue是否支持缩放2.3.0
    enable-scrollbooleantrue是否支持拖动2.3.0
    enable-rotatebooleanfalse是否支持旋转2.3.0
    enable-satellitebooleanfalse是否开启卫星图2.7.0
    enable-trafficbooleanfalse是否开启实时路况2.7.0
    enable-poibooleantrue是否展示 POI 点2.14.0
    enable-buildingboolean是否展示建筑物2.14.0
    settingobject配置项2.8.2
    bindtapeventhandle点击地图时触发,2.9.0起返回经纬度信息1.0.0
    bindmarkertapeventhandle点击标记点时触发,e.detail = {markerId}1.0.0
    bindlabeltapeventhandle点击label时触发,e.detail = {markerId}2.9.0
    bindcontroltapeventhandle点击控件时触发,e.detail = {controlId}1.0.0
    bindcallouttapeventhandle点击标记点对应的气泡时触发e.detail = {markerId}1.2.0
    bindupdatedeventhandle在地图渲染更新完成时触发1.6.0
    bindregionchangeeventhandle视野发生变化时触发,2.3.0
    bindpoitapeventhandle点击地图poi点时触发,e.detail = {name, longitude, latitude}2.3.0
    bindanchorpointtapeventhandle点击定位标时触发,e.detail = {longitude, latitude}2.13.0

    regionchange 返回值

    视野改变时,regionchange 会触发两次,返回的 type 值分别为 begin 和 end。

    2.8.0 起 begin 阶段返回 causedBy,有效值为 gesture(手势触发) & update(接口触发)

    2.3.0 起 end 阶段返回 causedBy,有效值为 drag(拖动导致)、scale(缩放导致)、update(调用更新接口导致)。

    e = {causedBy, type, detail: {rotate, skew, scale, centerLocation, region}}
    

    setting

    提供 setting 对象统一设置地图配置。同时对于一些动画属性如 rotateskew,通过 setData 分开设置时无法同时生效,需通过 settting 统一修改。

    // 默认值
    const setting = {
      skew: 0,
      rotate: 0,
      showLocation: false,
      showScale: false,
      subKey: '',
      layerStyle: 1,
      enableZoom: true,
      enableScroll: true,
      enableRotate: false,
      showCompass: false,
      enable3D: false,
      enableOverlooking: false,
      enableSatellite: false,
      enableTraffic: false,
    }
    
    this.setData({
      // 仅设置的属性会生效,其它的不受影响
      setting: {
        enable3D: true,
        enableTraffic: true
      }
    })
    

    marker

    标记点用于在地图上显示标记的位置

    属性说明类型必填备注最低版本
    id标记点 idnumbermarker 点击事件回调会返回此 id。建议为每个 marker 设置上 number 类型 id,保证更新 marker 时有更好的性能。
    clusterId聚合簇的 idNumber自定义点聚合簇效果时使用
    joinCluster是否参与点聚合Boolean默认不参与点聚合
    latitude纬度number浮点数,范围 -90 ~ 90
    longitude经度number浮点数,范围 -180 ~ 180
    title标注点名string点击时显示,callout存在时将被忽略
    zIndex显示层级number2.3.0
    iconPath显示的图标string项目目录下的图片路径,支持网络路径、本地路径、代码包路径(2.3.0
    rotate旋转角度number顺时针旋转的角度,范围 0 ~ 360,默认为 0
    alpha标注的透明度number默认 1,无透明,范围 0 ~ 1
    width标注图标宽度number/string默认为图片实际宽度
    height标注图标高度number/string默认为图片实际高度
    callout标记点上方的气泡窗口Object支持的属性见下表,可识别换行符。1.2.0
    customCallout自定义气泡窗口Object支持的属性见下表
    label为标记点旁边增加标签Object支持的属性见下表,可识别换行符。1.2.0
    anchor经纬度在标注图标的锚点,默认底边中点Object{x, y},x 表示横向(0-1),y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点1.2.0
    aria-label无障碍访问,(属性)元素的额外描述string2.5.0

    marker 上的气泡 callout

    属性说明类型最低版本
    content文本string1.2.0
    color文本颜色string1.2.0
    fontSize文字大小number1.2.0
    borderRadius边框圆角number1.2.0
    borderWidth边框宽度number2.3.0
    borderColor边框颜色string2.3.0
    bgColor背景色string1.2.0
    padding文本边缘留白number1.2.0
    display‘BYCLICK’:点击显示; ‘ALWAYS’:常显string1.2.0
    textAlign文本对齐方式。有效值: left, right, centerstring1.6.0
    anchorX横向偏移量,向右为正数number2.11.0
    anchorY纵向偏移量,向下为正数number2.11.0

    marker 上的自定义气泡 customCallout

    customCallout 存在时将忽略 callouttitle 属性。自定义气泡采用采用 cover-view 定制,灵活度更高。

    属性说明类型最低版本
    display‘BYCLICK’:点击显示; ‘ALWAYS’:常显string2.12.0
    anchorX横向偏移量,向右为正数number2.12.0
    anchorY纵向偏移量,向下为正数number2.12.0

    使用方式如下,map 组件下添加名为 calloutslot 节点,其内部的 cover-view 通过 marker-id 属性与 marker 绑定。当 marker 创建时,该 cover-view 显示的内容将作为 callout 显示在标记点上方。

    <map>
      <cover-view slot="callout">
        <cover-view marker-id="1"></cover-view>
        <cover-view marker-id="2"></cover-view>
      </cover-view>
    </map>
    

    示例DEMO: https://developers.weixin.qq.com/s/cZWIojm47pjN

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FePZz5Vw-1623278170721)(image-20210610055211178.png)]

    marker 上的气泡 label

    属性说明类型最低版本
    content文本string1.2.0
    color文本颜色string1.2.0
    fontSize文字大小number1.2.0
    xlabel的坐标(废弃)number1.2.0
    ylabel的坐标(废弃)number1.2.0
    anchorXlabel的坐标,原点是 marker 对应的经纬度number2.1.0
    anchorYlabel的坐标,原点是 marker 对应的经纬度number2.1.0
    borderWidth边框宽度number1.6.0
    borderColor边框颜色string1.6.0
    borderRadius边框圆角number1.6.0
    bgColor背景色string1.6.0
    padding文本边缘留白number1.6.0
    textAlign文本对齐方式。有效值: left, right, centerstring1.6.0

    点聚合

    当地图上需要展示的标记点 marker 过多时,可能会导致界面上 marker 出现压盖,展示不全,并导致整体性能变差。针对此类问题,推出点聚合能力。

    使用流程如下:

    1. MapContext.initMarkerCluster 对聚合点进行初始化配置(可选);
    2. MapContext.addMarkers 指定参与聚合的 marker;
    3. MapContext.on('markerClusterCreate', callback) 触发时,通过 MapContext.addMarkers 更新聚合簇的样式 (可选);
    4. MapContext.removeMarkers 移除参与聚合的 marker;

    示例代码

    在开发者工具中预览效果

    需注意的是:

    1. 地图上的 marker 分为普通的 marker 与参与聚合的 marker,参与聚合时需指定属性 joinCluster 为 true;
    2. 自定义聚合簇样式时,同样通过 MapContext.addMarkers 进行绘制,此时需携带 clusterId。

    polyline

    指定一系列坐标点,从数组第一项连线至最后一项。绘制彩虹线时,需指定不同分段的颜色,如 points 包含 5 个点,则 colorList 应传入 4 个颜色值;若 colorList 长度小于 points.length - 1,则剩下的分段颜色与最后一项保持一致。

    属性说明类型必填备注最低版本
    points经纬度数组array[{latitude: 0, longitude: 0}]
    color线的颜色string十六进制
    colorList彩虹线array存在时忽略 color 值2.13.0
    width线的宽度number
    dottedLine是否虚线boolean默认 false
    arrowLine带箭头的线boolean默认 false,开发者工具暂不支持该属性1.2.0
    arrowIconPath更换箭头图标string在 arrowLine 为 true 时生效1.6.0
    borderColor线的边框颜色string1.2.0
    borderWidth线的厚度number1.2.0
    level压盖关系string默认为 abovelabels2.14.0

    level 字段表示与其它地图元素的压盖关系,可选值如下:

    说明最低版本
    abovelabels显示在所有 POI 之上2.14.0
    abovebuildings显示在楼块之上 POI 之下2.14.0
    aboveroads显示在道路之上楼块之下2.14.0

    polygon

    指定一系列坐标点,根据 points 坐标数据生成闭合多边形

    属性说明类型必填备注最低版本
    points经纬度数组array[{latitude: 0, longitude: 0}]2.3.0
    strokeWidth描边的宽度number2.3.0
    strokeColor描边的颜色string十六进制2.3.0
    fillColor填充颜色string十六进制
    zIndex设置多边形Z轴数值number2.3.0
    level压盖关系string默认为 abovelabels2.14.0

    circle

    在地图上显示圆

    属性说明类型必填备注
    latitude纬度number浮点数,范围 -90 ~ 90
    longitude经度number浮点数,范围 -180 ~ 180
    color描边的颜色string十六进制
    fillColor填充颜色string十六进制
    radius半径number
    strokeWidth描边的宽度number
    level压盖关系string默认为 abovelabels

    control

    在地图上显示控件,控件不随着地图移动。即将废弃,请使用 cover-view

    属性说明类型必填备注
    id控件idnumber在控件点击事件回调会返回此id
    position控件在地图的位置object控件相对地图位置
    iconPath显示的图标string项目目录下的图片路径,支持本地路径、代码包路径
    clickable是否可点击boolean默认不可点击

    position

    属性说明类型必填备注
    left距离地图的左边界多远number默认为0
    top距离地图的上边界多远number默认为0
    width控件宽度number默认为图片宽度
    height控件高度number默认为图片高度

    bindregionchange 返回值

    属性说明类型备注
    type视野变化开始、结束时触发string视野变化开始为begin,结束为end
    causedBy导致视野变化的原因string拖动地图导致(drag)、缩放导致(scale)、调用接口导致(update)

    比例尺

    scale34567891011
    比例1000km500km200km100km50km50km20km10km5km
    scale121314151617181920
    比例2km1km500m200m100m50m50m20m10m

    示例代码

    在开发者工具中预览效果

    微信搜一搜【java1234】关注这个放荡不羁的程序员,关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

    展开全文
  • 微信小程序地图组件

    千次阅读 2019-08-23 07:36:35
    index.wxml <map id="map" markers="{{markers}}" longitude="{{longitude}}" latitude="{{latitude}}" scale="25" circles="{{circles}}" show-location="{{true}}" bindmarkertap="marker">...

    index.wxml

    <map id="map" markers="{{markers}}" longitude="{{longitude}}" latitude="{{latitude}}" scale="25"  circles="{{circles}}" show-location="{{true}}" bindmarkertap="marker"></map>

    index.js

    Page({
      data: {
        latitude:30.,
        longitude:114.,
        circles:[{
          latitude: 30.,
          longitude: 114.,
          fillColor:"#8DE25055",
          radius:30
        }],
        markers: [{
          iconPath: "/images/icon/map.png",
          latitude: 30.,
          longitude: 114.,
          width: 30,
          height: 30,
          title:"",
          id:0,
          label:{
            content:"",
            color:"#EE5E7B",
            borderWidth:1,
            borderColor:"#EE5E78",
            borderRadius:5,
            padding:5,
          },
          callout:{
            content:"",
            color:"#EE5E7B",
            borderWidth:1,
            borderColor:"#EE5E78",
            borderRadius:5,
            padding:5,
          }
        }],
      },
      marker(){
        
      }
    })

    若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

    请点赞!因为你们的赞同/鼓励是我写作的最大动力!

    欢迎关注达叔小生的简书!

    这是一个有质量,有态度的博客

    博客

    展开全文
  • 问题:如何去除微信小程序地图组件的iconPath配置? 如果iconPath填写为none,在安卓真机、开发者工具均无问题,iphone真机上会显示地图自带的标记点,控制台也会报错没有这个图片资源。 解决:用透明的背景图片...

    问题:如何去除微信小程序地图组件的iconPath配置?

    如果iconPath填写为none,在安卓真机、开发者工具均无问题,iphone真机上会显示地图自带的标记点,控制台也会报错没有这个图片资源。

    解决:用透明的背景图片解决即可。

    展开全文
  • 微信小程序地图组件使用详情

    万次阅读 2018-07-23 12:30:18
    介绍下微信小程序内使用地图组件(这里只介绍小程序前端功能) 直接看代码吧 wxml <view class="section map_container"> <map id="loactionMap" longitude="{{longitude}}" latitude="{{latitude}}" ...

    目前开发微信小程序的越来越多,周边也有很多小程序案例,

    介绍下微信小程序内使用地图组件(这里只介绍小程序前端功能)

    直接看代码吧

    wxml

    <view class="section map_container">
      <map id="loactionMap" longitude="{{longitude}}" latitude="{{latitude}}" scale="17" show-location="true" style="width: {{mapWidth}}px; height: {{mapHeight}}px;" bindregionchange="regionChange">
        <cover-view class="controls-center" style="bottom:{{mapHeight/2}}px;left:{{mapWidth/2 - 14}}px;">
          <cover-image class="location-center-img" src="/images/marker_red.png" />
        </cover-view>
    
        <cover-view class="controls-address-panel" style="bottom:0px;left:0px;">
          <cover-view class="map_text">
            <cover-view>
              <cover-view class="address-name">{{textData.name}}</cover-view>
              <cover-image wx:if="{{searchLoadingStatus==1}}" 
              class="cover-image-loading" src="/images/goLoad.gif" />
            </cover-view>
            <cover-view class="address-desc">{{textData.desc}}</cover-view>
          </cover-view>
        </cover-view>
      </map>
    </view>

     

    Page({
      data: {
        mapCtx: null,
        mapWidth: 200,
        mapHeight: 200,
        longitude: 114.0322103,
        latitude: 22.5353646,
        markers: [],
        textData: { name: '', desc: '' },
        //0:加载完成  1:加载中
        searchLoadingStatus: 0,
        //当前选中纬度信息
        currentLocationInfo: {
          longitude: 0,
          latitude: 0
        }
      },
      regionChange: function (e) {
        var that = this;
        var changeType = e.type;
      },
      amapGetRegeo: function (longitude, latitude) {
        var that = this;
        myAmapFun.getRegeo({
          location: longitude + ',' + latitude,
          success: function (data) {
            if (data != null && data.length > 0) {
              that.setData({
                textData: {
                  name: data[0].desc,
                  desc: data[0].regeocodeData.formatted_address
                },
                currentLocationInfo: {
                  longitude: longitude,
                  latitude: latitude
                }
              });
              //console.log(that);
            }
            that.setData({
              searchLoadingStatus: 0
            });
          }
        })
      },
      onReady: function (e) {
        var that = this;
        // 使用 wx.createMapContext 获取 map 上下文
        that.mapCtx = wx.createMapContext('loactionMap', this);
      },
      onLoad(options) {
        var that = this;
    
        that.authorAddress();
        that.setMapSize();
        that.getShareLocation(options);
      },
      //用户地理位置授权
      authorAddress:function(){
        var that = this;
        that.getCurrentLocation('gcj02', function (res) {
          console.log(res);
          that.setData({
            longitude: res.longitude,
            latitude: res.latitude
          });
        });
      },
      //初始化当前位置
      getCurrentLocation: function (typeCode, succFun) {
        var that = this;
        wx.getLocation({
          type: typeCode,
          success: function (res) {
            return succFun(res);
          },
          fail:function(res){
            wx.openSetting({
              success: function (data) {
                console.log(4444)
                console.log(data);
                that.authorAddress();
              },
              fail: function () {
                console.info("设置失败返回数据");
              }
            });
          }
        })
      }
    });
    

    wxss

    .map_text{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0px;
      height: 70px;
      background: #fff;
      padding: 0 10px;
    }
    .address-name{
      margin: 10px 0;
      font-size:35rpx;
      font-weight: bold;
      float: left;
    }
    .address-desc{
      margin: 5px 0;
      display: block;
      font-size:26rpx;
    }
    .controls {
      position: absolute;
      width: 100rpx;
      bottom: 150rpx;
      right:10rpx;
    }
    
    .controls-center{
      position: absolute;
      width: 30px;
    }
    .controls-center-add{
      position: absolute;
      width: 33px;
    }
    
    .controls-address-panel{
      position: absolute;
      width: 100%;
      height:80px;
    }
    
    .cover-image-loading{
      width:15px;
      height:15px;
      float:left;
      padding-top:12px;
      padding-left:5px; 
    }
    
    .favorite-img {
      width: 100rpx;
      height: 100rpx;
    }

    小程序成品预览

    不清楚的地方可以加我微信

     

     

    展开全文
  • 微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败) 最近无论AR还是微信小程序都是炒的火热。微信小程序的特点便是“无需安装,用完即走”,而我们所说的AR用在小程序上面感觉再适合不过了。...
  • 关于微信小程序地图组件里面运用input的方法 很多人在做项目的时候不可避免的会遇到如图这样的需求,这种是很常见的一种,这种地图上面加一个表单,看起来就给人一种高达上的感觉,尽管他不一定真的有用,不一定真的...
  • 1.「微信小程序」实现获取当前位置并在地图上显示 http://blog.csdn.net/crazy1235/article/details/55004841 2.微信小程序地图功能 http://blog.csdn.net/crazy1235/article/details/55004841 前端开发,Java
  • --地图组件--> <map id="myMap" style="width:100vw;height:100vh;z-index:1" markers="{{markers}}"></map> markers = { iconPath: ...
  • 在做一个通过腾讯地图api查询关键词搜索附近标记的小程序时遇到了这个问题 在这个事件触发时,会一直重复触发,你不动时地图他还是一直在触发 后来调试之后发现是我在bindupdated触发的函数内修改了地图的...
  • map组件标点总是无法显示,初始位置定在非洲,因为腾讯地图没有覆盖非洲,不缩小就是个大白块 <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}...
  • 拖动地图查看周围的美食店 这里要用到的函数 注意看这里官方给最低支持库是2.3.0 我看了下我的调试基础库是2.8.0,好的够了 二、坑码 <map id="myMap" class="map" markers="{{markers}}" style="width:100%;...
  • 1是主页面,点一下,进入2,可以看到地图底图上有墓地分布的点位,划拉划拉放大缩小,把缅甸那块放大了,可以看到墓地点位,随便点一个点位,浮出墓地名称“西保火车站墓地”,点国殇墓园那个五角星的符号,跳转到...
  • 今天使用地图中心定钉, 想要在移动后获得中心点位置, 发现使用bindregionchange获得结束点的位置是我手抬起来的时候的中心点位置, 地图因为惯性还会继续移动一些位置, 因此导致获得不到最终点。 因此在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,718
精华内容 3,087
关键字:

微信小程序地图组件

微信小程序 订阅