提供一个抖音小程序页面代码，功能是通过输入位置名称自动定位到目标位置。第一次进入页面地图中心点要定位到自身所在位置。

以下是一个基本的抖音小程序页面代码，用于通过输入位置名称实现自动定位到目标位置：

<view class="page">
  <view class="header">
    <view class="search-box">
      <input class="search-input" type="text" placeholder="请输入位置名称" bindinput="onInput" />
      <button class="search-button" bindtap="onSearch">搜索</button>
    </view>
  </view>
  <view class="map-container">
    <map class="map" id="map" show-location bindregionchange="onRegionChange" />
  </view>
</view>

在上面的代码中，我们使用了一个输入框和一个搜索按钮，用于输入和搜索位置名称。同时，我们还使用了一个地图容器，用于显示地图并在地图上标注目标位置。

需要注意的是，我们在地图上添加了一个 `show-location` 属性，用于在地图上显示当前位置。此外，我们还使用了一个 `bindregionchange` 事件，用于在地图移动时获取当前地图的中心点坐标。

下面是该页面的基本样式代码：

.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.search-box {
  display: flex;
  align-items: center;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: #f5f5f5;
  padding: 0 20rpx;
}

.search-input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  border: none;
  background-color: transparent;
}

.search-button {
  width: 120rpx;
  height: 60rpx;
  font-size: 28rpx;
  border: none;
  border-radius: 30rpx;
  background-color: #ff7644;
  color: #fff;
  margin-left: 20rpx;
}

.map-container {
  flex: 1;
  position: relative;
}

.map {
  width: 100%;
  height: 100%;
  z-index: 1;
}

在上面的样式代码中，我们对页面的不同部分进行了布局和样式设置。其中，我们使用了 `flex` 布局和一些基本的样式属性，如 `background-color`、`border-radius` 等。

下面是页面的基本脚本代码：

Page({
  data: {
    longitude: '', // 目标位置的经度
    latitude: '', // 目标位置的纬度
    markers: [], // 地图上的标记
    currentLocation: '', // 当前位置名称
    regionChange: true // 是否是由地图移动事件触发的
  },
  // 页面加载时进行定位
  onLoad() {
    wx.getLocation({
      type: 'gcj02',
      success: res => {
        this.setData({
          longitude: res.longitude,
          latitude: res.latitude,
          markers: [{
            id: 0,
            longitude: res.longitude,
            latitude: res.latitude,
            iconPath: '/images/location.png',
            width: 40,
            height: 40,
            callout: {
              content: '当前位置',
              color: '#ffffff',
              bgColor: '#ff7644',
              padding: 10,
              borderRadius: 10,
              display: 'ALWAYS'
            }
          }]
        });
      }
    });
  },
  // 输入框内容发生变化时触发
  onInput(e) {
    this.setData({
      currentLocation: e.detail.value.trim()
    });
  },
  // 点击搜索按钮时触发
  onSearch() {
    if (!this.data.currentLocation) {
      wx.showToast({
        title: '请输入位置名称',
        icon: 'none',
        duration: 2000
      });
      return;
    }
    wx.request({
      url: 'https://apis.map.qq.com/ws/place/v1/search',
      data: {
        keyword: this.data.currentLocation,
        region: '全国',
        key: 'your_key'
      },
      success: res => {
        if (res.data.status !== 0 || !res.data.data.length) {
          wx.showToast({
            title: '未找到对应位置',
            icon: 'none',
            duration: 2000
          });
          return;
        }
        const { location } = res.data.data[0];
        this.setData({
          longitude: location.lng,
          latitude: location.lat,
          markers: [{
            id: 0,
            longitude: location.lng,
            latitude: location.lat,
            iconPath: '/images/location.png',
            width: 40,
            height: 40,
            callout: {
              content: this.data.currentLocation,
              color: '#ffffff',
              bgColor: '#ff7644',
              padding: 10,
              borderRadius: 10,
              display: 'ALWAYS'
            }
          }],
          regionChange: false
        });
      },
      fail: () => {
        wx.showToast({
          title: '请求失败',
          icon: 'none',
          duration: 2000
        });
      }
    });
  },
  // 地图发生移动时触发
  onRegionChange(e) {
    if (this.data.regionChange) {
      return;
    }
    const { type } = e;
    if (type === 'end') {
      const { longitude, latitude } = e.detail;
      wx.request({
        url: 'https://apis.map.qq.com/ws/geocoder/v1/',
        data: {
          location: `${latitude},${longitude}`,
          key: 'your_key'
        },
        success: res => {
          const { address } = res.data.result;
          this.setData({
            currentLocation: address,
            regionChange: true
          });
        }
      });
    }
  }
});

在上面的脚本代码中，我们首先定义了一些页面的基本数据，如目标位置的经纬度、地图上的标记、当前位置名称等。同时，我们还在 `onLoad` 生命周期中使用 `wx.getLocation` 方法获取当前位置的经纬度，并在地图上添加一个标记。

在输入框发生变化或点击搜索按钮时，我们使用 `wx.request` 方法调用腾讯地图 API，根据输入的位置名称获取目标位置的经纬度，并在地图上添加一个标记。在地图移动事件发生时，我们同样使用 `wx.request` 方法调用腾讯地图 API，根据当前地图的中心点坐标获取当前位置名称，并将其更新到页面的数据中。

需要注意的是，在搜索按钮点击事件中，我们需要替换 `your_key` 为自己在腾讯地图开放平台上申请的密钥。同时，在页面的 `json` 文件中还需要添加如下配置：

{
  "usingComponents": {
    "map": "@tencent/map-wx-jssdk"
  }
}

这样才能正确使用腾讯地图的相关组件和 API。