在uniapp里面使用的map组件,仅仅是一个渲染组件。给他提供数据在地图上渲染出来。
如果你要实现地址搜索、计算路径等等必须借助于成熟地图服务商产品。比如、高德、百度、腾讯
微信小程序JavaScript SDK | 腾讯位置服务
申请开发者密钥(key):申请密钥
开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)
下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2
安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com
将下载的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的调用
methods: {
searchData(){
qqmapsdk.search({
keyword:'酒店',
success:function(res){
console.log(res);
},
fail:function(res){
console.log(res);
},
complete:function(res){
console.log(res);
}
})
}
}
在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'
});
},
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);
}
})
}
}
}
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是一个开源的移动端UI框架,配合uniapp来开发移动端程序
在市场上找到uview插件: uView2.0重磅发布,利剑出鞘,一统江湖 - DCloud 插件市场
使用HBuilderX导入插件,执行成功后,你们项目下面会增加一个uni_modules文件夹。里面有一个uview-ui插件
在项目根目录中的main.js
中,引入并使用uView的JS库,注意这两行要放在import Vue
之后。
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
在uni.scss中引入写入如下代码
@import '@/uni_modules/uview-ui/theme.scss'
放在App.vue这个根组件里面。根组件里面还有其他css代码。,将import语句放在最前面