用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2017-2-24 19:08:54 天下雪原创达人 造轮子 人生巅峰 楼主 415887
本帖,将不断聚合全网关于map及地图组件的知识,以便大家能够集中查看;

官方地址:https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html
Bug & Tip
  • tip: map 组件是由客户端创建的原生组件,它的层级是最高的。
  • tip: 请勿在 scroll-view 中使用 map 组件。
  • tip: css 动画对 map 组件无效。


Q:map视野移动后,如何获取中心点的坐标?
A:获取map对象就可以了,wx.createMapContext(mapId)。创建并返回 map 上下文 mapContext 对象。
Q:map组件总是显示在最上层?
A:map 在真机上是用原生实现的,所以他的层级是最高的,你可以用 map 的controls。


相关跳坑指南:
跳坑《一百八十七》MAP地图markers使用问题相关说明
跳坑《一百八十八》MAP地图controls控件使用问题



相关demo:

github精选:微信小程序起手式DEMO仿肯德基实战
微信小程序demo:AirBike:类摩拜单车MAP地图使用
微信小程序学习用demo:Truck:基于map组件的找车源
微信小程序精品demo:美食城:map,扫码,tabbar,
微信小程序学习用demo推荐:排队取号;map组件使用
微信小程序学习用demo:SearchPOI,map,获取位置,标记位置
微信小程序学习用demo:地图功能,MAP组件
微信小程序demo:滴滴拉粑粑,地图api自定义覆盖物
微信小程序demo:地图功能,
微信小程序demo:精品天气预报;使用百度地图API
微信小程序demo开发教程:地图定位
微信小程序demo'推荐:天气预报;百度地图,BootStrap

微信小程序MAP学习用demo:共享雨伞:仿摩拜扫码开车

相关api:


相关文章:

微信小程序循环赋值坑
微信小程序之地图功能(map)
小程序基于Map组件实现路线规划
高德地图获取当前位置具体信息
map组件中,将控件放到底部的非完美解决方案
新手跳坑系列《四十》小程序地图和百度地图的坐标转换
微信小程序之map地图
微信小程序编写tabBar模板,map组件markers属性动态初始化
微信小程序开发——map地图组件,定位,并手动修改位置偏差。 ...
阿东入门系列《六》微信小程序map地图,页面跳转
微信小程序学习点滴《十》:真机测试 地图定位 map API 无法获取当前位置的问题 ... ...
微信小程序的百度地图获取地理位置
微信小程序之地图周边(使用百度地图接口)
摩拜单车微信小程序开发技术总结

相关讨论:
相关讨论一:
在android手机上缩放地图时,marker位置会变


相关讨论一:
小程序 地图API 能添加覆盖物吗
如题:
        小程序 地图API 能添加覆盖物吗
        js 有能添加覆盖物的 小程序 里面可以实现吗
使用marker吧,cover貌似不推荐使用,自己在上面家覆盖物是不行的,因为地图是原生的,会覆盖所以东西


相关讨论一:
地图 Android 真机卡死,微信崩溃
写了一个小的测试Demo ,在开发工具中没有任何问题,iphone6 上有一些地图的问题。 但是当我拿起android手机测试的时候,发现小程序启动,微信就会崩溃掉。
开发工具调试页面没有发现任何报错,
iphone手机启动微信没问题
Android小程序启动,微信卡死奔溃
找了好久终于找到问题了:::
1.png
地图的外层 如果view  的display 属性是none !
微信在Android 上马上崩溃!
IOS没问题

相关讨论一:
地图真机环境问题
  • 缩放等级无效
  • 地图中心点无效
  • marks的图片显示不出来,只会出现红色的标注(marks图片路劲无论相对路径,还是域名全部路径 ……(等等) 都试了)
  • 点击marks红色的标注,弹出一个带叹号的模框


1. 开发工具中的图片 。 一步到位!!!

1.jpg

2 真机测试  (刚进去缩放等级无效,定位在印度洋南部,图片有点大) iphone6 plus  

2.jpg 3.jpg 4.jpg 5.jpg

代码补充
6.png
我的用的是include ,
路径:   /image/xxx.png  以'/'开头表示小程序根目录,就不用理会Include
iconPath是要相对小程序目录的,不能用http这种形式

但是,在开发工具对iconPath 图片路劲没限制!一直被误导!!


相关讨论一:
地图能不能直接传入地址参数啊?经纬度很不方便啊,没有怎么办?比如我想用地图显示某个商家在哪里,像百度地图就可以直接传入该商家所在地址,就会在地图上显示出来
查到了,貌似可以用腾讯的地图API转:
http://apis.map.qq.com/ws/geocoder/v1/?address=


相关讨论一:
微信小程序请求百度地图LBS服务器端接口报错http://api.map.baidu.com/geosearch/v3/nearby?ak=wicz7Mlbzg0Ex6oGFFriiwcmyg80pdLZ&geotable_id=160643&page_size=50&radius=30000&location=113.664119,34.7542报不在一下合法域名中,但是不知道具体错误在哪?
  • 用https
  • 要在控制台添加允许域名的(貌似可以在开发工具临时关闭)
  • 考虑下用自家服务包住或者就走腾讯的?  百度的坐标体系应该不是gcj02,各种转换哦




相关讨论一:
map markers iconpath图标不显示 在引用腾讯地图map后android图标正常显示,但是苹果图标不显示,不知道什么问题
多半是坐标问题,通过腾讯api转换下坐标试试,我遇到过,转换后是可以的


相关讨论一:
在wx.ChooseLocation的回调函数没法使用this.setData
我想写一个用地图查询位置并记录位置的页面,在js文件:
Page({
    data:{  //定义经纬度数据
lat:null
longi:null
}
......
findlc: function(event){  //页面组件出发函数,点击一个组件会调用本函数
.....
wx.chooseLocation({  //调用地图的查询位置功能
      success: function(res){
        // success
        console.log(res.name)   //这里可以正常获取位置数据
        console.log(res.address)
        console.log(res.latitude)
       this.setData({   //但在这里就会报错,说没有setData方法
lat: res.latitude
longi:res.longitude
})


      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
}
})

在上面的findlc函数中,调用wx.chooseLocation,成功则回调success函数,此时this.setData()会报错,但是如果我把this.Data从wx.chooseLocation中移出到findlc函数下面,则可以正常运行,看现象,在wx.chooseLocation的回调函数中不能用this.setData来更新页面的初始数据。这是一个bug吗?
涉及到了闭包(对我来说,这个很难理解),我用下面的方法刚刚成功解决了:
findlc:function(event){
//增加下面一行,把page对象赋予一个临时变量that,
var that = this
......
  wx.chooseLocation({  //调用地图的查询位置功能
      success: function(res){

       that.setData({   //这样就不会报错了
           lat: res.latitude
           longi:res.longitude
        })
    }
})
}
貌似这样可以避免success回调函数错把this认作自己,从而爆出上面提到的函数不存在错误。这里that明确指明是page对象了。


相关讨论一:
苹果手机不能正常调用wx.openLocation登录后选择便民地图,选择一个目标机构,无法打开地图
调用wx.openLocation,安卓手机可以正常打开地图,苹果手机点击无反应。
使用调试方式在苹果手机上打印出信息,发现调用该api失败。
11.jpg 12.jpg
13.png 14.png
已解决。
苹果手机里似乎把组件上绑定的参数都当作字符串了,所以认为坐标点不正确,需要强制转换成number类型。

var lat  = e.target.dataset.lat;
改成
var lat  = Number(e.target.dataset.lat);


相关讨论一:
地图组建 的marker 是否可以显示除了图片以外的 内容(例如文字)/ 是否可以设置图片的大小
marker里面有width和height


相关讨论一:
关于markers的使用markers是可以在地图上面标记一个点,我能不能使用它在地图上标记多个点
可以,markers是个数组,可以传入多个坐标信息
markers: [
    {
         id:1,
        latitude: 23.099994,
        longitude: 113.324520,
        name: 'T.I.T 创意园'
     },
    {
        id:2,
        latitude: 24.099994,
        longitude: 116.324520,
        name: '我的位置'
    }
],


相关讨论一:
wx.chooseLocation{}能让他不打开地图获取详细地址
可以考虑自己获取坐标然后走web接口完成


相关讨论一:
在map组件上放其他组件如何实现?有小程序已实现
Q&A最后一条说了不能实现,但是我看到了通勤助手这个小程序就实现了。
因为Q&A说了不能对原声组件设置css动画,但是通勤助手点击了现在出发以后是由动画效果的,所以应该不是组件本身的控件,
而且map并没有拉低,你自己看图或者自己看小程序的话是可以看到这个下拉的部分是透明的。是可以看到后面的地图的
请问下实现方法是什么。。
22.jpg
你看到的map其实是地图API接口获得的图片。


相关讨论一:
微信小程序map组件 z-index问题map组件  自定义文字和图片没办法悬浮在地图上显示
不行的。真机的Map可以理解为浮动在HTML内容上面的一层,浏览器渲染的部分都会被遮盖,就算真机的vConsole也是被覆盖的。

所以有Map很头痛, 显示个Toast之类的都不行。希望后面可以改进。

文字和图片只能走Map的control参数来做,或者是marker,具体用哪个看你需求。
如果你的是动态内容,一个可能的思路是 走 Canvas生成一个图片,保持在本地再做。。。 没试过,感觉是可以的,就是太Overkill了。

反正小程序目前限制很多,别想着做成原生那样了。


相关讨论一:
MAP组件 有添加覆盖物的方法吗?
找了半天,只有polyline这个属性。可是MAP的参数只是初始化时加载一次。
如果我想实时获取坐标,并进行地图画线,试了下是不行的。
有没有类似百度的添加覆盖物的方法
var polyline = new BMap.Polyline([       new BMap.Point(116.399, 39.910),       new BMap.Point(116.405, 39.920)     ,   
{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}    );   
map.addOverlay(polyline);

强烈希望增加此功能
有markers/controls/polylines/circles等,可以通过数据绑定来做更新。
譬如
markers="{{markerArray}}"

更新:
pageObj.setData(markerArray: [
{
...........
}
];


已经搞定了。

点击这个按钮后,会触发画轨迹的方法
carGo: function () {
     start = true;
     timer = setInterval(this.drawLine,5000);//绘制轨迹
  },
//获得了坐标,动态绑定map的参数,就可以实时画轨迹了
drawLine : function() {
      var that = this;
       wx.getLocation( {
        type: 'gcj02',
        success: function( res ) {
            var polyline = that.data.polyline[0];
            var points = polyline.points;
            var obj = new Object();
            obj["longitude"] =  res.longitude;
            obj["latitude"] =  res.latitude;
            points.push(obj);
            console.info(that);
            console.info(new Date());
            polyline["points"] = points;
            console.info(polyline);
            that.setData({
              polyline: [polyline],
              location: {
                longitude: res.longitude,
                latitude: res.latitude
              }
            });
        }
      });
  }


相关讨论一:
小程序里面的map控件中的circles属性设置使用报错 23.png 24.png 25.jpg
如上截图描述一样,当天wxml文件中circles属性的{{}}中赋值后,就报最后截图所展示的错误


circless: [{
      latitude: 23.11229,
      longitude: 113.324520,
      latitude: 23.11229,
      longitude: 113.324520,
      radius: 1105,
      color: "#000000AA",
      fillColor: "#7fbafd3f"

关于此问题,是由color,fillColor这个两个属性没有引起的。故而操作文档对此是否必要描述有问题


相关讨论一:
map组件定位问题map组件是通过getCenterLocation()定位到当前位置,我现在页面加载的时候就通过这个API定位到我当前位置,可是为什么我在页面加载的时候使用这个方法却是无效的,请问有什么办法能在map组件里,当我页面加载的时候就定位到我当前位置,求解,
在onReady的方法里调用wx.getLocation 获取位置坐标后 设置map的latitude和longitude


相关讨论一:
map组件markers为啥不能动态变化,只能初始化一次? 而且iconPath 不能用远程地址?
marker可以动态变化,也是走setData


相关讨论一:
markers在ios上面无法显示出来,这是为什么
    <map id="my_map" longitude=""  latitude=""  show-location="true" scale="16" markers="{{markers}}"  bindmarkertap="now_work" ></map>这是使用的组件;
    这是在js里面设置的markers的两个点
   markers: [{
                  iconPath: "../../position.png",
                  id: 0,
                  title:"他家",
                  latitude:"23.13270746000000",
                  longitude:"113.26529471377000",
                  width:55,
                  height:55,
            },{
                  iconPath: "../../position.png",
                  id: 1,
                  title:"我家",
                  latitude:"23.13270746000049",
                  longitude:"113.26629671376984",
                  width:55,
                  height:55,
            }
    ],
我在安卓和开发者工具里面都能看到这个点,可是我在ios上面无法看到这两个点,程序运行没有报错,这是为什么??
问题是在双引号那里,安卓会根据微信的规则转成数值输出,但是苹果不会,苹果会依然按照字符串输出,所以在苹果显示不出来
latitude:23.1534923,
longitude:113.3049623,
这两个的值不能添加双引号
latitude:"23.13270746000049",
longitude:"113.26629671376984",
这样写,苹果会当做字符串输出,苹果不会转化成数值,但安卓会,所以安卓可以显示出来,但苹果不行,就是因为这里的问题

相关讨论一:你们有没有用过map中的circles属性

问题集合140.png
问题集合260.png
我这么写了之后出现如下bug,有知道为什么的吗?
问题集合405.png
我把circles写成单个对象而非数组的形式,就不会报错,但地图上也不会显示
问题集合563.png
但文档中类型命名是array类型
问题集合699.png

把fillColor填上
color也是 问题同上,官方文档描述有误;




有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
新增案例:
图上标记点的信息怎么跟随标记显示吗?

1.jpg

what提供:
可以把这个做成一个图片,然后加一个marker的icon设置为这个图片 ,放到你的标记点上方



有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
问题:
地图中如何实现回到原点的功能
请问在map组件中如何实现回到当前定位点的功能
答:lwpassvoice
this.mapCtx.moveToLocation()

相关讨论:
小程序里面的地图能实现这种路线规划显示吗
1.jpg

答:
http://developer.amap.com/api/wx/guide/route/route#driving
2.jpg
你获取了位置以后 传给腾讯地图
3.jpg
让腾讯地图帮你规划路线

新增讨论:
问题:
点击地图的marker标记点无法触发bindmarkertap事件
在地图上绑定了bindmarkertap事件,地图以及地图上的标记点数组markers都显示正常,但点击标记点时无反应,而且没有进入bindmarkertap函数中。将bindmarkertap的方法写到bindcontroltap中是可以点击控件触发的。
答:邓旭雄
已解决。在给每个marker赋值时有一个可选的id参数必须初始化,如果缺少这个参数会导致bindmarkertap事件回调不了此id,无法触发。

新增讨论:
组件map控件不显示
地图组件controls真机不显示,在开发者工具可以显示,请问哪位大神可以指点一下?
答:消失入口
问题已经解决了,图片路径只可以使用本地路径如:/iamge/132.jpg    ,位置可以随便自己设置,统一使用控件绑定事件,根据id设置不同事件处理,希望对各位有帮助


问题:
map组件怎么自适应屏幕高度
<map>组件的style里面width是可以设置比例的,但是高度设置不了比例,想着先获取屏幕的Height然后再通过{{}}方式传过去,发现不行,求助怎么才能让地图刚好铺满整个屏幕啊?
答:
已解决,设置为100vh即可

问题:
地图bug
在开发者工具中显示正常,在android手机上调用异常:
在android手机上,地图控件隐藏后在显示,wx.createMapContext(mapId).getCenterLocation方法没有任何回调

代码如下:

<view class="map-container" wx:if="{{stopPlaceIsShowMap}}">
    <map id="mymap" bindregionchange="stopPlaceRegionchange" longitude="{{stopPlaceLongitude}}" latitude="{{stopPlaceLatitude}}" scale="16" show-location="true" controls="{{stopPlaceControls}}" style="width: 100%; height:100%;"></map>
  </view>

Page({  onReady: function (e) {    // 使用 wx.createMapContext 获取 map 上下文     this.mapCtx = wx.createMapContext('myMap')  },
  getCenterLocation: function () {   
    this.mapCtx.getCenterLocation({
      success: function(res){
        console.log(res)
      },
     fail: function(res){
        console.log(res)
    }
    })  }})
如果stopPlaceIsShowMap的值为false之后,在置为true,调用getCenterLocation方法,没有任何回调,在开发工具中正常,不知道算不算是个bug

答:Special 官方
stopPlaceIsShowMap 为 false 时,map 组件还没有添加到节点树上,onReady 时创建 context 就有可能找不到控件,可以尝试一下这两种方法:
1、用 map 的 hidden 替换成 wx:if
2、stopPlaceIsShowMap 变成 true 之后再去创建 context + getCenterLocation

问题:

Map组件疑问?
根据开发文档描述,map 组件是由客户端创建的原生组件,它的层级是最高的,也就是说它上面不可以再叠加其它视图,但我在其它小程序上,如通勤助手,摩拜单车上看到了map组件上是可以叠加其它组件的,是否是因为他们是微信合作伙伴而给他们开放了部分隐藏接口,我们要实现类似的功能有什么建议?
答:YJFn
controls
在地图上显示控件,控件不随着地图移动
controls: [{
      id: 1,      iconPath: '/resources/location.png',      position: {        left: 0,        top: 300 - 50,        width: 50,        height: 50      },      clickable: true    }]
controltap(e) {   
    console.log(e.controlId)
  }
这些是官方文档的例子,用这个就可以实现了吧?楼主再看看,考虑考虑

答:Can 官方
1. 可以用cavas在map上层画。
2. 使用map的controls
3. 有的小程序在需要在map上盖东西的时候,把map隐藏掉,放一个假的图片在后边。


新增讨论:如何实现模糊搜索出现区域
点击需要获取位置的按钮,进入下图所示页面,输入商户名称,例如输入妈妈,下方列表自动变为妈妈xxxx,请问这个是有组件或者api的么?
15.jpg
答:YJFn
应该是结合了腾讯位置服务的API或者其他厂商的位置服务API的效果
http://lbs.qq.com


新增讨论:小程序实地采集定位,用了微信的定位功能,发送到电脑版的微信上后不知道怎么导出经纬度?
我们的小程序需要线下工作人员实地采集定位,我们用了微信的定位功能,收集了很多定位,发送到电脑版的微信上后不知道怎么导出经纬度。
112.jpg
补充,电脑端点开微信收集的定位如图也找不到导出经纬度的地方。
113.jpg
答:弓虽木木

微信小程序有接口可以获取当前坐标:位置 · 小程序

自己写个后台程序,获取坐标后你让小程序将坐标发送至该后台并保持即可。


新增讨论:问题:
后台计时,位置定位。看了文档说是可以后台继续用,不带这样骗人的
显示在聊天顶部,我发现是多余的,一会就关闭小程序了,那我需要继续计时,需要咋弄
答:web前端-炒饭
提供一条建议
把计时的那个变量设为全局,页面中计时再去取,当小程序关闭时,注册程序有个onHide函数,在这里将实时的全局变量缓存下来,当再次进入小程序时,在onLaunch里取缓存,再给全局变量赋值,,,这样貌似就能达到你继续计时的目的了
那定位呢?速度计算呢?
同样你可以在注册程序onHide里缓存当前坐标1 再次打开程序时在 onShow or onLaunch里获取当前坐标2,至于两个坐标之间的距离----自己算,时间也有了,速度还怕算不出来吗


有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
新增讨论:
Map组件疑问?
根据开发文档描述,map 组件是由客户端创建的原生组件,它的层级是最高的,也就是说它上面不可以再叠加其它视图,但我在其它小程序上,如通勤助手,摩拜单车上看到了map组件上是可以叠加其它组件的,是否是因为他们是微信合作伙伴而给他们开放了部分隐藏接口,我们要实现类似的功能有什么建议?
答;YJFn
controls
在地图上显示控件,控件不随着地图移动
controls: [{
      id: 1,      iconPath: '/resources/location.png',      position: {        left: 0,        top: 300 - 50,        width: 50,        height: 50      },      clickable: true    }]
controltap(e) {   
    console.log(e.controlId)
  }
这些是官方文档的例子,用这个就可以实现了吧?楼主再看看,考虑考虑

Can 官方
1. 可以用cavas在map上层画。
2. 使用map的controls
3. 有的小程序在需要在map上盖东西的时候,把map隐藏掉,放一个假的图片在后边。

Map上放controls没问题,但controls目前只能是一个图片,所以想实现复杂一点儿的视图还是很困难的,比如上面放多个响应按钮就没法实现了,但有时候这个视图是需要隐藏的,如果采用动态隐藏且不是叠加在上层,Map动态改变大小会抖动,体验很差。
分别说一下你几个建议
1、可以用cavas在map上层画。
    目前canvas与map都是原生的顶级层,我测试的效果也是不可以叠加的,绘图机制也决定了他们两个如果叠加也很困难。
2. 使用map的controls
    controls这个目前只是放置一个图片而已,很难实现复杂的逻辑,而冬天改变地图大小会导致地图抖动,体验很差。
3、有的小程序在需要在map上盖东西的时候,把map隐藏掉,放一个假的图片在后边。
    放置假图片是会存在时差的,且有时候无法完全对应,这方案瑕疵还比较多。

有一种方案没有试验可能行,利用canvas在后台生成图片,然后利map的controls的动态叠加生成的图片,有一个问题,如果我上面放置多个按钮还是没法解决问题,感觉现在的map组件功能欠缺不少。

我只是针对摩拜单车上的效果提建议,其他的小程序还没有看,摩拜单车看起来它就是一张图对应一个按钮,这种多个按钮完全可以实现的,像这样我放三张图都有对应的点击处理
11.jpg
canvas方案,没你说的问题 1.jpg
你的在地图上浮动controls是没问题的,但摩拜的红包计时界面绝对不是这个可以实现的,应该是上面@Can提到的用canvas自绘来实现,顺序不对了也是个坑,自绘实现起来还是相对会麻烦点的


新增讨论:问题:
在地图上的按钮在模拟器上能显示,用微信去预览按钮就显示不了了
我在map上放了一个image,在模拟器上能显示,然后用微信去预览就显示不了了,这是什么鬼,下面是我写的代码,求大神解答

<view class="mainview">
<view class="top">
<text style="color:white">我的位置</text>
</view>
<view style="width:100%;height:100%">
<map  markers="{{markers}}"  latitude="{{latitude}}" longitude="{{longitude}}" style="width:100%;height:91%;position:absolute;" />
<image src="/file/getlocation.png" bindtap="clickGetLocation" style="position:absolute; z-index:2;top:88%;left:10px; width:48px;height:48px;"></image>
</view>
</view>

/* pages/jsms/home.wxss */
.mainview{
    height: 100%;
    position: absolute;
    width: 100%;
}
.top{
  width: 100%;
  height: 9%;
  line-height:48px;
  background: #FF9419;
  text-align: center;
}

答;YJFn
这么写不行的,textarea、map、canvas、video 这四个组件是由客户端创建的原生组件,它的层级是最高的。
你的image是盖不上去的,模拟器上面的效果是假的
要实现这种效果,用canvas或map的controls


有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
发新帖
您需要登录后才可以回帖 登录 | 立即注册