m0_74879466 2024-03-22 17:46 采纳率: 73.4%
浏览 5

django不用orm只有城市的mysql数据怎么做搜索省后显示该省热力地图

django不用orm只有城市的mysql数据怎么做搜索省后显示该省热力地图china.js

  • 写回答

2条回答 默认 最新

  • 码农阿豪@新空间 新星创作者: 前端开发技术领域 2024-03-22 17:47
    关注
    让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言
    要实现这个问题，可以按照以下步骤进行：
    1. 获取城市数据 在mysql中直接查询城市数据，并通过django视图返回给前端页面。例如：
    import pymysql
def get_cities(request):
    conn = pymysql.connect(host='localhost', port=3306, user='root', password='password', db='city_db')
    cursor = conn.cursor()
    
    cursor.execute("SELECT id, province, city, longitude, latitude FROM cities")
    
    cities = [dict(zip(('id', 'province', 'city', 'longitude', 'latitude'), row)) for row in cursor.fetchall()]
    cursor.close()
    conn.close()
    return render(request, 'cities.html', {'cities': cities})
    1. 实现热力地图 在前端页面引入china.js，并通过ajax请求后端数据，最后将数据和地图渲染到页面上。示例代码：
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>热力地图</title>
    <style type="text/css">
        #map {
            height: 500px;
            width: 100%;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts-en.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/extension/bmap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('map'));
        myChart.showLoading();
        $.ajax({
            url: '/search/',
            type: 'POST',
            data: { province: '广东省' },
            dataType: 'json',
            success: function (data) {
                myChart.hideLoading();
                myChart.setOption(option = {
                    bmap: {
                        center: [113.23, 23.16],
                        zoom: 6,
                        roam: true
                    },
                    visualMap: {
                        min: 0,
                        max: 100,
                        text: ['高', '低'],
                        calculable: true,
                        color: ['#f5c606', '#fb3c30'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [
                        {
                            name: '城市',
                            type: 'heatmap',
                            coordinateSystem: 'bmap',
                            data: data,
                            pointSize: 5,
                            blurSize: 5
                        }
                    ]
                });
            }
        });
    </script>
</body>
</html>
    1. 实现搜索 在django视图中获取搜索参数，对城市数据进行筛选，返回符合条件的数据给前端页面。示例代码：
    def search_city(request):
    if request.method == 'POST':
        province = request.POST.get('province')
        conn = pymysql.connect(host='localhost', port=3306, user='root', password='password', db='city_db')
        cursor = conn.cursor()
        cursor.execute("SELECT id, city, longitude, latitude, count(*) FROM cities WHERE province=%s GROUP BY city", [province])
        cities = [dict(zip(('name', 'value'), [row[1], row[4]])) for row in cursor.fetchall()]
        cursor.close()
        conn.close()
        return JsonResponse(cities, safe=False)

    完整代码：

    import pymysql
from django.shortcuts import render
from django.http import JsonResponse
def get_cities(request):
    conn = pymysql.connect(host='localhost', port=3306, user='root', password='password', db='city_db')
    cursor = conn.cursor()
    
    cursor.execute("SELECT id, province, city, longitude, latitude FROM cities")
    
    cities = [dict(zip(('id', 'province', 'city', 'longitude', 'latitude'), row)) for row in cursor.fetchall()]
    cursor.close()
    conn.close()
    return render(request, 'cities.html', {'cities': cities})
def search_city(request):
    if request.method == 'POST':
        province = request.POST.get('province')
        conn = pymysql.connect(host='localhost', port=3306, user='root', password='password', db='city_db')
        cursor = conn.cursor()
        cursor.execute("SELECT id, city, longitude, latitude, count(*) FROM cities WHERE province=%s GROUP BY city", [province])
        cities = [dict(zip(('name', 'value'), [row[1], row[4]])) for row in cursor.fetchall()]
        cursor.close()
        conn.close()
        return JsonResponse(cities, safe=False)

    cities.html:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>搜索热力图</title>
    <style type="text/css">
        #map {
            height: 500px;
            width: 100%;
        }
        .search-box {
            margin-bottom: 20px;
        }
        .search-box input {
            width: 150px;
            height: 30px;
            line-height: 30px;
        }
        .search-box button{
            width: 80px;
            height: 30px;
            margin-left: 10px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts-en.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/extension/bmap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="search-box">
        <input type="text" id="province" placeholder="请输入要查询的省份">
        <button onclick="searchCity()">查询</button>
    </div>
    <div id="map"></div>
    <script type="text/javascript">
        var myChart;
        function initMap(data) {
            myChart = echarts.init(document.getElementById('map'));
            myChart.setOption(option = {
                bmap: {
                    center: [113.23, 23.16],
                    zoom: 6,
                    roam: true
                },
                visualMap: {
                    min: 0,
                    max: 100,
                    text: ['高', '低'],
                    calculable: true,
                    color: ['#f5c606', '#fb3c30'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '城市',
                        type: 'heatmap',
                        coordinateSystem: 'bmap',
                        data: data,
                        pointSize: 5,
                        blurSize: 5
                    }
                ]
            });
        }
        function searchCity() {
            var province = $("#province").val();
            $.ajax({
                url: '/search/',
                type: 'POST',
                data: { province: province },
                dataType: 'json',
                success: function (data) {
                    if (myChart) {
                        myChart.clear();
                    }
                    initMap(data);
                }
            });
        }
        initMap([]);
    </script>
</body>
</html>
    评论

报告相同问题？

问题事件

  • 创建了问题 3月22日