在tarn中使用react开发小程序如何使用高德地图

在React开发小程序中使用高德地图，你需要先在小程序中引入高德地图的Javascript API，然后利用React的生命周期函数，在组件挂载时初始化地图并进行相关设置。

以下是一个简单的示例代码：

1. 在小程序中引入高德地图的Javascript API

<script src="//webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script>

2. 在React组件中初始化地图

import React, { Component } from 'react';

class Map extends Component {
  componentDidMount() {
    // 初始化地图
    const map = new window.AMap.Map('map-container', {
      zoom: 10,
      center: [116.397428, 39.90923]
    });

    // 添加标记
    const marker = new window.AMap.Marker({
      position: [116.397428, 39.90923]
    });
    map.add(marker);
  }

  render() {
    return (
      <div id="map-container" style={{ width: '100%', height: '300px' }}></div>
    );
  }
}

export default Map;

在以上代码中，我们在组件挂载时通过Javascript API初始化了一个地图，并在地图上添加了一个标记。这里需要注意的是，在组件卸载时需要手动销毁地图实例，避免内存泄漏。

componentWillUnmount() {
  window.AMap.destroy();
}

以上代码只是一个简单的示例，你可以根据自己的需求进行更复杂的配置和使用。同时，高德地图提供了非常丰富的API和文档，可以帮助你更好地使用它的功能。