小程序
小游戏
企业微信
微信支付
扫描小程序码分享
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
看图一,从上到下:第一个蓝色小点为实时定位点,第二个红色小点为指示页面中心的小图标,第三个页面左下角小图标【它的作用就是滑动地图之后第一个点(实时定位点即显示我的当前位置的点)和第二个点(指示页面中心的点)会不再重合,此时点击第三个点则实现地图实时定位点的回归(即实时定位点又回到页面中心了)】
【问题就是第三个点无效,不起作用】我猜测是app.js 里出问题了,但是具体不清楚
【index.wxml】
<
view
class
=
"map-container"
>
map
id
'mymap'
longitude
"{{longitude}}"
latitude
"{{latitude}}"
scale
"14"
"map"
show-location
"true "
controls
"{{controls}}"
bindcontroltap
"controltap"
</
"btns"
"btn btn-publish"
>发布</
"btn"
>搜索</
//index.js
//获取应用实例
const app = getApp();
Page({
data: {
longitude: "",
latitude: "",
controls:[{
iconPath:"/pages/resources/2.png",
position:{
left:(app.globalData.windowWidth/2)-15,
top:(app.globalData.windowHeight-40)/2-15,
width:30,
height:30}
},
{id:1,
iconPath: "/pages/resources/3.png",
position: {
left:20,
top: (app.globalData.windowHeight)-100,
width: 30,
height: 30
clickable:true
}
]
onShow() {
this.getLocation();
onReady(){
this.mapCtx=wx.createMapContext('mymap');
getLocation() {
wx.getLocation({
type: 'gcj02',
success: this.handleGetLocationSucc.bind(this)
})
handleGetLocationSucc(res) {
this.setData({
longitude: res.longitude,
latitude: res.latitude,
controltap(e){
this.mapCtx.moveToLocation();
onShareAppMessage() {
return {
title: "萌宠交易平台",
path: "/pages/index/index"
【index.wxss】
.map-container{
position:absolute;
top:0;
right:0;
bottom:40px;
left:0;
background:green
.btns{
position: absolute;
display: flex;
left: 0;
right: 0;
bottom: 0;
line-height: 40px;
background: #03bbd5;
.btn{
flex:1;
text-align: center;
color: #fff;
.btn-publish{
background:#ff9700;
【app.json】
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#03bbd5",
"navigationBarTextStyle":"white"
【index.json】
"navigationBarTitleText":"萌宠交易平台"
【app.js】
App({
globalData:{
onLaunch () {
try {
const res = wx.getSystemInfoSync()
this.globalData.windowHeight=res.windowHeight;
this.globalData.windowWidth=res.windowWidth;
} catch (e) { }
麻烦按照教程来补充下代码片段
后来在手机上运行,发现此功能又可以实现了。搞不明白为什么。
还有补充代码片段怎么都没搞清楚怎么用,新建代码片段后把将我的小程序里的代码复制到新建代码片段相应的里面?
初学者有点蠢,还请原谅。
代码片段就是你新建个demo,然后把这个功能搬到代码片段里面,新建代码片段的时候记得填写appid,这样就可以真机调试了,然后别人通过你的代码片段可以更方便的定位问题
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
看图一,从上到下:第一个蓝色小点为实时定位点,第二个红色小点为指示页面中心的小图标,第三个页面左下角小图标【它的作用就是滑动地图之后第一个点(实时定位点即显示我的当前位置的点)和第二个点(指示页面中心的点)会不再重合,此时点击第三个点则实现地图实时定位点的回归(即实时定位点又回到页面中心了)】
【问题就是第三个点无效,不起作用】我猜测是app.js 里出问题了,但是具体不清楚
【index.wxml】
<
view
class
=
"map-container"
>
<
map
id
=
'mymap'
longitude
=
"{{longitude}}"
latitude
=
"{{latitude}}"
scale
=
"14"
class
=
"map"
show-location
=
"true "
controls
=
"{{controls}}"
bindcontroltap
=
"controltap"
>
</
map
>
</
view
>
<
view
class
=
"btns"
>
<
view
class
=
"btn btn-publish"
>发布</
view
>
<
view
class
=
"btn"
>搜索</
view
>
</
view
>
//index.js
//获取应用实例
const app = getApp();
Page({
data: {
longitude: "",
latitude: "",
controls:[{
iconPath:"/pages/resources/2.png",
position:{
left:(app.globalData.windowWidth/2)-15,
top:(app.globalData.windowHeight-40)/2-15,
width:30,
height:30}
},
{id:1,
iconPath: "/pages/resources/3.png",
position: {
left:20,
top: (app.globalData.windowHeight)-100,
width: 30,
height: 30
},
clickable:true
}
]
},
onShow() {
this.getLocation();
},
onReady(){
this.mapCtx=wx.createMapContext('mymap');
},
getLocation() {
wx.getLocation({
type: 'gcj02',
success: this.handleGetLocationSucc.bind(this)
})
},
handleGetLocationSucc(res) {
this.setData({
longitude: res.longitude,
latitude: res.latitude,
})
},
controltap(e){
this.mapCtx.moveToLocation();
},
onShareAppMessage() {
return {
title: "萌宠交易平台",
path: "/pages/index/index"
}
},
})
【index.wxss】
.map-container{
position:absolute;
top:0;
right:0;
bottom:40px;
left:0;
background:green
}
.btns{
position: absolute;
display: flex;
left: 0;
right: 0;
bottom: 0;
line-height: 40px;
background: #03bbd5;
}
.btn{
flex:1;
text-align: center;
color: #fff;
}
.btn-publish{
background:#ff9700;
}
【app.json】
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#03bbd5",
"navigationBarTextStyle":"white"
}
}
【index.json】
{
"navigationBarTitleText":"萌宠交易平台"
}
【app.js】
App({
globalData:{
},
onLaunch () {
try {
const res = wx.getSystemInfoSync()
this.globalData.windowHeight=res.windowHeight;
this.globalData.windowWidth=res.windowWidth;
} catch (e) { }
}
})
麻烦按照教程来补充下代码片段
后来在手机上运行,发现此功能又可以实现了。搞不明白为什么。
还有补充代码片段怎么都没搞清楚怎么用,新建代码片段后把将我的小程序里的代码复制到新建代码片段相应的里面?
初学者有点蠢,还请原谅。
代码片段就是你新建个demo,然后把这个功能搬到代码片段里面,新建代码片段的时候记得填写appid,这样就可以真机调试了,然后别人通过你的代码片段可以更方便的定位问题