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

更新時間：2019年08月28日 11:46:38 作者：可憐的小黑兔

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

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

效果實現(xiàn)步驟

新建index文件夾

index.wxml

<!--pages/index/index.wxml-->
<view class='container'>
 <view bindtap='onChangeAddress'>
  <input value="{{address}}" name="address" placeholder="選擇地點">
 </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"
  style="width: 100%; height: 100%;"
  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: '上海招商局廣場'
  }]
 },
 onReady(e) {
  this.mapCtx = wx.createMapContext('myMap')
 }
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

微信小程序開發(fā)實戰(zhàn)教程之手勢解鎖
這篇文章主要介紹了微信小程序開發(fā)實戰(zhàn)教程之手勢解鎖的相關(guān)資料,本文分步驟給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下
2016-11-11
IE8利用自帶的setCapture和releaseCapture解決iframe的拖拽事件方法
最近有個需求須要實現(xiàn)左右拖拽功能，頁面右邊是個iframe頁面，在chrome測試通過之后，發(fā)現(xiàn)在ie8上面效果不是很理想，查閱相關(guān)資料找到可以使用ie自帶的setCapture和releaseCapture來解決,需要的朋友可以參考下
2016-10-10
用js取得鼠標(biāo)所在位置的對象
用js取得鼠標(biāo)所在位置的對象...
2007-01-01
javascript表格的渲染組件
這篇文章主要介紹了javascript表格的渲染組件的相關(guān)資料,需要的朋友可以參考下
2015-07-07
原生js實現(xiàn)移動端瀑布流式代碼示例
這篇文章主要為大家分享了原生js實現(xiàn)移動端瀑布流式代碼示例，對瀑布流布局感興趣的小伙伴們可以參考一下
2015-12-12
JavaScript中的this關(guān)鍵字用法詳解
在編寫JavaScript應(yīng)用的時候，我們經(jīng)常會使用this關(guān)鍵字。那么this關(guān)鍵字究竟是怎樣工作的，它的設(shè)計有哪些好的地方，有哪些不好的地方，本文帶大家全面系統(tǒng)地認識這個老朋友，感興趣的小伙伴可以借鑒閱讀
2023-05-05
JS 常用校驗函數(shù)
比較常用到的一些字符驗證函數(shù)，里面有正則等好東西，推薦大家保存即可直接調(diào)用。
2009-03-03
微信小程序入口場景的問題集合與相關(guān)解決方法
這篇文章主要介紹了微信小程序入口場景的問題集合與相關(guān)解決方法,從零開始開發(fā)一個小程序，大多數(shù)坑點都是在微信小程序的各個入口場景處。所以這里整理一下微信小程序的各個入口場景會面臨的問題以及解決方案,需要的朋友可以參考下
2019-06-06
JavaScript實現(xiàn)簡單計算器
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
Three光源Target位置改變光照方向不變的問題解決方法
這篇文章主要為大家介紹了Three光源Target位置改變光照方向不變的問題及解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-12-12