使用uniapp是因为它是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可以发布到ios，android，web以及各种小程序，快应用等多个平台。 使用map地图组件开发，地图组件用于展示地图（使用的时腾讯地图），说一下它的属性有：

longitude（类型为Number，没有默认值，表示中心经度）

latitude（类型为Number，没有默认值，表示中心纬度）

scale（类型为Number，默认值为16，缩放级别取值范围为5-18）

markers（类型为Array数组，类型为数组即表示地图上可以有多个，没有默认值，表示标记点）

polyline（类型为Array数组，没有默认值，表示路线，数组上的所有点连成线）

include-points（类型Array数组，表示缩放视野已包含所有给定的坐标点）

由之前描述可知，markers属性类型为Array，表示标记点用于在地图上显示标记的位置。这个数组属性，它里面有它的对象配置属性，分别是：

id，表示标记点id，类型为Number，必填项，marker点击事件回调会返回此id，建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。
title，标注点名，类型String，不是必填，点击时显示，callout存在时将被忽略
iconPath，显示的图标，类型String，必填项，项目目录下的图片路径
rotate，旋转角度，类型Number，不是必填，顺时针旋转的角度，范围 0 ~ 360，默认为 0
alpha，标注的透明度，类型Number，不是必填，默认1，无透明，范围 0 ~ 1
width，标注图标宽度，类型Number，不是必填，默认为图片实际宽度
height，标注图标高度，类型Number，不是必填，默认为图片实际高度
callout，自定义标记点上方的气泡窗口，类型Object，不是必填 - 可识别换行符
label，为标记点旁边增加标签，类型Object，不是必填 - 可识别换行符
anchor，经纬度在标注图标的锚点，默认底边中点，不是必填，{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点

id，控件id，Number，不必填，在控件点击事件回调会返回此id
position，控件在地图的位置，Object，必填，控件相对地图位置
iconPath，显示的图标，String，必填，项目目录下的图片路径，支持相对路径写法，以’/'开头则表示相对项目根目录；也支持临时路径
clickable，是否可点击，Boolean，不必填，默认不可点击

left，距离地图的左边界多远，Number，不必填，默认为0
top，距离地图的上边界多远，Number，不必填，默认为0
width，控件宽度，Number，不必填，默认为图片宽度
height，控件高度，Number，不必填，默认为图片高度
注意在uniapp中地图组件的经纬度必填，如果不填，经纬度则默认值是北京的经纬度。 2.uniapp使用map组件 基本使用方法 使用uniapp开发中的map组件，基本使用方法：

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

• 组件标签靠近小程序规范，详见

ES6 API 的支持，详见如下表格部分（x 表示不支持，无特殊说明则表示支持）：

• 因为iOS上不允许三方js引擎，所以iOS上不区分App、小程序、H5，各端均仅依赖iOS版本。
• 各端Android版本有差异：
• App端的数据见下表；
• App端Android支持不依赖Android版本号，即便是Android4.4也是上表数据。因为uni-app的js代码运行在自带的独立jscore中，没有js的浏览器兼容性问题。uni-app的vue页面在Android低端机上只有css浏览器兼容性问题，因为vue页面仍然渲染在webview中，受Android版本影响，太新的css语法在低版本不支持。
• 默认不需要在微信工具里继续开启es6转换。但如果用了微信的wxml自定义组件（wxcomponents目录下），uni-app编译器并不会处理这些文件中的es6代码，需要去微信工具里开启转换。从HBuilderX调起微信工具时，如果发现工程下有wxcomponents目录会自动配置微信工程打开es6转换。

uni-app支持使用npm安装第三方包。

此文档要求开发者们对npm有一定的了解，因此不会再去介绍npm的基本功能。如若之前未接触过npm，请翻阅进行学习。

若项目之前未使用npm管理依赖（项目根目录下无package.json文件），先在项目根目录执行命令初始化npm工程：

cli项目默认已经有package.json了。HBuilderX创建的项目默认没有，需要通过初始化命令来创建。

在项目根目录执行命令安装npm包：

安装完即可使用npm包，js中引入npm包：

• 为多端兼容考虑，建议优先从  获取插件。直接从 npm 下载库很容易只兼容H5端。
• 非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块，安装的模块及其依赖的模块使用的 API 必须是 uni-app 已有的 （兼容小程序 API），比如：支持。类似 等库只能用于H5端。
• 支持安装 mpvue 组件，但npm方式不支持小程序自定义组件（如 wxml格式的vant-weapp），使用小程序自定义组件请参考：。
• 关于ui库的获取，详见
// 仅展示需要修改的核心代码，完整代码请参考原来的组件。

支持微信小程序组件（2.4.7+）

此文档要求开发者对各端小程序的自定义组件有一定了解，没接触过小程序自定义组件的可以参考：

 
┌─wxcomponents 微信小程序自定义组件存放目录
│ └──custom 微信小程序自定义组件
├─mycomponents 支付宝小程序自定义组件存放目录
│ └──custom 支付宝小程序自定义组件
├─swancomponents 百度小程序自定义组件存放目录
│ └──custom 百度小程序自定义组件
 

下面以微信小程序官方自定义组件示例  为例演示小程序自定义组件的使用方式。 其他组件使用示例见GitHub：。 插件市场有一个完整的vant weapp 引用好的示例工程，详见。

• 小程序组件的性能，不如vue组件。使用小程序组件，需要自己手动setData，很难自动管理差量数据更新。而使用vue组件会自动diff更新差量数据。所以如无明显必要，建议使用vue组件而不是小程序组件。比如某些小程序ui组件，完全可以用更高性能的uni ui替代。
• 注意数据和事件绑定的差异，使用时应按照 vue 的数据和事件绑定方式

详细的小程序转uni-app语法差异可参考文档。

WXS是一套运行在视图层的脚本语言，。

它的特点是运行在视图层。当需要避免逻辑层和渲染层交互通信折损时，可采用wxs。

与wxs类似，百度小程序提供了Filter、阿里小程序提供了SJS，uni-app也支持使用这些功能，并将它们编译到百度和阿里的小程序端。不过它们的功能还不如wxs强大。此外头条系小程序自身不支持类似功能。

App端nvue解决此类需求，不应该使用wxs，而是使用bindingx。

以下是一些使用 WXS 的简单示例，要完整了解 WXS 语法，请参考。本示例使用wxs响应touchmove事件，减少视图层与逻辑层通信，使滑动更加丝滑。

支付宝小程序，百度小程序官方暂未支持事件响应，不过也可以使用对应的SJS、Filter过滤器实现一些数据处理的操作，以下代码展示了一个时间格式化的小功能

• 目前各个小程序正在完善相关规范，可能会有较大改动，请务必仔细阅读相应平台的文档
• 支付宝小程序请使用sjs规范，
• 支付宝小程序sjs只能定义在.sjs 文件中，然后使用<script>标签引入
• 支付宝小程序script的标签属性name、from被统一为了module、src以便后续实现多平台统一写法
• 百度小程序中请使用Filter规范，
• wxs、filter.js既能内联使用又可以外部引入，sjs只能外部引入
• QQ小程序目前对内联的 wxs 支持不好，部分写法可能会导致编译出错，尽量使用外部引入的方式
• 各个script标签会分别被打包至对应支持平台，不需要额外写条件编译
• 自HBuilderX 2.2.5开始，不推荐使用各个小程序自有的引入方式，推荐使用script标签引入
• App和H5端，提供了wxs的升级版，更加强大，见下面的  章节

全称是微信脚本语言，它不够强大。uni-app的app端和h5端做了更多扩展，但扩展后的技术，不再适合使用wxs这个名字了。新的名称叫renderjs。

1. 运行在视图层。当需要频繁操作视图层时，renderjs比运行在逻辑层的普通js，提供更流畅的ui交互。比如canvas动画、比如跟手绘画

• 可以使用 dom、bom API 不可直接访问逻辑层数据
• 视图层和逻辑层通讯方式与  一致
• 观测更新的数据在 view 层可以直接访问到
• 不要直接引用大型类库，推荐通过动态创建 script 方式引用
• view 层的页面引用资源的路径相对于根目录计算，例如：./static/test.js

本人所在的公司最近在做共享电动车的项目，打开该应用看到的就是一副地图，可以获取附近共享电动车的地址、状态等信息，开发这个应用程序还需要在地图上规划路线、动态显示轨迹、轨迹回放等功能。共享开发的项目功能总会用到LBS（Location Based Service），即基于位置的服务，国内提供地图服务的有百度地图、高德地图、腾讯地图，本文选取的是腾讯位置服务来进行地图功能的开发。

需要申请key，速度快，有基本信息

为什么要用个性化地图，提高不同场景下地图的展现效果和用户体验。
为什么选择腾讯位置服务个性化地图：

• 个性化样式支持动态更新
• 支持全局配置和分级配置
• 编辑平台UI控件全面优化
• 每个元素可配置的属性全部开放
• 能够支持自定义的地图元素扩充为52种

2.验证手机 与 邮箱
3.申请开发密钥（Key）

// 引入SDK核心类，js文件根据自己业务，位置可自行放置 key: '自己申请，我的就不放出来了' //region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数

//获取表单传入的位置坐标,不填默认当前位置,示例为string格式 * 当get_poi为1时，检索当前位置或者location周边poi数据并在地图显示，可根据需求是否使用 //当get_poi为0时或者为不填默认值时，检索目标位置，按需使用

geocoder – 提供由地址描述到所述位置坐标的转换，与逆地址解析reverseGeocoder()的过程正好相反。

//from参数不填默认当前地址 //获取表单提交的经纬度并设置from和to参数（示例为string格式）

调用获取城市列表接口，效果图如下：

获取城市区县，效果图如下：

腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持，使得开发者可以自由地实现自己的微信小程序产品。 在此基础上，腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务，让您的小程序更强大！