前端添加一个搜索框，在搜索框中搜索野生动物的名字，通过后端访问数据库，查询野生动物对应的省份名称数据，获得json类型的列表数据，省份名称是中文，返回到前端， 前端使用高德api将获得的省份名称转为位置信息，并在地图上添加标记，代码怎么写

首先，需要在前端页面中添加一个输入框和一个搜索按钮，用于用户输入野生动物的名称并触发查询操作。可以使用HTML和JavaScript实现：

<input type="text" id="animalName" placeholder="请输入野生动物名称">
<button id="searchBtn">搜索</button>

const searchBtn = document.getElementById('searchBtn');
searchBtn.addEventListener('click', searchAnimal);

function searchAnimal() {
  const animalName = document.getElementById('animalName').value;
  // 发送请求到后端查询野生动物对应的省份名称数据
  // ...
}

在后端，可以使用Node.js和Express框架实现一个API接口，用于接收前端发送的查询请求，并查询野生动物对应的省份名称数据，并返回JSON格式的数据。这里假设野生动物名称和省份名称的对应关系已经存储在一个名为wildlife.json的JSON文件中。

const express = require('express');
const app = express();

app.get('/wildlife', (req, res) => {
  const animalName = req.query.name;
  const wildlife = require('./wildlife.json');
  const result = wildlife[animalName];
  res.json(result);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在前端，当用户点击搜索按钮时，会向后端发送查询请求，并获得返回的省份名称数据。可以使用Fetch API实现：

async function searchAnimal() {
  const animalName = document.getElementById('animalName').value;
  const response = await fetch(`/wildlife?name=${animalName}`);
  const data = await response.json();
  // 将省份名称转为位置信息并在地图上添加标记
  // ...
}

最后，需要使用高德API将获得的省份名称转为位置信息，并在地图上添加标记。可以使用高德地图JavaScript API实现：

async function searchAnimal() {
  const animalName = document.getElementById('animalName').value;
  const response = await fetch(`/wildlife?name=${animalName}`);
  const data = await response.json();
  const geocoder = new AMap.Geocoder({
    city: '全国'
  });
  geocoder.getLocation(data, function(status, result) {
    if (status === 'complete' && result.info === 'OK') {
      const location = result.geocodes[0].location;
      const marker = new AMap.Marker({
        position: location
      });
      map.add(marker);
      map.setCenter(location);
    } else {
      console.log('无法解析该地址');
    }
  });
}

这样，当用户在搜索框中输入野生动物的名称并点击搜索按钮后，就可以在地图上看到对应省份的标记了。