如何自己建造网站,泉州最专业微信网站建设公司,购物网页设计总结,毕业生对于网站建设感受展示效果 二、引入地图
如果需要搜索需要去腾讯地图官网上看文档#xff0c;找到对应的内容 1.申请开发者密钥#xff08;key#xff09;#xff1a;申请密钥
2.开通webserviceAPI服务#xff1a;控制台 -应用管理 - 我的应用 -添加key- 勾选WebService…展示效果 二、引入地图
如果需要搜索需要去腾讯地图官网上看文档找到对应的内容 1.申请开发者密钥key申请密钥
2.开通webserviceAPI服务控制台 -应用管理 - 我的应用 -添加key- 勾选WebServiceAPI - 保存
(小程序SDK需要用到webserviceAPI的部分服务所以使用该功能的KEY需要具备相应的权限)
3.下载微信小程序JavaScriptSDK微信小程序JavaScriptSDK v1.1 、 JavaScriptSDK v1.2
4.安全域名设置在小程序管理后台 - 开发 - 开发管理 - 开发设置 - “服务器域名” 中设置request合法域名添加https://apis.map.qq.com
5.小程序官方示例
// 引入SDK核心类js文件根据自己业务位置可自行放置
var QQMapWX require(../../libs/qqmap-wx-jssdk.js);
var qqmapsdk;
Page({onLoad: function () {// 实例化API核心类qqmapsdk new QQMapWX({key: 申请的key});},onShow: function () {// 调用接口qqmapsdk.search({keyword: 酒店,success: function (res) {console.log(res);},fail: function (res) {console.log(res);},complete: function (res) {console.log(res);}});}
})完整代码
templateview classmap-wrap!-- 1. markers 标记点2.latitude 纬度3.longitude:经度4. scale搜房级别 默认165. markertap点击标记点触发--map classmap :markersmarkers :latitudelatitude:longitudelongitude :scale16 markertapmarkertapcover-view slotcalloutblock v-for(item, index) in customCalloutMarkerIds :keyindex!-- 覆盖在原本的节点上面 --cover-view classcustomCallout :marker-iditem!-- 覆盖正在原本节点的文本 --cover-view classtxt{{markers[index].locationName}}/cover-view!-- 覆盖正在原本节点的图片 --cover-image :srcmarkersImgs[index] classcontent-image/cover-image/cover-view/block/cover-view!-- view classfloor/view --/map/view
/templatescriptexport default {data() {return {// 中心的经纬度latitude: 34.788195,longitude: 113.685064,// 播放对应的视频videos:[https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B20200317.mp4,https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B20200317.mp4,],// 气泡显示的照片markersImgs: [https://img1.baidu.com/it/u426464644,1372554843fm253fmtautoapp138fJPEG?w500h570,https://img1.baidu.com/it/u3269176678,389813562fm253fmtautoapp138fJPEG?w500h500,],customCalloutMarkerIds: [1, 2],// 地图markers ID列表// 数据markers: [{id: 1,latitude: 34.788195,longitude: 113.685064,iconPath: /static/location.png,width: 32 ,height: 32 ,// locationName: 动物园,customCallout: {anchorY: -4,anchorX: 0,while:100,height:100,display: ALWAYS, // BYCLICK 点击显示气泡 ALWAYS常显示}}, {id: 2,latitude: 34.787256,longitude: 113.673733,iconPath: /static/location.png,width: 32,height: 32,locationName: 河南省博物院,customCallout: {anchorY: -4,anchorX: 0,display: ALWAYS,}}], }},methods: {// 点击时间点击当前的标点markertap(e) {let markers this.markersmarkers.find((item, index) {if (item.id e.markerId) {this.curVideo this.videos[index];item.customCallout.display ALWAYS // 点击marker 显示地点名item.width 32 * 1.5; item.height 32 * 1.5; } else {item.customCallout.display NONE;item.width 32;item.height 32;}})}}}
/scriptstyle langscssvideo{position: fixed;right:10%;bottom:20rpx;width: 80%;height:200rpx;}.map-wrap{width: 100%;height: 100%;position: absolute;.map{width: 100%;height:100%;}}.customCallout {width: 200rpx;height: 100rpx;background-color: #fff;background: #FFFFFF;box-shadow: 0px 8rpx 32rpx 0px rgba(189, 191, 193, 0.4);border-radius: 10rpx;// padding: 6rpx 24rpx;display: flex;justify-content: center;align-items: center;box-sizing: border-box;.content-image {width: 100%;height: 100%;// margin-left: 10rpx;}.txt{font-size: 32rpx;}}.floor{width: 90%;height: 10%;display: flex;position: absolute;background-color: #fff;position: absolute;bottom: 100rpx;}
/style
