小程序开发中如何使用定位地图模块

//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 &＃39;../templates/search/search.wxss&＃39;;
.text_box{
 margin: 10px 25px;
 border-bottom:1px solid #c3c3c3;
 padding-bottom:10px
}

//app.js
App({
 globalData: {
  city:&＃39;暂未定位&＃39;,
  userInfo:&＃39;无&＃39;
 },
 )}

//外部js
// 引入app.js
const app=getApp()
const appG=app.globalData
 data: {
//这里要初始化location，并将全局变量赋值给它
aboutList:&＃39;&＃39;,
location:appG.city
 },
 Page({
 //定义触摸事件
 getLocation(){
 wx.navigateTo({
 //跳转到内部定位页面
  url: &＃39;../location/location&＃39;,
 }) 
},
)}

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

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(&＃39;city&＃39;, appG.city)
wx.setStorageSync(&＃39;latitude&＃39;, res.latitude)
wx.setStorageSync(&＃39;longitude&＃39;, res.longitude)
    }
   })
  },
  fail: function(info){
   //失败回调
   console.log(info)
  }
 })
},

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

nowCity(){
 if(this.data.city!=&＃39;暂未定位&＃39;){
  wx.switchTab({
   url: &＃39;../about/about&＃39;,
  })
 }else{
  wx.showModal({
   title: &＃39;暂未定位&＃39;,
   content: &＃39;现在要进行定位吗&＃39;,
   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(&＃39;city&＃39;, appG.city)
 wx.setStorageSync(&＃39;latitude&＃39;, this.data.hotcity[index].latitude)
 wx.setStorageSync(&＃39;longitude&＃39;, this.data.hotcity[index].longitude)
 //跳转
wx.reLaunch({
 url: &＃39;../about/about&＃39;,
 success:()=>{
  // 不要把数据的更新写在这里，要在跳转之前就写好，因为这个回调函数是在跳转的页面所有函数
  // 执行完之后才执行的，会导致数据两次跳转次才更新
 }
})
},

bindFocus(e){
 wx.navigateTo({
  url: &＃39;../locationSearch/locationSearch&＃39;,
 })
},

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

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

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(&＃39;city&＃39;, location.name)
 if(location.location.length!=0){
  const lOngitude=location.location.split(&＃39;,&＃39;)[0]
  const latitude=location.location.split(&＃39;,&＃39;)[1]
 wx.setStorageSync(&＃39;latitude&＃39;, latitude)
 wx.setStorageSync(&＃39;longitude&＃39;, longitude)
 wx.reLaunch({
  url: &＃39;../about/about&＃39;,
   success:()=>{
       appG.city=e.currentTarget.dataset.keywords  
  }
 })
 }else{
  wx.reLaunch({
   url: &＃39;../about/about&＃39;,
    success:()=>{
        appG.city=e.currentTarget.dataset.keywords  
        setTimeout(()=>{wx.showToast({
         title: &＃39;暂无经纬度数据&＃39;,
        // 提示延迟时间，不能用字符串
         duration:2000,
         icon:&＃39;none&＃39;
        })
       },500);
   }
  })
 }