https://github.com/zmofei/point-map
A elegant globa view map
https://github.com/zmofei/point-map
Last synced: about 1 year ago
JSON representation
A elegant globa view map
- Host: GitHub
- URL: https://github.com/zmofei/point-map
- Owner: zmofei
- License: mit
- Created: 2019-08-21T07:54:43.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-01T10:31:57.000Z (over 3 years ago)
- Last Synced: 2025-04-08T09:27:10.454Z (about 1 year ago)
- Language: JavaScript
- Size: 2.37 MB
- Stars: 26
- Watchers: 1
- Forks: 6
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Point-map
An elegant global view map.
[Live Demo](https://zmofei.github.io/point-map/dist/)
[How we mad this](https://www.himofei.com/blog/article/5d68d93223d760b4bf736014)
[相关介绍](https://www.zhuwenlong.com/blog/article/5d68d93223d760b4bf736014)
[中文文档](README_CN.md)
## Usage
### 1. Install
You can use this library through `NPM`, Javascript `` tag from CDN.
#### 1.1 NPM
Use NPM install package
```bash
npm install point-map
```
import it in your .js file
```javascript
import PointMap from 'point-map'
```
#### 1.2 Script
```html
<script src="https://unpkg.com/point-map/dist/mymap.min.js" crossorigin>
```
## Hello World
```html
Point-map demo
// Create an instance
let map = new PointMap('map');
// Add event points
map.addEvents([{
name: '上海',
coordinate: [121.47, 31.233]
}, {
name: '北京',
coordinate: [116.41, 39.90]
}]);
// regiest events
map.on('mousemove', function(e, data) {
console.log(data);
})
```
## Interfaces
### PointMap(elementID)
Create an point map instances by given a DOM's id.
Example:
```javascript
new PointMap('map');
```
### PointMap.addEvent(EventObject)
Add a event point on the map.
`EventObject.name` [String] The name of the point, Could be anything.
`EventObject.coordinate` [Array] The Latitude and longitude of the point [Latitude, Longitude]
`EventObject[others]` [Any] Other Customer propertis of the point;
Example:
```javascript
map.addEvents({
name: 'Shanghia',
coordinate: [121.47, 31.233]
})
```
### PointMap.addEvents([EventPoints])
Add many event points on the map, This is a short cut of the PointMap.addEvent.
Example:
```javascript
map.addEvents([
{
name: 'Shanghia',
coordinate: [121.47, 31.233]
},
{
name: 'Beijing',
coordinate: [116.41, 39.90]
}
])
```
### PointMap.on(EventName, CallbackFunction)
Add an event on the map.
`EventName` [String] the event name could be `mousemove`,`click`
`CallbackFunction(event, Pointinfo)` When the event trigger, the 1st param is the DOM event, The 2nd param is object of the customer Point info.
Examples:
```
let map = new PointMap('map');
// Add event points
map.addEvents({
name: '上海',
coordinate: [121.47, 31.233]
});
map.on('mousemove', function(e, data) {
if (data) {
console.log('you are move into a customer Event', data)
} else {
console.log('you are not on a custome')
}
});
```
### PointMap.remove(EventName, EventFunction)
Remove an event on the map.
`EventName` [String] the event name
`EventFunction` The function Which we add to the map
Examples:
```
let map = new PointMap('map');
// Add event points
map.addEvents({
name: '上海',
coordinate: [121.47, 31.233]
});
const fn = (e,data)=>{console.log('you are moving')};
map.on('mousemove', fn);
map.remove('mousemove', fn);
```