微信小程序选择地址填写详细地址定位地点

最新推荐文章于 2024-08-19 10:29:07 发布

颖浩

最新推荐文章于 2024-08-19 10:29:07 发布

阅读量5.5k

点赞数 2

本文链接：https://blog.csdn.net/weixin_44132829/article/details/108147649

版权

本文介绍了如何在微信小程序中实现地址选择和详细地址定位。通过引用城市选择器组件和利用官方JavaScript SDK，结合关键文档，实现了地图标记和地址拼接功能。读者需了解前期准备，包括获取SDK和申请key。

摘要由CSDN通过智能技术生成

感觉自己做了一个没有意义的东东，选择地址填写详细地址就可以找到那个地方。

如下图所示

在这里插入图片描述
首先需要一个写好的城市选择器，你可以自己写，也可以私信我h(￣▽￣)~*

这是外部引入的组件

<area_picker show="{
  {show}}" bind:sureSelectArea="sureSelectAreaListener"></area_picker>

重点需要看官方使用文档

https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodGeocoder

接下来就是拼接出详细地址

	<view class="card-top">   //选择器选择地址
		<view class="remark">收货地址</view>
		<view class="inputs" bindtap="chooseloaction" >
    <text decode="{
  {true}}">{
  {province}}&nbsp;{
  {city}}&nbsp;{
  {area}}</text>
    </view>
		<image class="tolocation" bindtap="getLocation" src="../../../static/images/location/all.png"></image>
	</view>
	
	<view class="line"></view>

	<view class="card-top">
		<view class="remark">门牌号
		</view>
		<input class="input" name='locationname' placeholder="例：1号楼201" />
	</view>
	</view>