一、腾讯地图
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、入门使用
-
申请开发者密钥（key）：申请密钥
-
开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
-
下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2
-
安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置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中引入写入如下代码文章来源：https://www.toymoban.com/news/detail-683925.html
@import '@/uni_modules/uview-ui/theme.scss'5、引入uView基础样式
放在App.vue这个根组件里面。根组件里面还有其他css代码。，将import语句放在最前面文章来源地址https://www.toymoban.com/news/detail-683925.html
<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>到了这里，关于Uniapp笔记（六）uniapp基础的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
