Skip to content

zmofei/point-map

Repository files navigation

Point-map

An elegant global view map.

Live Demo

bannber

How we mad this

相关介绍

中文文档

Usage

1. Install

You can use this library through NPM, Javascript <Script> tag from CDN.

1.1 NPM

Use NPM install package

npm install point-map

import it in your .js file

import PointMap from 'point-map'

1.2 Script

<script src="https://unpkg.com/point-map/dist/mymap.min.js" crossorigin></script>

Hello World

<html>
  <head>
    <title>Point-map demo</title>
    <script src="https://unpkg.com/point-map/dist/pointmap.min.js" crossorigin></script>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">
      // 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);
      })
    </script>
  </body>
</html>

Interfaces

PointMap(elementID)

Create an point map instances by given a DOM's id.

Example:

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:

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:

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);

About

A elegant globa view map

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published