腾讯地图集成指南

1. 获取API密钥

首先需要在腾讯地图开放平台注册账户并通过邮件验证，然后申请开发密钥(Key)：
腾讯地图控制台

2. 引入SDK脚本

在 public/index.html 文件中添加腾讯地图JavaScript API引用：

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_API_KEY"></script>

3. 设置容器样式

在CSS中为地图容器设置宽高：

#container {
    min-width: 100%;
    min-height: 300px;
}

4. 创建地图容器

在组件模板中添加地图容器元素：

<div id="container"></div>

5. 初始化地图组件

在组件的生命周期函数中初始化地图：

componentDidMount() {
    // 初始化地图实例
    var qq = window.qq;
    var map = new qq.maps.Map(document.getElementById("container"), {
        center: new qq.maps.LatLng(37.80789920419703, 112.56275080159814), // 设置地图中心点坐标
        zoom: 18,                                                           // 设置地图缩放级别
        mapStyleId: 'style1'                                                // 设置地图样式
    });
    
    // 添加标记点
    var marker = new qq.maps.Marker({
        position: new qq.maps.LatLng(37.80789920419703, 112.56275080159814),
        map: map
    });
}

6. 地理编码服务

根据经纬度获取详细地址信息：

// 创建地理编码服务实例
var geocoder = new qq.maps.Geocoder();

// 设置请求成功回调函数
geocoder.setComplete(function(result) {
    console.log(result.detail);
});

// 对指定经纬度进行地址解析
geocoder.getAddress(latLng);

7. 获取用户当前位置

方法一：HTML5原生Geolocation（存在兼容性问题）

// 注意：iOS系统要求HTTPS环境下才能获取位置信息
navigator.geolocation.getCurrentPosition(showPosition);

function showPosition(position) {
    var lat = position.coords.latitude; 
    var lng = position.coords.longitude;
    console.log(position.coords);
}

方法二：腾讯地图Geolocation组件（推荐）

引入腾讯地图定位组件：

<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

使用定位服务：

var geolocation = new qq.maps.Geolocation("YOUR_API_KEY", "myapp");

geolocation.getLocation(
    function(position) {
        console.log(position);
        console.log(JSON.stringify(position, null, 4));
    }, 
    function() {
        console.log('获取位置失败，如果是PC，请设置模拟器Sensors');
    }
);

ECharts数据可视化集成

1. 引入ECharts库

在HTML中引入ECharts JavaScript文件：

<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

2. 创建图表容器

<div id="main2" style={{width:'100%', height:400}}></div>

3. 初始化图表

// 基于准备好的DOM容器初始化ECharts实例
var echarts = window.echarts;
var myChart = echarts.init(document.getElementById('main2'));

// 配置图表选项
var option = {
    tooltip: {},
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用配置项渲染图表
myChart.setOption(option);

参考资源

• 腾讯地图JavaScript API文档
• ECharts官方教程
• ECharts配置项手册
• ECharts示例中心