Skip to content
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.gitignore
README.md
index.html
package.json
webpack.config.js
yarn.lock

README.md

Neighborhood-Map

开始使用

地图应用使用webpack构建,使用webpack-dev-serverlocalhost:8080端口使用

框架和依赖

  • 使用knockout管理页面列表渲染
  • 使用Google MapAPI渲染地图
  • 使用jQuery进行ajax请求flickr图片
  • 使用IScroll插件代替列表滚动
yarn install

运行地图应用

yarn run dev

或者打开dist文件夹中index.html文件在本地打开应用

功能和特点

响应式

  • 使用cssmedia query400px以下屏幕设置更窄的列表框
  • 使用浏览器window.matchMediaAPI设置在不同尺寸屏幕中列表是否默认显示

界面交互

  • 点击列表内容时会place service获取详细地址及静态图片显示在列表中
  • 点击列表或者marker显示在infowindow中显示地址、街景
  • 点击infowindowFlickr图片按钮在右下角显示该地点的flickr图片
  • 筛选按钮可以筛选地点类型,并重置地图标记
  • 重置按钮可以重设列表和地图
  • 点击切换地图列表显示的按钮地图重新加载
You can’t perform that action at this time.