微信小程序（六）定位搜索

一、引言

        作者上一章讲了微信小程序的地图实现微信小程序（五）地图-CSDN博客，但是还有一个功能是和地图紧密结合的，那就是位置搜索定位，这里作者讲讲实现和原理，包括城市筛选。

二、定位搜索实现

1、位置搜索样式

        这个其实就是样式啦，不是固定要和作者一样的

        上面一个搜索框，下面展示搜索到的相关位置

<view class="top">
                <view class="back iconfont icon-fanhui" bindtap="back1"></view>
                <view class="search-box {
  {addListShow?'search-box1':''}}">
                    <view class="region" bindtap="chooseCity">{
  {currentRegion.district}}</view>
                    <view class="shu"></view>
                    <input class="input-box" bindinput="getsuggest" placeholder="请输入目标位置"></input>
                </view>
            </view>
            <!--关键词输入提示列表渲染-->
            <view class="add-list-box">
                <scroll-view class="add-list" scroll-y>
                    <view class="add-item" wx:for="{
  {suggestion}}" wx:key="index">
                        <!--绑定回填事件-->
                        <view bindtap="backfill" id="{
  {index}}" data-name="{
  {item.title}}">
                            <!--根据需求渲染相应数据-->
                            <!--渲染地址title-->
                            <view class="title">{
  {item.title}}</view>
                            <!--渲染详细地址-->
                            <view class="add">{
  {item.addr}}</view>
                        </view>
                    </view>
                </scroll-view>

2、拖动地图

        随着地图拖拽，显示的附近位置也会改变

<cover-view class="top">
                    <cover-view class="back" bindtap="back1">
                        <cover-image src="/static/images/detail_back.png"></cover-image>
                    </cover-view>
                    <cover-view class="search-box">
                        <cover-view class="region" bindtap="chooseCity">{
  {currentRegion.district}}</cover-view>
                        <cover-view class="shu"></cover-view>
                        <cover-view class="placeholder" bindtap="showAddList">请输入地址</cover-view>
                    </cover-view>
                </cover-view>
                <cover-view class="map-prompt">您可拖动地图, 标记准确位置</cover-view>
                <cover-image class="current-site-icon" src="/static/images/my_marker.png"></cover-image>
                <cover-view class="reload" bindtap="reload">
                    <cover-view class="center1">
                        <cover-view class="center2"></cover-view>
                    </cover-view>
                </cover-view>

3、附近位置样式

        这里展示附近的位置，最终选定之后可以点击位置确认

<scroll-view class="near-list" scroll-y>
                <!--绑定回填事件-->
                <view class="near-item" wx:for="{
  {nearList}}" wx:key="index">
                    <view class="current-site iconfont icon-location" wx:if="{
  {index == selectedId }}"></view>
                    <!--根据需求渲染相应数据-->
                    <view bindtap="chooseCenter" id="{
  {index}}" data-name="{
  {item.title