{"id":17141782,"url":"https://github.com/zmofei/point-map","last_synced_at":"2025-04-13T10:36:11.964Z","repository":{"id":39417185,"uuid":"203534959","full_name":"zmofei/point-map","owner":"zmofei","description":"A elegant globa view map","archived":false,"fork":false,"pushed_at":"2023-01-01T10:31:57.000Z","size":2484,"stargazers_count":26,"open_issues_count":17,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-08T09:27:10.454Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zmofei.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-21T07:54:43.000Z","updated_at":"2025-02-16T22:42:45.000Z","dependencies_parsed_at":"2023-01-31T21:45:25.841Z","dependency_job_id":null,"html_url":"https://github.com/zmofei/point-map","commit_stats":null,"previous_names":["zmofei/mw-map"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zmofei%2Fpoint-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zmofei%2Fpoint-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zmofei%2Fpoint-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zmofei%2Fpoint-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zmofei","download_url":"https://codeload.github.com/zmofei/point-map/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248700134,"owners_count":21147776,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T20:27:04.834Z","updated_at":"2025-04-13T10:36:11.931Z","avatar_url":"https://github.com/zmofei.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Point-map\nAn elegant global view map.\n\n[Live Demo](https://zmofei.github.io/point-map/dist/)\n\n![bannber](doc/img/banner.gif)\n\n[How we mad this](https://www.himofei.com/blog/article/5d68d93223d760b4bf736014)\n\n[相关介绍](https://www.zhuwenlong.com/blog/article/5d68d93223d760b4bf736014)\n\n[中文文档](README_CN.md)\n\n## Usage\n\n### 1. Install\n\nYou can use this library through `NPM`, Javascript `\u003cScript\u003e` tag from CDN.\n\n#### 1.1 NPM\n\nUse NPM install package\n\n```bash\nnpm install point-map\n```\n\nimport it in your .js file\n\n```javascript\nimport PointMap from 'point-map'\n```\n\n#### 1.2 Script \n\n```html\n\u003cscript src=\"https://unpkg.com/point-map/dist/mymap.min.js\" crossorigin\u003e\u003c/script\u003e\n```\n\n\n## Hello World\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003ePoint-map demo\u003c/title\u003e\n    \u003cscript src=\"https://unpkg.com/point-map/dist/pointmap.min.js\" crossorigin\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n      // Create an instance\n      let map = new PointMap('map');\n      // Add event points \n      map.addEvents([{\n        name: '上海',\n        coordinate: [121.47, 31.233]\n      }, {\n        name: '北京',\n        coordinate: [116.41, 39.90]\n      }]);\n      // regiest events\n      map.on('mousemove', function(e, data) {\n        console.log(data);\n      })\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Interfaces\n\n### PointMap(elementID)\n\nCreate an point map instances by given a DOM's id.\n\nExample:\n\n```javascript\nnew PointMap('map');\n```\n\n### PointMap.addEvent(EventObject)\n\nAdd a event point on the map.\n\n`EventObject.name` [String] The name of the point, Could be anything.\n`EventObject.coordinate` [Array] The Latitude and longitude of the point [Latitude, Longitude]\n`EventObject[others]` [Any] Other Customer propertis of the point;\n\nExample:\n\n```javascript\nmap.addEvents({\n  name: 'Shanghia',\n  coordinate: [121.47, 31.233]\n})\n```\n\n\n### PointMap.addEvents([EventPoints])\n\nAdd many event points on the map, This is a short cut of the PointMap.addEvent.\n\nExample:\n\n```javascript\nmap.addEvents([\n  {\n    name: 'Shanghia',\n    coordinate: [121.47, 31.233]\n  },\n  {\n    name: 'Beijing',\n    coordinate: [116.41, 39.90]\n  }\n])\n```\n\n### PointMap.on(EventName, CallbackFunction)\n\nAdd an event on the map.\n\n`EventName` [String] the event name could be `mousemove`,`click`\n\n`CallbackFunction(event, Pointinfo)` When the event trigger, the 1st param is the DOM event, The 2nd param is object of the customer Point info.\n\nExamples:\n\n```\nlet map = new PointMap('map');\n// Add event points \nmap.addEvents({\n  name: '上海',\n  coordinate: [121.47, 31.233]\n});\n\nmap.on('mousemove', function(e, data) {\n    if (data) {\n        console.log('you are move into a customer Event', data)\n    } else {\n        console.log('you are not on a custome')\n    }\n});\n```\n\n\n### PointMap.remove(EventName, EventFunction)\n\nRemove an event on the map.\n\n`EventName` [String] the event name\n\n`EventFunction` The function Which we add to the map\n\nExamples:\n\n```\nlet map = new PointMap('map');\n// Add event points \nmap.addEvents({\n  name: '上海',\n  coordinate: [121.47, 31.233]\n});\n\nconst fn = (e,data)=\u003e{console.log('you are moving')};\n\nmap.on('mousemove', fn);\nmap.remove('mousemove', fn);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzmofei%2Fpoint-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzmofei%2Fpoint-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzmofei%2Fpoint-map/lists"}