city-map:突出显示的城市地图,仅在城市内部允许平移,缩放和标记拖动限制

  • w8_274016
    了解作者
  • 385.3KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-05-28 08:16
    上传日期
城市地图 突出显示的城市地图,仅在城市内部允许平移,缩放和标记拖动受限。 演示版 不要忘记将自己的Google Maps密钥放入constants.js文件中以使演示工作 或者,您可以克隆此存储库,并将自己的Google Maps密钥放入constants.js中,然后运行npm install然后运行npm run dev 特征 初始化时地图自动缩放以适合我们城市的范围。 在地图上突出显示城市图层以指导用户。 限制地图在边界之外的拖动/平移。 限制标记拖动到我们的城市边界。 依存关系
city-map-master.zip
  • city-map-master
  • .gitignore
    208B
  • berlin.json
    123.4KB
  • package.json
    853B
  • package-lock.json
    261.4KB
  • cairo.json
    9.9KB
  • index.js
    498B
  • utils.js
    1.1KB
  • README.md
    956B
  • image.jpg
    295.2KB
  • style.css
    83B
  • index.html
    104B
  • citymap.js
    2.7KB
  • constants.js
    565B
  • abudhabi.json
    56.4KB
内容介绍
# city-map > Highlighted city map with restricted pan, zoom and marker drag allowed only inside the city. # Demo ![Alt text](image.jpg?raw=true "Screen Shots") **Don't forget to put your own google maps key inside constants.js file to make the demo work** **[Berlin Map Demo](https://stackblitz.com/edit/city-map?file=constants.js)** **[Abu Dhabi Map Demo](https://stackblitz.com/edit/city-map-abudhabi?file=constants.js)** **[Cairo Map Demo](https://stackblitz.com/edit/cairo-city-map?file=constants.js)** Or you can clone this repository and put your own google maps key inside constants.js then run `npm install` followed by `npm run dev` # Features - Map auto zoom on initialization to fit bounds of our city. - Highlight city layer on map to guide the user. - Restrict map drag/pan outside boundaries. - Restrict marker drag to our city boundary only. # Dependencies - [load-google-maps-api](https://github.com/yuanqing/load-google-maps-api)
评论
    相关推荐
    • npm-repository:npm存储库代理
      npm-repository npm repository proxy 用于npm本地代理或者内网仓库,仅支持npm install命令。 环境: jdk 8 maven 3 配置文件: application.properties #代理服务器主机 server.hostname=localhost #端口 server....
    • piscis-npm-dummy-pkg:NPM虚拟软件包以测试专用NPM存储
      小型虚拟程序包,用于测试私有NPM存储库。 先决条件 像一样工作的私人NPM镜子 具有有效凭据的有效远程配置,请参阅 有关如何详细信息 准备包裹 请publishConfig package.json publishConfig设置以反映您的配置。
    • npm-adapter:将文件转到NPM存储
      < artifactId>npm-adapter [...] 怎么运行的? 首先,您上传由npm publish生成的json文件。然后,调用Npm#publish ,它触发meta.json文件的更新/生成和.tgz源代码档案的创建。 这提供了您需要对npm intall 命令...
    • Npm:@ T3am-Guia de uso Npm
      GUIAS DE USO EN NPM 全球的 手风琴 Npm的实现 npm install -g [paquete] @ [version] Npm全球配置 ...npm install [url]安装存储npm install [paquete] @ [version] Instala paquete con su pro
    • micro-npm-template:微型npm模板存储
      微型npm模板 npm功能 安装 使用安装: $ npm install --save npm-name 用法 const func = require ( 'npm-name' ) ;
    • npm-updates:从npm存储库发出更新事件
      npm存储库或任何节点模块存储库发出更新事件。 用法 const NPM = require ( 'npm-updates' ) ; const npm = new NPM ( ) ; npm . on ( 'update' , ( info ) => { console . log ( 'package' , info . name , 'was...
    • number-formatter:这是npm组件存储
      'npm install number-formatter-msenyoo' 用法 var numFormatter = require('number-formatter-msenyoo'); var formattedNum = numFormatter(123456789); 输出应为'123,456,789' 测验 'npm test'
    • lbaction-npmNPM(LauchBar 6操作)
      克隆/下载该存储库的母版,然后双击NPM.lbaction 。 然后,LaunchBar将提示您是否要安装它。 用法 输入npm ,然后应显示NPM 。 按空格键并输入软件包名称(例如webp )-然后只需等待几秒钟。 按Enter键在浏览器中...
    • npm-release
      npm-发布 该脚本执行以下操作 更新package.json中的版本 发布到npm 提交,标记并推送到存储
    • pixi-storybook:pixi-storybook npm软件包的存储
      pixi-storybook:pixi-storybook npm软件包的存储