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

旧城等待， 2022-03-16 07:22 287阅读 0赞

### 最终效果： ###

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>复制代码