//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;
 /* 對(duì)于兩個(gè)塊元素 */
 /* 垂直居中 */
 align-items: center;
 /* 水平居中 */
 justify-content: center;
}
.location image{
 width: 23px;
 height: 23px;
}

//wxml
//搜索模塊
<view class="header">
 <view class="search">
<image src="../../img/sousuo.png"></image>
 </view>
 <view class="input">
<input type="text" placeholder=" 請(qǐng)輸入你想要的內(nèi)容" 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>
//當(dāng)前位置模塊
<view >當(dāng)前所在位置</view>
<button size="mini" bindtap="nowCity" class='nowcity'>{{city}}</button>
//熱門城市模塊
<view class="hotcity">熱門城市</view>
<view wx:for="{{hotcity}}" wx:key='index' class="hotcity1">
 <!-- 用了view循環(huán)之后要把view設(shè)置為inline元素，不然5個(gè)view會(huì)分成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>

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

//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({
 //跳轉(zhuǎn)到內(nèi)部定位頁(yè)面
  url: '../location/location',
 }) 
},
)}

const app=getApp()
const appG=app.globalData
//key里面填高德控制臺(tái)里面給你的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: {},//搜索自動(dòng)匹配的內(nèi)容
longitude:'116.4',//經(jīng)度（初始值在北京）
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){
   //失敗回調(diào)
   console.log(info)
  }
 })
},

onLoad: function (options) {
  // 進(jìn)頁(yè)面先看有無緩存數(shù)據(jù)，如果沒有再讀默認(rèn)值,onLoad里面可以取到this.data
  const latitude=wx.getStorageSync('latitude')
  const longitude=wx.getStorageSync('longitude')
  const city=wx.getStorageSync('city')
  //用了三目運(yùn)算符，不習(xí)慣也可以使用if
  latitude&&longitude&&city?
  this.setData({
   latitude:latitude,
   longitude:longitude
  }):false
 },

nowCity(){
 if(this.data.city!='暫未定位'){
  wx.switchTab({
   url: '../about/about',
  })
 }else{
  wx.showModal({
   title: '暫未定位',
   content: '現(xiàn)在要進(jìn)行定位嗎',
   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)
 //跳轉(zhuǎn)
wx.reLaunch({
 url: '../about/about',
 success:()=>{
  // 不要把數(shù)據(jù)的更新寫在這里，要在跳轉(zhuǎn)之前就寫好，因?yàn)檫@個(gè)回調(diào)函數(shù)是在跳轉(zhuǎn)的頁(yè)面所有函數(shù)
  // 執(zhí)行完之后才執(zhí)行的，會(huì)導(dǎo)致數(shù)據(jù)兩次跳轉(zhuǎn)次才更新
 }
})
},

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

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

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'});

<input type="text" placeholder=" 請(qǐng)輸入你想要的內(nèi)容" placeholder-class="placeholder"
 bindinput="bindInput" bindfocus="bindFocus" auto-focus="{{autoFocus}}"></input>

bindInput(e){
 myAmapFun.getInputtips({
  // keywords為必填，不然無法獲得tips，也就不會(huì)進(jìn)入success函數(shù)
  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: '暫無經(jīng)緯度數(shù)據(jù)',
        // 提示延遲時(shí)間，不能用字符串
         duration:2000,
         icon:'none'
        })
       },500);
   }
  })
 }