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

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

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

最終實現(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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js傳各種類型參數(shù)到Controller層的整理方式
這篇文章主要介紹了js傳各種類型參數(shù)到Controller層的整理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
JS?for?in遍歷對象順序不對解決辦法
最近使用for-in語句遍歷對象屬性時發(fā)現(xiàn)遍歷順序并非屬性構(gòu)建順序,這篇文章主要給大家介紹了關(guān)于JS?for?in遍歷對象順序不對的解決辦法,需要的朋友可以參考下
2023-11-11
微信小程序使用ucharts在小程序中加入橫屏展示功能的全過程
這篇文章主要給大家介紹了關(guān)于微信小程序使用ucharts在小程序中加入橫屏展示功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用微信小程序具有一定的參考學習價值,需要的朋友可以參考下
2022-09-09
JS利用原生canvas實現(xiàn)圖形標注功能
這篇文章主要為大家詳細介紹了JS如何利用原生canvas實現(xiàn)圖形標注功能,支持矩形、多邊形、線段、圓形等已繪制的圖形進行縮放,移動,需要的可以參考下
2024-03-03
javascript解析xml字符串的函數(shù)
在使用操作XML文件時,我們可以使用Load方法直接加載xml文件即可，在ie和ff下通用。
2008-06-06
Postman的FormData傳參的使用示例詳解
今年上半年因為做畢設(shè)的原因,有自己接觸到后端,也是用過了postman去測試接口,看到了postman那邊的參數(shù)形式,一直對這個formData有想法,今天通過本文給大家介紹Postman的FormData傳參的使用,感興趣的朋友一起看看吧
2023-10-10
JS+JSP checkBox 全選具體實現(xiàn)
本文為大家介紹下使用JS+JSP實現(xiàn)checkBox全選，下面有個不錯的示例，感興趣的朋友可以參考下
2014-01-01
ES6入門教程之Iterator與for...of循環(huán)詳解
最近在學習ES6，剛剛看到Iterator和for...of循環(huán)這一章，所以想要跟大家略微分享一下，下面這篇文章主要給大家介紹了關(guān)于ES6入門學習中Iterator與for...of循環(huán)的相關(guān)資料，不足之處還望大家多多指正，需要的朋友們可以參考學習。
2017-05-05
使用JavaScript實現(xiàn)頁面局部更新的方法總結(jié)
在JavaScript中,Ajax（Asynchronous JavaScript and XML）是一種用于在后臺與服務(wù)器進行異步通信的技術(shù),本文給大家介紹了使用JavaScript實現(xiàn)頁面局部更新的三種方法,文中通過代碼示例給大家介紹的非常詳細,需要的朋友可以參考下
2023-12-12
還不懂遞歸？讀完這篇文章保證你會懂
你還不懂遞歸？讀完這篇文章保證你會懂，下面這篇文章主要給大家介紹了關(guān)于遞歸的相關(guān)內(nèi)容，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-07-07