小程序定位地图开发实例分析

这篇“小程序定位地图开发实例分析”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“小程序定位地图开发实例分析”文章吧。

1.定位系统使用场景及概述

如美团外卖小程序

点定位

点搜索

显而易见，随便一个电商小程序都需要用到定位服务，那么今天我们做一个类似的定位模块
定位模块总览
外部页面

内部页面（下文说的内外部页面就是指这两个）

好了接下来我们开始动手

2.定位外部模块样式

效果

代码

//wxml <view bindtap="getlocation" class="location">  <image src="../../img/location.png"></image>  <view>{{location}}</view> </view> //wxss .location{  font-size: 17px;  width: 100%;  background:rgb(196, 228, 123);  display: flex;  /* 对于两个块元素 */  /* 垂直居中 */  align-items: center;  /* 水平居中 */  justify-content: center; } .location image{  width: 23px;  height: 23px; }

先不用管上面的{{location}}，它是我们之后要从全局变量传过来的位置信息，定位符号是用image图片放进去的，我们用flex布局让图片和文字在同一行居中显示（见注释）

3.定位模块内部样式

效果

代码（分五个小模块，见注释）

//wxml //搜索模块 <view class="header">  <view class="search"> <image src="../../img/sousuo.png"></image>  </view>  <view class="input"> <input type="text" placeholder=" 请输入你想要的内容" placeholder-class="placeholder" bindinput="bindinput" bindfocus="bindfocus" auto-focus="{{autofocus}}"></input>  </view> </view> //定位模块 <view class="dw"> <button size="mini" bindtap="getcity">  <image src='../../img/location.png'></image>  <text>定位</text>  </button> </view> //当前位置模块 <view >当前所在位置</view> <button size="mini" bindtap="nowcity" class='nowcity'>{{city}}</button> //热门城市模块 <view class="hotcity">热门城市</view> <view wx:for="{{hotcity}}" wx:key='index' class="hotcity1">  <!-- 用了view循环之后要把view设置为inline元素，不然5个view会分成5行显示 --> <button size="mini" bindtap="hotcity" data-hotcityindex='{{index}}'>{{item.cityname}}</button> </view> //地图模块 <view class="map"> <map longitude="{{longitude}}" latitude="{{latitude}}" scale="14"></map> </view>

由于我的搜索框是用了自定义组件里面的搜索组件，我是在组件的基础上改出来的，原组件是这样的

我们需要把搜索图标隐藏，我们直接设置它的透明度为0，然后把我们的定位文字跟图标通过定位直接定位到搜索框的左边，所以样式的代码如下（代码太多不好找的话可以ctrl+f直接搜索）

//wxss .dw{  color:rgb(0, 0, 0);  position: absolute;  top: 14px;  left: -2px; } .dw button{  background: white;  padding-right: 0;  display: flex;  align-items: center;  font-weight: 600 !important; } .nowcity{  font-weight: normal; } .dw image{  width: 23px;  height: 23px; } page{  padding: 10px; } .hotcity1 button{  margin: 10px;  margin-bottom: 0;  font-weight: 500 !important;   border-radius: 10px !important; } .hotcity{  margin-top: 6px;   } .map_container{  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0; } .header{  display: flex; } .search{ flex:1; height: 40px; text-align: center; background: #fff; } .input{  flex:9;  height: 40px;  background: #fff; } .input input{  background: #f1f1f1; height: 30px; margin-top: 5px; margin-bottom: 5px; margin-right: 8px; border-radius: 10px; } .search image{  width: 70%;  height: 25px;  padding-top: 9px;  padding-left: 5px; } .placeholder{  font-size: 14px; } .search image{  opacity: 0; } .input{  flex:4; } .input input{ position: relative; right: 0px; } .hotcity1{  display: inline; } .map{  position: relative; } map{  border:5px solid green;  text-align: center;  margin: 10px auto; position: relative; right: 10px;  width: 90%;  height: 150px; }

然后我们的搜索里面点击搜索还会跳转到新的搜索页面，效果如下

这里我们可以直接复用上面的搜索组件，样式代码就不再贴出来了，这个模块要将搜索自动匹配的地点名称用循环的方式显示出来，代码如下

//wxml <import src="../templates/search/search" /> <template is="search"></template> <view bindtouchstart="bindsearch" data-keywords="{{i.name}}"  class="text_box" wx:for="{{tips}}" wx:for-item="i" wx:key='index'>  {{i.name}} </view>

//wxss @import '../templates/search/search.wxss'; .text_box{  margin: 10px 25px;  border-bottom:1px solid #c3c3c3;  padding-bottom:10px }

4.外部跳转

当我们点击外部的位置信息，就跳转到内部的定位模块，刚刚我们在上面给外部的标签设置了触摸事件getlocation，接下来只要到js里面设置点击跳转（navigateto）就可以了，但由于我们的位置信息是用全局变量赋值的，所以我们要在app.js设置一个全局变量，代码如下

//app.js app({  globaldata: {   city:'暂未定位',   userinfo:'无'  },  )}

//外部js // 引入app.js const app=getapp() const appg=app.globaldata  data: { //这里要初始化location，并将全局变量赋值给它 aboutlist:'', location:appg.city  },  page({  //定义触摸事件  getlocation(){  wx.navigateto({  //跳转到内部定位页面   url: '../location/location',  })  }, )}

5.点击定位

做这个功能之前我们需要先考虑用什么地图接口，常用的有百度地图，腾讯地图，高德地图，本文选用高德地图接口作为演示，搜索https://lbs.amap.com/，注册，进入控制台，创建新应用,

再添加key

这个key就像我们小程序调用接口时的验证码，有了它我们才能从高德调取位置的数据,然后我们点击key后面的设置，再点击微信小程序sdk

进去之后点这两个，下载amap-wx.js 文件，然后在你的小程序目录里面创建一个libs文件，把这个amap-wx.js扔进去

接下来我们来到内部定位页面的js文件，因为这里要对全局变量进行修改来达到修改页面数据的效果，所以也要引入app.js，并把全局变量初始化到data里面，除此之外我们要引入高德的文件来实现高德接口的调用,在data里面我们这里顺便把等会要用到的热门城市等数据一并初始化了

const app=getapp() const appg=app.globaldata //key里面填高德控制台里面给你的key const myamapfun = new amapfile.amapwx({key:'xxxxxxxxxx'});  data: { city:appg.city, hotcity:[  {'cityname':'北京市',longitude:'116.395645038',latitude:'39.9299857781'},  {'cityname':'上海市',longitude:'121.487899486',latitude:'31.24916171'},  {'cityname':'广州市',longitude:'113.307649675',latitude:'23.1200491021'},  {'cityname':'深圳市',longitude:'114.025973657',latitude:'22.5460535462'},  {'cityname':'武汉市',longitude:'114.316200103',latitude:'30.5810841269'}, ], tips: {},//搜索自动匹配的内容 longitude:'116.4',//经度（初始值在北京） latitude:'39.9'//纬度（初始值在北京） }

然后我们给定位按钮设置点击事件getcity，这里用到高德地图里面的获取地址描述数据方法，教程可以参考刚刚高德控制台微信sdk里面的教程（下面搜索自动匹配提示的教程也一样）

此外我们我们还要在小程序后台给高德的接口添加域名，操作步骤为
登录微信公众平台，“设置“–>"开发设置"设置request合法域名，将https://restapi.amap.com 中添加进去，这样我们才能请求到高德的数据

代码

getcity(){  myamapfun.getregeo({   success: data=>{    // that.setdata({    //  city:data[0].desc.slice(0,2)    // })    appg.city=data[0].desc    wx.getlocation({     success:res=>{ this.setdata({   latitude:res.latitude,   longitude:res.longitude }) wx.setstoragesync('city', appg.city) wx.setstoragesync('latitude', res.latitude) wx.setstoragesync('longitude', res.longitude)     }    })   },   fail: function(info){    //失败回调    console.log(info)   }  }) },

getregeo方法的成功回调函数里的参数包含了定位后的位置信息(可以自己输出一下），我们把它赋值给全局变量，然后再用setdata再次把全局变量appg.city赋值给data里面的city（因为appg.city已经改变了，要重新赋值页面才会更新），除此之外我们还要把获取到的位置信息同步缓存起来，下次进入页面的时候在onload里面先判断有没有缓存的数据，如果有就直接使用缓存的数据，没有就用默认值，代码如下

onload: function (options) {   // 进页面先看有无缓存数据，如果没有再读默认值,onload里面可以取到this.data   const latitude=wx.getstoragesync('latitude')   const longitude=wx.getstoragesync('longitude')   const city=wx.getstoragesync('city')   //用了三目运算符，不习惯也可以使用if   latitude&&longitude&&city?   this.setdata({    latitude:latitude,    longitude:longitude   }):false  },

6.未定位时弹出定位框

给当前位置标签添加点击事件，判断当位置信息为初始值暂未定位时，弹出是否定位的选择框，当用户点击确定时，执行一次getcity函数即可，效果如下

代码

nowcity(){  if(this.data.city!='暂未定位'){   wx.switchtab({    url: '../about/about',   })  }else{   wx.showmodal({    title: '暂未定位',    content: '现在要进行定位吗',    success: (res)=>{     if (res.confirm) {      this.getcity()     } else if (res.cancel) {      return false     }    }   })  } },

7.热门城市点击跳转，更新数据

当我们点击热门城市里面的按钮时，跳转到外部页面，并且把对应热门城市名称更新到全局的city来传到外部页面显示，同时还要更新全局中的经纬度数据，对于经纬度只要更新缓存即可，下一次进入内部定位页面时再判断缓存中有无定位数据，如果有就直接用，city数据是更新+缓存，代码如下

hotcity(e){  const index=e.currenttarget.dataset.hotcityindex  //更新  appg.city=this.data.hotcity[index].cityname  //缓存   wx.setstoragesync('city', appg.city)  wx.setstoragesync('latitude', this.data.hotcity[index].latitude)  wx.setstoragesync('longitude', this.data.hotcity[index].longitude)  //跳转 wx.relaunch({  url: '../about/about',  success:()=>{   // 不要把数据的更新写在这里，要在跳转之前就写好，因为这个回调函数是在跳转的页面所有函数   // 执行完之后才执行的，会导致数据两次跳转次才更新  } }) },

上述代码中注意要在热门城市的循环标签用data-hotcityindex="{{index}}"把下标传到js中，再在js中用e.currenttarget.dataset.hotcityindex去取出来用，这个下标用来对应热门城市数组的每一个对象，这样我们就可以用this.data.hotcity[index].cityname来获取被点击的城市的名称，再把它更新到appg.city中，注意跳转的时候不能用wx.switchtab,因为从外部页面进来的时候已经打开了外部页面，那么用wx.switchtab的时候只会执行外部页面的onshow函数，而不会执行onload,会导致页面数据无法更新

8.搜索跳转和输入自动匹配地名

搜索跳转新页面（给内部定位页面设置聚焦事件）

bindfocus(e){  wx.navigateto({   url: '../locationsearch/locationsearch',  }) },

注意内部页面的搜索框不是自动聚焦的，而跳转到新的搜索页面的搜索框是会自动聚焦的，这一点我们可以通过在搜索组件的input标签添加auto-focus="{{autofocus}}"，再控制autofocus的值来控制是否自动聚焦，代码如下

<template is="search" data="{{autofocus}}"></template>

注意data="{{xxx}}"是自定义组件特有的传参方式，可以把js里面的值传到组件中使用不过我们得先在搜索页面的js的data中给autofocus赋值，这里顺便把保存自动匹配的地名的值tips也初始化了

data: { autofocus:true, tips:{}  },

接下来我们写输入自动匹配地名，同样在搜索页面的js引入全局变量和高德js文件

const amapfile = require('../../libs/amap-wx.js'); const app=getapp() const appg=app.globaldata const myamapfun = new amapfile.amapwx({key:'0c2c8f2007702caa7e0498d6ad072f83'});

然后我们来监听用户的输入行为，设置为bindinput函数

<input type="text" placeholder=" 请输入你想要的内容" placeholder-class="placeholder"  bindinput="bindinput" bindfocus="bindfocus" auto-focus="{{autofocus}}"></input>

搜索页面的js中定义bindinput

bindinput(e){  myamapfun.getinputtips({   // keywords为必填，不然无法获得tips，也就不会进入success函数   keywords:e.detail.value,   success:data=>{  this.setdata({   tips:data.tips  })   }  }) },

上面的getinputtips就是我们第5点中讲到的微信小程序sdk中的获取提示词里面的方法，可以自己去看高德的教程，此处不再赘述，上面的keywords的值就是用户输入的内容，接口会根据这个去寻找对应匹配的地名并返回在success函数的参数中，我们只需要在成功回调函数中更新tips就可以了，那么此时假如我们输入武汉，效果如下

那么当我们点击自动匹配的地名的时候，需要返回到外部页面，并且更新数据，更新缓存，思路和上面的跳转方法是一样的，代码如下

bindsearch(e){  const location=this.data.tips[e.currenttarget.dataset.searchindex]  wx.setstoragesync('city', location.name)  if(location.location.length!=0){   const longitude=location.location.split(',')[0]   const latitude=location.location.split(',')[1]  wx.setstoragesync('latitude', latitude)  wx.setstoragesync('longitude', longitude)  wx.relaunch({   url: '../about/about',    success:()=>{        appg.city=e.currenttarget.dataset.keywords     }  })  }else{   wx.relaunch({    url: '../about/about',     success:()=>{         appg.city=e.currenttarget.dataset.keywords           settimeout(()=>{wx.showtoast({          title: '暂无经纬度数据',         // 提示延迟时间，不能用字符串          duration:2000,          icon:'none'         })        },500);    }   })  }

以上就是关于“小程序定位地图开发实例分析”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。