一、腾讯地图
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.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>
