Uniapp笔记（六）uniapp基础

一、腾讯地图

1、uniapp地图渲染

<template><view><map class="map" :longitude="longitude" :latitude="latitude"></map></view>
</template>
<script>export default {data() {return {longitude:108.947558,latitude:34.317455}}}
</script>
<style lang="scss">.map{width: 750rpx;height: 100vh;}
</style>

2、腾讯地图入门使用

在uniapp里面使用的map组件，仅仅是一个渲染组件。给他提供数据在地图上渲染出来。

如果你要实现地址搜索、计算路径等等必须借助于成熟地图服务商产品。比如、高德、百度、腾讯

2.1、访问腾讯地图开放平台

微信小程序JavaScript SDK | 腾讯位置服务

2.2、入门使用

1. 申请开发者密钥（key）：申请密钥

2. 开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存

   (小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)

3. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2

4. 安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com

2.3、小程序入门案例

• 将下载的qqmap-wx-jssdk.min.js文件存放到项目的utils文件夹下，并引入

import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'
var qqmapsdk;
export default {}

• 在onLoad钩子函数中初始化地图

onLoad() {qqmapsdk = new QQMapWX({key: 'SDPBZ-VIOLX-6K64M-TJ7HA-PPZ55-KUF4L'});
},

• 调用qqmapwx这个实例对象完成api的调用

<button @click="searchData" type="default">搜索</button>
methods: {searchData(){qqmapsdk.search({keyword:'酒店',success:function(res){console.log(res);},fail:function(res){console.log(res);},complete:function(res){console.log(res);}})}
}

3、获取当前定位

在uniapp的文档里面有一个api可以获取到当前定位

地址为：uni.getLocation(OBJECT) | uni-app官网

onLoad() {uni.getLocation({type:'wgs84',success: (res) => {this.longitude=res.longitudethis.latitude=res.latitude}})qqmapsdk = new QQMapWX({key: 'SDPBZ-VIOLX-6K64M-TJ7HA-PPZ55-KUF4L'});
},

4、腾讯地图查询

<template><view><input type="text" v-model="keyword"><button @click="searchData()">搜索</button><map class="map" :longitude='longitude' :latitude="latitude" :markers="covers">         </map></view>
</template>
import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'
var qqmapsdk;
export default {data() {return {longitude: '',latitude: '',keyword: '',covers:[]}},onLoad() {uni.getLocation({type: 'wgs84',success: (res) => {this.longitude = res.longitudethis.latitude = res.latitude}})qqmapsdk = new QQMapWX({key: 'SDPBZ-VIOLX-6K64M-TJ7HA-PPZ55-KUF4L'});},methods: {searchData() {let _this=thisqqmapsdk.search({keyword: this.keyword,success: function(res) {let mks = []for (let i = 0; i < res.data.length; i++) {mks.push({id: ~~res.data[i].id,latitude: res.data[i].location.lat,longitude: res.data[i].location.lng,iconPath: '../../static/map1.png',width: 35,height: 35,})}_this.covers=mks},fail: function(res) {console.log(res);},complete: function(res) {console.log(res);}})}}}

5、地址解析

<input type="text" v-model="keyword">
<button @click="searchAddr()">地址搜索</button>

qqmapsdk.geocoder(options:Object): 提供由地址描述到所述位置坐标的转换

searchAddr(){qqmapsdk.geocoder({address: this.keyword,success: (res) => {console.log(res);this.latitude = res.result.location.latthis.longitude = res.result.location.lng}})
},

二、uview框架

1、简介

uview是一个开源的移动端UI框架，配合uniapp来开发移动端程序

2、安装uview插件

在市场上找到uview插件： uView2.0重磅发布，利剑出鞘，一统江湖 - DCloud 插件市场

使用HBuilderX导入插件，执行成功后，你们项目下面会增加一个uni_modules文件夹。里面有一个uview-ui插件

3、全局引入组件

在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

4、引入uView的全局SCSS主题文件

在uni.scss中引入写入如下代码

@import '@/uni_modules/uview-ui/theme.scss'

5、引入uView基础样式

放在App.vue这个根组件里面。根组件里面还有其他css代码。，将import语句放在最前面

<style lang="scss">/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */@import "@/uni_modules/uview-ui/index.scss";
</style>

6、在页面中使用

<u-button type="primary" text="确定"></u-button>
<u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>