快捷導(dǎo)航

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

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

這篇文章主要介紹了微信小程序可搜索的地址選擇實(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"
  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: '上海招商局廣場(chǎng)'
  }]
 },
 onReady(e) {
  this.mapCtx = wx.createMapContext('myMap')
 }
})

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

您可能感興趣的文章:

相關(guān)文章

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