openlayers03 -- 武汉旅游查询系统

武汉旅游查询系统

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('