目录
前言：数据库表
步骤一：建立Myslq数据库连接
步骤二：开发Flask应用
步骤三：写JavaScript（map_control.js ）
步骤四：创建前端html页面（map.html）
步骤五：运行Flask应用并查看地图
前言：数据库表
步骤一：建立Myslq数据库连接
import pymysql
def get_conn():
conn = pymysql.connect(host='localhost', user='root', password='123456', database='houses', charset="utf8")
cursor = conn.cursor()
return conn, cursor
def close_conn(conn, cursor):
cursor.close()
conn.close()
def query(sql, *args):
conn, cursor = get_conn()
cursor.execute(sql, args)
res = cursor.fetchall()
close_conn(conn, cursor)
return res
def map():
sql = 'select * from lng_lat limit 1000'
res = query(sql)
return res这段代码是一个简单的Python脚本，它使用了PyMySQL库来操作MySQL数据库。下面是代码的简单介绍：
1.def get_conn()：这是一个函数定义，它返回一个连接到MySQL数据库的连接对象和游标对象。
- conn = pymysql.connect(...)：这行代码使用PyMySQL的connect函数来建立到MySQL数据库的连接。参数包括：
- host='localhost'：指定数据库服务器的主机名或IP地址。
- user='root'：指定数据库的用户名。
- password='123456'：指定数据库的密码。
- database='houses'：指定要连接的数据库名。
- charset="utf8"：指定字符集为UTF-8，以支持中文等宽字符。
- cursor = conn.cursor()：这行代码创建了一个游标对象，用于执行SQL命令。
- return conn, cursor：函数返回连接对象和游标对象。
2.def close_conn(conn, cursor)：这是一个函数定义，用于关闭数据库连接和游标。
- cursor.close()：这行代码关闭游标，释放资源。
- conn.close()：这行代码关闭连接，释放资源。
3.def query(sql, *args)：这是一个函数定义，用于执行SQL查询并返回结果。
- conn, cursor = get_conn()：这行代码重新获取连接对象和游标对象。
- cursor.execute(sql, args)：这行代码执行SQL查询，args是SQL查询中的占位符参数。
- res = cursor.fetchall()：这行代码获取查询结果，并存储在res变量中。
- close_conn(conn, cursor)：这行代码关闭连接和游标。
- return res：函数返回查询结果。
4.def map()：这是一个函数定义，它执行了一个查询并返回结果。
- sql = 'select * from lng_lat limit 1000'：这行代码定义了一个SQL查询语句，它从名为lng_lat的表中选择所有列，并限制结果为1000条记录（数据量太大地图要加载很久）。
- res = query(sql)：这行代码执行查询并获取结果。
- return res：函数返回查询结果。
步骤二：开发Flask应用
from flask import Flask, jsonify
from flask import Flask, render_template
import mysql
app = Flask(__name__)
@app.route('/beijing')
def beijing():
return render_template('map.html')
@app.route('/map')
def map():
data = mysql.map()
data1 = []
for i in data:
lng = i[0]
lat = i[1]
data1.append({"lng": lng, "lat": lat})
return jsonify({"data": data1})
if __name__ == '__main__':
app.run(debug=True)这段代码是一个简单的Flask应用程序，它使用MySQL数据库来存储地图数据，并通过JSON接口提供数据。它提供了两个路由：/beijing和/map。/beijing路由用于渲染一个HTML模板，而/map路由则提供了一个JSON接口，用于获取地图数据。
- render_template函数用于渲染HTML模板。
- @app.route('/beijing')：这行代码定义了一个路由，当访问/beijing路径时，将执行beijing函数。
- return jsonify({"data": data1})：这行代码使用jsonify函数将data1列表转换为JSON格式，并返回给客户端。
步骤三：写JavaScript（map_control.js ）
$(function(){
getHt();
initMap();
});
function getHt(){
var all_height = $(window).height();
var div_height = all_height;
$("#map_box").css("height", div_height + "px"); // 确保map_box是地图容器的ID
}
function initMap(){
var map = new BMap.Map("map_box"); // 确保map_box是地图容器的ID
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addControl(new BMap.MapTypeControl({
offset: new BMap.Size(10, 50),
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]
}));
function addMarker(point){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
$.ajax({
url: '/map',
dataType: 'json',
success: function(data) {
if (data && data.data && Array.isArray(data.data)) {
data.data.forEach(function(location) {
var point = new BMap.Point(location.lng, location.lat);
addMarker(point);
});
} else {
console.error("Invalid data format");
}
},
error: function(xhr, status, error) {
console.error("AJAX error: ", error);
}
});
map.setCurrentCity("北京");
map.enableScrollWheelZoom(true);
//加载城市控件
var size = new BMap.Size(10, 50);
map.addControl(new BMap.CityListControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: size,
}));
}步骤四：创建前端html页面（map.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图界面</title>
<link rel="stylesheet" href="../static/css/base.css">
</head>
<body>
<div class="map_con left" id="car_control">
<div class="left map_left" >
<div class="map_box" id="map_box"></div>
</div>
</div>
<script src="../static/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>
<script src="../static/js/map_control.js"></script>
</body>
</html>步骤五：运行Flask应用并查看地图
运行完，在浏览器输入 http://127.0.0.1:5000/beijing可以看到以下图型
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
