react-06-腾讯地图的使用

腾讯地图

先在腾讯地图注册账户，邮件确认验证，申请key

https://lbs.qq.com/console/customized/log/?console=customizedLog

在 public/index.html 中引入脚本文件

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=6LLBZ-QMLCX-HNA4L-T3ADN-4O3V5-BFFLB"></script>

在 css 样式中设置容器宽高

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

在组件页编写容器

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

在组件页的钩子函数中编写代码

componentDidMount(){
    //https://lbs.qq.com/javascript_v2/doc/index.html

    var qq = window.qq;
    /*
    setTimeout(()=>{
        var map = new qq.maps.Map(document.getElementById("container"), {
            center: new qq.maps.LatLng(39.916527, 116.397128),      // 地图的中心地理坐标
            zoom: 8,     // 地图缩放级别
            mapStyleId: 'style1',  // 该key绑定的style1对应于经典地图样式，若未绑定将弹出无权限提示窗
            
        });

        //setTimeout(()=>{
            //https://lbs.qq.com/javascript_v2/doc/cityservice.html
            //设置城市信息查询服务
            var citylocation = new qq.maps.CityService();
            //请求成功回调函数
            citylocation.setComplete(function(result) {
                var zb = result.detail.latLng;
                //console.log(zb)
                map.setCenter(zb);
                map.setZoom(15);


                //https://lbs.qq.com/javascript_v2/doc/marker.html
                //创建一个Marker
                var marker = new qq.maps.Marker({
                    //设置Marker的位置坐标
                    position: zb,
                    //设置显示Marker的地图
                    map: map
                });

                //设置Marker是否可以被拖拽，为true时可拖拽，false时不可拖拽，默认属性为false
                marker.setDraggable(true);

                //设置Marker停止拖动事件
                qq.maps.event.addListener(marker, 'dragend', function() {
                    console.log(marker.getPosition())
                    console.log(map.getZoom())
                });


            });
            citylocation.searchCityByName('太原市');


        //}, 3100)

    }, 100)
    */

    //{lat: 37.80789920419703, lng: 112.56275080159814}    
    var map = new qq.maps.Map(document.getElementById("container"), {
        center: new qq.maps.LatLng(37.80789920419703, 112.56275080159814),      // 地图的中心地理坐标
        zoom: 18,     // 地图缩放级别
        mapStyleId: 'style1',  // 该key绑定的style1对应于经典地图样式，若未绑定将弹出无权限提示窗
        
    });
    var marker = new qq.maps.Marker({
        //设置Marker的位置坐标
        position: new qq.maps.LatLng(37.80789920419703, 112.56275080159814),
        //设置显示Marker的地图
        map: map
    });


}

根据经纬度，返回地址

//https://lbs.qq.com/javascript_v2/doc/geocoder.html
//地址和经纬度之间进行转换服务
var geocoder = new qq.maps.Geocoder();
//设置服务请求成功的回调函数
geocoder.setComplete(function(result) {
    //console.log(result.detail);
});
//对指定经纬度进行解析
geocoder.getAddress(latLng);

h5方法获取手机当前地址

这是纯原生方法，但是在ios中获取位置时失败，原因为ios限制了必须访问https时，才能获取位置。

// 控制台-sensors-geolocation
navigator.geolocation.getCurrentPosition(showPosition);
function showPosition(position){
    var lat=position.coords.latitude; 
    var lng=position.coords.longitude;
    console.log(position.coords)
}

h5 另一种方案

借助第三方文件，获取当前设备位置，用手机访问测试。

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

Geolocation(key, 项目名称)

var geolocation = new qq.maps.Geolocation("6LLBZ-QMLCX-HNA4L-T3ADN-4O3V5-BFFLB", "myapp");
geolocation.getLocation(showPosition, ()=>{
    console.log('获取位置失败，如果是PC，请设置模拟器，Sensors')
})//, showErr, options
function showPosition(position) {
    //positionNum ++;
    console.log(position)
    console.log(JSON.stringify(position, null, 4))
};

ECharts

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

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

//https://www.echartsjs.com/tutorial.html
// 基于准备好的dom，初始化echarts实例
var echarts = window.echarts;
var myChart = echarts.init(document.getElementById('main2'));

//https://www.echartsjs.com/option.html#tooltip
// 指定图表的配置项和数据
var option = {
    tooltip: {},
    xAxis: {   
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]            
    },
    yAxis: {
                        
    },
    series: [{                
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//https://www.echartsjs.com/examples/