摘要

地图组件-map

注意事项&&Bug:

1.map 组件是由客服端创建的原生组件,它的层级是最高的。

2.请勿在scroll-view中使用map组件

3.css动画对map组件无效

4.map 组件使用的经纬度是火星坐标系,调用 wx.getLocation 接口需指定 type 为gcj02

1.map的属性

属性名:longitude  -  类型:Number - 说明:中心经度 - 范围:-90~90

属性名:latitude -  类型:Number - 说明:中心纬度 - 范围:-180~180

属性名:scale  -   类型:Number - 默认值:16 - 说明:缩放级别,取值范围5~18

属性名:markers - 类型:Array - 说明:标记点

属性名:covers - 类型:Array -说明:即将移除,请使用markers

属性名:polyline - 类型:Array -说明:路线

属性名:circles - 类型:Array -说明:圆

属性名:controls - 类型: Array - 说明:控件

属性名:include-points - 类型:Array - 说明:缩放视野以包括所有给定的坐标点

属性名:show-location - 类型:Boolean -说明:显示带有方向的当前定位点

属性名:bindmarkertap - 类型:EvenHandle - 说明:点击标记点时触发

属性名:bindcallouttap - 类型:EvenHandle -说明:点击标记点对应的气泡时触发

属性名:bindcontroltap - 类型:EvenHandle  - 说明:点击控件时触发

属性名:binddregionchange - 类型:EvenHandle  - 说明:视野发生变化时触发

属性名:bindtap - 类型:EvenHandle  - 说明:点击地图时触发

属性名:bindupdated - 类型:EvenHandle  - 说明:在地图渲染更新完成时触发

2.markers 标记点用于在地图上显示标记位置

属性:id - 说明:标记点id - 类型:Number - 必填:否 - 备注:markers点击事件回调会返回此id

属性:latitude - 说明:纬度 - 类型:Number - 必填:是 -  备注:浮点数,范围-90~90

属性:longitude - 说明:经度 - 类型:Number - 必填:是 - 备注:浮点数,范围-180~180

属性:title - 说明:标注点名 - 类型:String - 必填:否

属性:iconPath - 说明:显示的图标 - 类型:String - 备注:项目目录下的图片路径,支持相对路径写法,以‘/’开头则表示相对小程序根目录;也支持临时路径

属性:width - 说明:标注图宽 -类型:Number - 必填:否 - 备注:默认为图片实际宽度

属性:height - 说明:标注图高 - 类型:Number -必填:否 - 备注:默认为图片实际高度

属性:rotate - 说明:旋转角度 - 类型:String - 必填:否 - 备注:顺时针旋转的角度,范围0~360,默认0

属性:alpha - 说明:标注的透明度 - 类型:String - 必填:否 - 备注:默认1,无透明

属性:callout - 说明:自定义标记点上方的气泡窗口 - 类型:Object - 必填:否 - 备注:{content,color,fontSize,borderRadius,bgColor,padding,boxShadow,display}

属性:label - 说明:为标记点旁边增加标签 - 类型:Object - 必填:否 - 备注:{color,fontSize,content,x,y},可识别换行符,x,y原点是marker对应的经纬度

属性:anchor - 说明:经纬度在标注图标的锚点,默认底边中点 - 类型:Object - 必填:否 - 备注:{x,y},x表示横向(0-1),y表示竖向(0-1)。{x:.5 , y:1}表示底边中点

小程序-地图API的更多相关文章

  1. 微信小程序地图开发总结

    最近在做一个微信小程序地图插件,通过传入起始位置名称和经纬度信息,就可以跳转到路线规划插件页面中,在该页面中,可以根据起始位置查询自驾,公共交通,步行等方式的路线信息,并且在地图上显示路线信息,在这个 ...

  2. 微信小程序--地图上添加图片

    如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...

  3. 微信小程序通过api接口将json数据展现到小程序示例

    这篇文章主要介绍了微信小程序通过api接口将json数据展现到小程序示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧实现知乎客户端的一个重要知识前提就是,要知道怎么通过 ...

  4. 小程序常用API介绍

    小程序常用API接口  wx.request https网络请求 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 method:"GET&qu ...

  5. 图解微信小程序---调用API操作步骤

    图解微信小程序---调用API操作步骤 什么是API API(Application Programming Interface,应用程序编程接口:是一些预先定义的函数,目的是提供应用程序与开发人员基 ...

  6. 把微信小程序异步API转为Promise,简化异步编程

    把微信小程序异步API转化为Promise.用Promise处理异步操作有多方便,谁用谁知道. 微信官方没有给出Promise API来处理异步操作,而官方API异步的又非常多,这使得多异步编程会层层 ...

  7. 微信小程序 HTTP API

    微信小程序 HTTP API promise API https://www.npmtrends.com/node-fetch-vs-got-vs-axios-vs-superagent node-f ...

  8. 微信小程序——地图

    一:如何标点问题 地图模块需要用标点:官网API里面的wx.createMapContext(mapId, this)接口,且用官网Demo,小程序运行报错此时需要在wxml里面给map标签添加属性m ...

  9. 微信小程序地图模块

    微信小程序的地图模块官方提供的API比较少,详情请见   官方文档 以下为一个示例                               <!--pages/location/locati ...

随机推荐

  1. 背包问题2 (lintcode)

    这里: for(int j = 1;j <= m;j++) result[0][j] = 0x80000000; 不能从0开始,result[0][0]是可以取到的,是0.其他情况取不到才用最小 ...

  2. 数据库-SQL语法:LEFT JOIN

    LEFT JOIN 关键字会从左表 (table_name1) 那里返回所有的行,即使在右表 (table_name2) 中没有匹配的行.(补充:left join是一对多的关系,表里所有符合条件的记 ...

  3. POI转换word doc文件为(html,xml,txt)

    在POI中还存在有针对于word doc文件进行格式转换的功能.我们可以将word的内容转换为对应的Html文件,也可以把它转换为底层用来描述doc文档的xml文件,还可以把它转换为底层用来描述doc ...

  4. hihoCoder-1109-堆优化的Prim

    优先队列是由堆组成的,所以当我们使用优先队列对Prim进行优化时,就把这种优化叫做堆优化. 它的算法核心思想就是每次向后找边,每个pair存的都是下一个点,以及边权.我们对于已经走过的点就避开,这样就 ...

  5. ZJOI2018游记Round1

    广告 ZJOI2018Round2游记 All Falls Down 非常感谢学弟学妹们捧场游记虽然这是一篇假游记 ZJOI Round1今天正式落下帷幕.在这过去的三天里遇到了很多朋友,见识了很多有 ...

  6. Linux系统状态检测

    基于Red Hat Enterprise Linux 7.5 1.ifconfig ifconfig用于获取和配置网络接口的网络参数,格式为“ifconfig [网络设备] [参数]” 参数: add ...

  7. css3-flex-box(2)

    使用方法 使用Flexbox布局只要在父容器元素上设置display属性: .flex-container { display: -webkit-flex; /* Safari */ display: ...

  8. DELL R730 服务器拷贝大文件

    从服务器上拷贝大文件,通过USB拷贝,写入速度很慢,而且拷贝到100多G的时候直接卡死. 原因:服务器的USB是2.0,传输速率很慢. 解决方法: 找一台笔记本,USB 接口是3.0的,通过网络共享传 ...

  9. Codeforces Round #439 (Div. 2) B. The Eternal Immortality

    B. The Eternal Immortality 题目链接http://codeforces.com/contest/869/problem/B 解题心得:题意就是给出a,b,问(a!)/(b!) ...

  10. python基础——15(加密、excel操作、ini文件操作、xml操作模块及数据格式分类)

    一.加密模块 1.有解密的加密方式(base64) #base64加密 import base64 str_encrypt = input("输入要加密的字符串:\n") base ...