微信小程序可搜索的地址選擇實(shí)現(xiàn)詳解

發(fā)布時(shí)間：2020-10-25 10:27:22 來(lái)源：腳本之家閱讀：247 作者：可憐的小黑兔欄目：web開(kāi)發(fā)

這篇文章主要介紹了微信小程序可搜索的地址選擇實(shí)現(xiàn)詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

最終實(shí)現(xiàn)效果：

效果實(shí)現(xiàn)步驟

新建index文件夾

index.wxml

<!--pages/index/index.wxml-->
<view class='container'>
 <view bindtap='onChangeAddress'>
  <input value="{{address}}" name="address" placeholder="選擇地點(diǎn)">
 </view>
</view>

index.js

// pages/index/index.js
Page({
 data: {
  address: ''
 },
 onChangeAddress() {
  var _page = this;
  wx.chooseLocation({
   success: (res) => {
    _page.setData({
     address: res.name
    });
   },
   fail: (err) => {
    console.log(err);
   }
  });
 }
})

新建map文件夾

map.wxml

<!--pages/map/map.wxml-->
<view class="container">
 <map
  id="myMap"
  
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  markers="{{markers}}"
  show-location
 ></map>
</view>

map.js

// pages/map/map.js
Page({
 data: {
  latitude: 31.22786,
  longitude: 121.46658,
  markers: [{
   id: 1,
   latitude: 31.22786,
   longitude: 121.46658,
   name: '上海招商局廣場(chǎng)'
  }]
 },
 onReady(e) {
  this.mapCtx = wx.createMapContext('myMap')
 }
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

微信小程序 可搜索的地址選擇實(shí)現(xiàn)詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

微信小程序可搜索的地址選擇實(shí)現(xiàn)詳解