微信小程序调用地图怎么实现?

　　微信小程序调用地图怎么实现?各位微信小程序开发者，如果你再开发微信小程序的时候，实现了微信小程序调用地图。那么微信用户在微信小程序里里面可以查看地图了。以下是实现的方法。

　　微信小程序调用地图怎么实现?

　　微信小程序调用地图实例说明如下：

　　小编直接上微信小程序调用地图的小demo吧!

　　配置app.json文件所要加载的微信小程序页面

　　//app.json

　　"pages":[

　　"pages/insdfhindex"

　　"window":{

　　"bacsdhoufhTextStyle":"light",

　　"nagigatdsgsadsackgrgunhdslor": "#10DDC2",

　　"nsdhfhtiohsarTsdleText": "Appjs全局名称",

　　"navigatisdBarTextStyle":"white"

　　需要注意的是:

　　* pages配置路径的时候,不要写注释!

　　* "navigationBarTitleText": "Appjs全局小程序名称",

　　是定义的全局名称,局部页面更高的方法在上面我已经提到过了!

　　(什么?没看见?诺!就是在具体要更改的界面增加json文件,重定义navigationBarTitleText的值啦)!

　　* "naergwtioeryeBackgrouywetlor": "#10DDC2",指头部背景颜色,可自行更改!

　　配置好加载的页面和基本的头部信息后,我们打开pages/index/index.wxml文件,来搭建界面的基本布局!

　　经度

　　纬度

　　位置名称

　　详细位置

　　获取位置

　　查看位置

　　然后再根据我们的需要,在index.wxss文件里面写入基本的样式

　　/**index.wxss**/

　　.wrapper{

　　height: 100%;

　　background:#fff;

　　}

　　.page-body-form-value{

　　font-size: 14px;

　　color:darkturquoise;

　　font-weight: bold;

　　padding-left: 15px;

　　border: 1px solid rgb(72, 165, 131);

　　border-radius: 4px;

　　height: 30px;

　　line-height: 30px;

　　}

　　.page-body-form-key{

　　font-size:14px;

　　padding: 10px;

　　margin-top:15px;

　　font-family: "Microsoft Yahei";

　　font-weight: bold;

　　height: 30px;

　　line-height: 30px;

　　}

　　.page-body-button{

　　margin-top:20px;

　　line-height: 2;

　　界面搭建完成,在index.wxml界面中,经纬度的获取我们采用双向绑定的机制从js中动态夺取(是不是想到了angularjs和vuejs呢),这又涉及到小程序的加载机制的问题,我将在后面的文章具体阐述,现在我们先忽略这些,本次重在走一遍流程实现效果为主!

　　打了这么久,还是先看看效果,点击左侧的调试按钮,刷新看到如下效果!

　　在index.wxml中,我们给表单中的经度和纬度输入框双向绑定经纬度的指,并给第一个按钮绑定了获取经纬度值的事件,当点击获取位置的按钮,就可以通过微信提供的接口获取我们想要的值,同时,我们也可以自己输入经纬度进行查询位置.

　　因此,接下来我们写获取地理位置的方法,打开index.js,输入以下微信代码:

　　//index.js

　　//获取应用实例

　　var app = getApp()

　　Page( {

　　data: {

　　//默认未获取地址

　　hasLocation: false

　　},

　　//获取经纬度

　　getLocation: function(e) {

　　console.log(e)

　　var that = this

　　wx.getLocation( {

　　success: function( res ) {

　　console.log( res )

　　that.setData( {

　　hasLocation: true,

　　location: {

　　longitude: res.longitude,

　　latitude: res.latitude

　　//根据经纬度在地图上显示

　　openLocation: function( e ) {

　　var value = e.detail.value

　　wx.openLocation( {

　　longitude: Number( value.longitude ),

　　latitude: Number( value.latitude )

　　在index.js中我首先定义了页面加载的时候hasLocation:false,也就是默认不加载地理位置,当点击获取地理位置的时候,通过getLocation方法获取到当前的经纬度位置,并将他以对象的形式返回回去,这样,在前端界面的input输入框中,通过{{location.longitude}}和{{location.latitude}}就可以动态获取到经纬度的值!

　　在调试中,我们点击获取地址按钮,得到我们想要的结果

　　得到地理位置后,我们就可以将这些数据发送给微信的打开地图的接口,以此来在地图中展示位置信息,给form表单绑定openLocation事件,这样当点击查看位置按钮,就可以将地理位置信息发送给openLocation事件,通过这个接口在地图中打开位置!

　　微信小程序调用地图就完成了。

　　微信小程序调用地图怎么实现?具体的方法就介绍到这里了哦，大家看完以上内容后都学会了吗?希望以上的全部内容对您开发微信小程序会有帮助哦。大家请多多的关注微微风。谢谢你的支持。

相关阅读：

　　微信公众号导航栏怎么设置?

　　微信公众号怎么添加顶部导航?

　　微信底部导航栏实现，微信公众号怎么添加底部导航?