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.longitude
            this.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.longitude
                this.latitude = res.latitude
            }
        })
        qqmapsdk = new QQMapWX({
            key: 'SDPBZ-VIOLX-6K64M-TJ7HA-PPZ55-KUF4L'
        });
    },
    methods: {
        searchData() {
            let _this=this
            qqmapsdk.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.lat
			this.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>