微客导航 » 文章资讯 » 微信小程序开发MAP（地图）实例详解

微信小程序开发MAP（地图）实例详解

2024-02-17 22:40:03 205

微信小程序开发MAP（地图）实例详解

在创建MAP（地图）前，请各位小伙伴们认真的去了解微信小程序开发的说明。

https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map

了解完MAP（地图）里的属性之后，接下来我们就来创建一个简单的MAP（地图）控件。

第一步：肯定是创建项目、起项目名、项目地址

PS:我这里以index的文件为名

第二步：我们来写index.wxml文件的代码

WXML文件代码：

WXML文件的代码写好之后，就要来进行第三步了。

第三步：写index.js文件的代码

varapp=getApp()

Page({
data:{
map_width:380
,map_height:380
}
//showcurrentposition
,onLoad:function(options){
console.log(options.schedule_id);
varthat=this;
//获取定位，并把位置标示出来
that.setData({
longitude:113.324520
,latitude:23.099994
,markers:[
{
id:0
,iconPath:"../imgs/ic_position.png"
,longitude:113.324520
,latitude:23.099994
,width:30
,height:30
}
]
})
//setthewidthandheight
//动态设置map的宽和高
wx.getSystemInfo({
success:function(res){
console.log(res.windowWidth);
that.setData({
map_width:res.windowWidth
,map_height:res.windowWidth
,controls:[{
id:1,
iconPath:'../imgs/ic_location.png',
position:{
left:res.windowWidth/2-8,
top:res.windowWidth/2-16,
width:30,
height:30
},
clickable:true
}]
})
}
})
}
//获取中间点的经纬度，并mark出来
,getLngLat:function(){
varthat=this;
this.mapCtx=wx.createMapContext("map4select");
this.mapCtx.getCenterLocation({
success:function(res){
that.setData({
longitude:113.324520
,latitude:23.099994
,markers:[
{
id:0
,iconPath:"../imgs/ic_position.png"
,longitude:113.324520
,latitude:23.099994
,width:30
,height:30
}
]
})
}
})
}
,regionchange(e){
//地图发生变化的时候，获取中间点，也就是用户选择的位置
if(e.type=='end'){
this.getLngLat()
}
}
,markertap(e){
console.log(e)
}
})

index.js和index.wxml两个文件的代码已经写好，那么我们就来页面上看看效果。

PS：“../imgs/ic_position.png”和“../imgs/ic_location.png”是我在项目里创建的一个名叫imgs文件夹里面的两个定位小图标，各位小伙伴们可以根据自己的需求改换小图标，只需要把小图标放进imgs文件夹里面，小图标的路径引用正确就可以显示出来。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

返回顶部
3162201930
czq8825@qq.com

微信小程序 开发MAP（地图）实例详解

热门推荐

随机推荐

微信小程序开发MAP（地图）实例详解