当前位置：首页 > news >正文

leetcode03 -- 武汉旅游查询系统

news 来源：原创 2025/5/13 18:12:12

武汉旅游查询系统

1 界面展示

1.首页地图界面

在这里插入图片描述

2.查找功能

在查找框内输入查找的景点名称
在这里插入图片描述

查找到的景点在地图上进行定位，右侧展示景点的详细信息。
在这里插入图片描述

3.添加景点功能

在地图上点击某个位置，系统弹出一个输入框供用户填写景点的名称和描述。

在这里插入图片描述

在弹出的输入框中输入景点名称和描述，点击“添加景点”按钮。

在这里插入图片描述

新添加的景点信息可以显示在右侧的景点信息区域，展示景点名称、位置和描述。
在这里插入图片描述

3.编辑景点功能

点击编辑，将描述置空，点击保存

在这里插入图片描述

4.删除景点功能
在这里插入图片描述

2 核心代码

1 IndexedDB 数据库的使用

1.1 数据库初始化

var request = indexedDB.open('TourismDB', 1);

request.onupgradeneeded = function (event) {
   

  var db = event.target.result;

  var objectStore = db.createObjectStore('locations', {
    keyPath: 'id', autoIncrement: true });

  objectStore.createIndex('name', 'name', {
    unique: false });

  objectStore.createIndex('lat', 'lat', {
    unique: false });

  objectStore.createIndex('lon', 'lon', {
    unique: false });

  objectStore.createIndex('