超详细小程序定位地图模块全系列开发教学

//wxml

 
 {{location}}

//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;
}

//wxml
//搜索模块

 

 
 

 

//定位模块


 
 定位
 

//当前位置模块
当前所在位置
{{city}}
//热门城市模块
热门城市

 
{{item.cityName}}

//地图模块

//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



 {{i.name}}

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

//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',
 }) 
},
)}

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(){
 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)
  }
 })
},

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&＃63;
  this.setData({
   latitude:latitude,
   longitude:longitude
  }):false
 },

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
    }
   }
  })
 }
},

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:()=>{
  // 不要把数据的更新写在这里，要在跳转之前就写好，因为这个回调函数是在跳转的页面所有函数
  // 执行完之后才执行的，会导致数据两次跳转次才更新
 }
})
},

bindFocus(e){
 wx.navigateTo({
  url: '../locationSearch/locationSearch',
 })
},

data: {
autoFocus:true,
tips:{}
 },

const amapFile = require('../../libs/amap-wx.js');
const app=getApp()
const appG=app.globalData
const myAmapFun = new amapFile.AMapWX({key:'0c2c8f2007702caa7e0498d6ad072f83'});

bindInput(e){
 myAmapFun.getInputtips({
  // keywords为必填，不然无法获得tips，也就不会进入success函数
  keywords:e.detail.value,
  success:data=>{
 this.setData({
  tips:data.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);
   }
  })
 }