用Echarts请求百度地图api 小案例

最终效果:

1.接收用户输入地点

2.点击查询

3.中国地图出现

4.用户输入的地点用圆点标记出来

5.并且右上角可以下载成图片


结构:

一层结构:my-demo文件夹

二层结构:map文件夹、bootstrap.css、china.js、echarts.min.js、jquery.min.js


map.html所有代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <link rel="stylesheet" href="../bootstrap.min.css">
    <style>
        body{
            padding-top:80px
        }
        #search-btn{
            margin-top: 20px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-3 col-md-offset-3">
            <form class="form-horizontal">
                <input id="place-input" type="text" class="form-control" value="西湖" placeholder="请输入地址">
                <button type="button" id="search-btn" class="btn btn-success">
                    查询
                </button>
            </form>

        </div>
        <div class="col-md-6">
            <div id="main" style="height:500px;"></div>
        </div>
    </div>
</div>
<script src='../jquery.min.js'></script>
<script src='../echarts.min.js'></script>
<script src='../china.js'></script>
<script>
    // 百度地图的开发者秘钥
    var token = 'fHrNQj6DHTjZtfTvfqbsuvTzKc5V9SBl'
    var url = 'http://api.map.baidu.com/geocoder/v2/?output=json&ak=' + token + '&address='
    var ePlaceInput = $('#place-input')
    var eSearchBtn = $('#search-btn')
    var myChart = echarts.init(document.getElementById('main'))
    var chartData = []
    eSearchBtn.click(function() {
        var place = ePlaceInput.val()
        if (place) {
            $.getJSON(url + place + '&callback=?', function(res) {
                var loc
                if (res.status === 0) {
                    loc = res.result.location
                    chartData.push({
                        name: name,
                        value: [loc.lng, loc.lat]
                    })
                    drawMap(place)
                }else{
                    alert('百度没有找到地址信息')
                }
            })
        }
    })

    function drawMap(name) {

        var option = {
            backgroundColor: 'pink',
            title: {
                text: '2019要去的地方',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item'
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {
                        show: true
                    }
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: 'yellow',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: 'skyblue'
                    }
                }
            },
            series: [{
                name: '地址',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: chartData,
                symbolSize: function(val) {
                    return 10;
                },
            }]
        }
        myChart.setOption(option)
    }

</script>
</body>
</html>复制代码


好的,下面是引用 ECharts百度地图 JavaScript API 后的代码: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GPS 轨迹聚类可视化</title> <!-- 引入 ECharts --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 引入百度地图 JavaScript API --> <script src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <!-- 引入 ECharts 百度地图扩展组件 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> </head> <body> <div id="main" style="width: 100%; height: 600px;"></div> <script> // GPS 轨迹数据 var data = [ [116.403875, 39.915168, 1562868000], [116.404332, 39.914435, 1562868001], // ... ]; // 聚类算法处理 GPS 轨迹数据 // ... // 将聚类后的数据按照 ECharts 地图数据格式进行处理 var seriesData = []; for (var i = 0; i < clusters.length; i++) { var cluster = clusters[i]; var dataItem = { name: 'Cluster ' + i, type: 'scatter', coordinateSystem: 'bmap', data: cluster.map(function (item) { return [item[0], item[1]]; }), symbolSize: function (val) { return 10 + val[2] / 10; // 根据点数量设置点大小 } }; seriesData.push(dataItem); } // 使用 ECharts 的地图组件进行地图展示,并将聚类后的数据在地图上进行可视化展示 var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ bmap: { // 百度地图的密钥和中心点坐标 ak: '您的密钥', center: [116.403875, 39.915168], zoom: 17, roam: true }, series: seriesData }); </script> </body> </html> ``` 需要注意的是,需要将代码中的 `您的密钥` 替换成你在百度地图开放平台申请到的密钥。另外,如果你的页面是通过 HTTPS 访问的,需要将百度地图 JavaScript API 的链接中的 `http` 改为 `https`。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值