vue3+ ts引入天地图搜索功能+地理区域选择

可爱的橙子大爷

已于 2023-07-03 10:35:37 修改

阅读量2.2k

点赞数 1

分类专栏：小吴的vue学习之路文章标签： swift 开发语言 ios

于 2023-07-03 10:33:55 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42337801/article/details/131510949

版权

前言：
天地图为开发者提供应用程序开发接口和在线服务资源，可满足各类基于地理信息的应用开发需求。

引入
在这里插入图片描述

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=你注册的key" type="text/javascript"></script>

使用

<template>
  <div>
    <el-cascader
      @change="handleAddressChange"
      :options="addressValue"
      placeholder="请选择方案地区"
      filterable
      clearable
    >
    </el-cascader>
    <el-input
      v-model="detailedAddress"
      placeholder="请输入详细地址"
      clearable
    />
    <el-button @click="getLocation">定位</el-button>
    <h2>address:{
   {
    siteInfo.address }}</h2>
    <div class="map-containera" id="map-containera">
      <div
        id="searchResultPanel"
        style="
          border: 1px solid #c0c0c0;
          width: 150px;
          height: auto;
          display: none;
        "
      ></div>
    </div>
  </div>