当前位置：首页 > 软件库 > 程序开发 > >

ember-cli-g-maps

Deprecated Google Maps Addon

授权协议 MIT License

开发语言 JavaScript

所属分类程序开发

软件类型开源软件

地区不详

投递者百里默

操作系统跨平台

开源组织无

适用人群未知

软件概览

Ember CLI G-Maps

DEPRECATION NOTICE: This addon is deprecated, please use ember-google-maps instead.

Ember CLI G-Maps is a Google Map component for map driven applications.

A map driven application responds to map interactions with fresh data. What this means for the developer is that you will need consistent access to the state of the map as well as intuitive ways to efficiently render large amounts of data.

Ember-cli-g-maps seeks to give you the information you need, when you need it, so that you can make the necessary requests and render the most relevant map data for your users.

Built with the GMaps-For-Apps.js library, a fork of GMaps.

Installation

Full installation & configuration documentation.

Supports:

Ember >=1.13
Google Maps v3

In terminal:

ember install ember-cli-g-maps

This will install the ember-cli-g-maps node module and the gmaps bower component. The g-maps component will be available to your application, however you need to update your environment configuration to avoid violating the content security policy.

Update your config/environment.js Content Security Policy to contain:

ENV.contentSecurityPolicy = {
  'default-src': "'none'",
  'script-src': "'self' 'unsafe-eval' *.googleapis.com maps.gstatic.com",
  'font-src': "'self' fonts.gstatic.com",
  'connect-src': "'self' maps.gstatic.com",
  'img-src': "'self' *.googleapis.com maps.gstatic.com csi.gstatic.com",
  'style-src': "'self' 'unsafe-inline' fonts.googleapis.com maps.gstatic.com"
};

You wont see your map unless it has height. In app/styles/app.css:

.ember-cli-g-map {
    height: 300px;
}

Documentation

Install and Configuration

Component Properties and Events

Elements

Services

Selections

Heatmap

Currently Supports

Usage

Simplest Possible G-Map

Full simple map documentation

In your controller:

export default Ember.Controller.extend({
  lat: 32.75494243654723,
  lng: -86.8359375,
  zoom: 4
});

In your template:

{{g-maps name="my-map" lat=lat lng=lng zoom=zoom}}

Adding Markers

Full marker documentation

export default Ember.Controller.extend({
  markers: null,
  
  init() {
    this.set('markers', [
      {
        id: 'unique-marker-id',  // Recommended
        lat: 33.516674497188255, // Required
        lng: -86.80091857910156, // Required
        infoWindow: {
          content: '<p>Birmingham</p>',
          visible: true
        },
        click(event, marker) {},
        rightclick(event, marker) {},
        dblclick(event, marker) {},
        mouseover(event, marker) {},
        mouseout(event, marker) {},
        mouseup(event, marker) {},
        mousedown(event, marker) {},
        drag(e, marker) {},
        dragstart(e, marker) {},
        dragend(e, marker) {}
      }
    ]);
  }
});

{{g-maps ... markers=markers}}

Adding Polygons

Full polygon documentation

export default Ember.Route.extend({
  setupController: function(controller) {
    controller.setProperties({
      // Must be an Ember Array
      polygons: Ember.A([
        {
          id: 'unique-polygon-id', // Recommended
          paths: [ // Required
            [35.0041, -88.1955], // Lat, Lng
            [31.0023, -84.9944], // Lat, Lng
            [30.1546, -88.3864], // Lat, Lng
            [34.9107, -88.1461]  // Lat, Lng
          ],
          click: function(event, polygon) {},
          rightclick: function(event, polygon) {},
          dblclick: function(event, polygon) {},
          mouseover: function(event, polygon) {},
          mouseout: function(event, polygon) {},
          mouseup: function(event, polygon) {},
          mousedown: function(event, polygon) {},
          mousemove: function(event, polygon) {},
          drag: function(event, polygon) {},
          dragstart: function(event, polygon) {},
          dragend: function(event, polygon) {},
          set_at: function(polygonPath) {},
          insert_at: function(polygonPath) {},
          remove_at: function(polygonPath) {}
        }
      ])
    });
  }
});

{{g-maps ... polygons=polygons}}

Adding Polylines

Full polyline documentation

export default Ember.Route.extend({
  setupController: function(controller) {
    controller.setProperties({
      // Must be an Ember Array
      polylines: Ember.A([
        {
          id: 'unique-polyline-id', // Recommended
          strokeColor: 'blue',
          strokeOpacity: 1,
          strokeWeight: 6,
          path: [ // Required
            [34.220, -100.7], // Lat, Lng
            [33.783, -92.81], // Lat, Lng
            [35.946, -94.83], // Lat, Lng
            [32.458, -95.71], // Lat, Lng
            [33.783, -92.85]  // Lat, Lng
          ],
          click: function(event, polyline) {},
          rightclick: function(event, polyline) {},
          dblclick: function(event, polyline) {},
          mouseover: function(event, polyline) {},
          mouseout: function(event, polyline) {},
          mouseup: function(event, polyline) {},
          mousedown: function(event, polyline) {},
          mousemove: function(event, polyline) {},
          set_at: function(polylinePath) {},
          insert_at: function(polylinePath) {},
          remove_at: function(polylinePath) {}
        }
      ])
    });
  }
});

{{g-maps ... polylines=polylines}}

Adding Circles

Full circle documentation

export default Ember.Route.extend({
  setupController: function(controller) {
    controller.setProperties({
      // Must be an Ember Array
      circles: Ember.A([
        {
          id: 'unique-circle-id', // Recommended
          lat: 32.75494243654723, // Required
          lng: -86.8359375,       // Required
          radius: 500000          // Not Required, but you'll probaby want to see it
          click: function(event, circle) {},
          rightclick: function(event, circle) {},
          dblclick: function(event, circle) {},
          mouseover: function(event, circle) {},
          mouseout: function(event, circle) {},
          mouseup: function(event, circle) {},
          mousedown: function(event, circle) {},
          mousemove: function(event, circle) {},
          drag: function(e, circle) {},
          dragstart: function(e, circle) {},
          dragend: function(e, circle) {},
          radius_changed: function(circle) {},
          center_changed: function(circle) {}
        }
      ])
    });
  }
});

{{g-maps ... circles=circles}}

Adding Rectangles

Full rectangle documentation

export default Ember.Route.extend({
  setupController: function(controller) {
    controller.setProperties({
      // Must be an Ember Array
      rectangles: Ember.A([
        {
          id: 'unique-rectangle-id',            // Recommended
          bounds: [
            [40.300476079749465, -102.3046875], // NE lat, lng
            [26.258936094468414, -73.828125]    // SW lat, lng
          ],
          strokeColor: 'green',
          strokeOpacity: 1,
          strokeWeight: 3,
          fillColor: 'green',
          fillOpacity: 0.2,
          click: function(event, rectangle) {},
          rightclick: function(event, rectangle) {},
          dblclick: function(event, rectangle) {},
          mouseover: function(event, rectangle) {},
          mouseout: function(event, rectangle) {},
          mouseup: function(event, rectangle) {},
          mousedown: function(event, rectangle) {},
          mousemove: function(event, rectangle) {},
          drag: function(e, rectangle) {},
          dragstart: function(e, rectangle) {},
          dragend: function(e, rectangle) {},
          bounds_changed: function(rectangle) {}
        }
      ])
    });
  }
});

{{g-maps ... rectangles=rectangles}}

Adding Overlays

Full overlay documentation

export default Ember.Route.extend({
  setupController: function(controller) {
    controller.setProperties({
      // Must be an Ember Array
      overlays: Ember.A([
        {
          id: 'unique-overlay-id', // Recommended
          lat: 32.75494243654723,  // Required
          lng: -86.8359375,        // Required
          content: '<strong class="my-class">Some HTML</strong>',
          verticalAlign: 'top',
          horizontalAlign: 'center',
          click: function(event, overlay) {},
          dblclick: function(event, overlay) {},
          mouseup: function(event, overlay) {},
          mousedown: function(event, overlay) {},
          mouseover: function(event, overlay) {},
          mousemove: function(event, overlay) {},
          mouseout: function(event, overlay) {}
        }
      ])
    });
  }
});

{{g-maps ... rectangles=rectangles}}

Basic G-Map Component Event

export default Ember.Route.extend({
  actions: {
    onMapEvent: function(event) {
      console.info('Click coordinate',
        event.latLng.lat(), // Latitude
        event.latLng.lng()  // Longitude
      );
      console.info('Map boundaries',
        event.bounds[0], // Northeast map coordinate
        event.bounds[1]  // Southwest map coordinate
      );
      console.info('Map\'s center',
        this.controller.lat,
        this.controller.lng
      );
      event.mapIdle.then(function() { // Promise
        console.log('maps done loading tiles and user is not interacting with map');
      });
      event.mapTilesLoaded.then(function() { // Promise
        console.log('Map tiles have finished loading');
      });
    }
  }
});

{{g-maps ... click="onMapClick"}}

Setting Map Properties

Full component properties documentation

// Default settings
export default Ember.Controller.extend({
  lat: 33.5205556,
  lng: -86.8025,
  mapType: 'satellite', // Accepts 'roadmap', 'satellite', 'hybrid', or 'terrain'
  showMapTypeControl: true,
  clickableIcons: true,
  draggable: true,
  disableDefaultUI: false,
  disableDoubleClickZoom: false,
  scrollwheel: true,
  showZoomControl: true,
  showScaleControl: true
});

{{g-maps ... mapType=myMapType}}

{{g-maps ... showMapTypeControl=true}}

{{g-maps ... draggable=true}}

{{g-maps ... disableDefaultUI=true}}

{{g-maps ... clickableIcons=true}}

{{g-maps ... disableDoubleClickZoom=true}}

{{g-maps ... scrollwheel=true}}

{{g-maps ... showZoomControl=true}}

{{g-maps ... showScaleControl=true}}

React to Map Loading Completion

export default Ember.Route.extend({
  actions: {
    onMapLoad(e) {
      console.log(e.map +' has finished loading!');
      // > "my-map has finished loading!"
    }
  }
});

{{g-maps name="my-map" loaded="onMapLoad"}}

Supported G-Maps Events

Full component events documentation

click
bounds_changed
center_changed
dblclick
drag
dragend
dragstart
heading_changed
idle
maptypeid_changed
mousemove
mouseout
mouseover
projection_changed
resize
rightclick
tilesloaded
tilt_changed
zoom_changed

Selections

Full selections documentation

Repurposed from the Google Maps Drawing Manager, Selections allow you to draw shapes on your map instance. This allows users to select areas on the map to interact with. Supported selection types include:

Markers
Rectangles
Circles
Polygons
Polylines

Selections Requirements

Selections requires the Google Maps Drawing library. To add this library in:config/environment.js add:

ENV.googleMap = {
  libraries: ['drawing']
};

Actions

Actions are fired when a selections are completed. Available selections actions are:

selectionsMarker
selectionsCircle
selectionsRectangle
selectionsPolygon
selectionsPolyline

Heatmap

Full heatmap documentation

Heatmap is an abstraction of the Google Maps Heatmap Layer.

Heatmap Requirements

Heatmap requires the Google Maps Visualization library. To add this library in:config/environment.js add:

ENV.googleMap = {
  libraries: ['visualization']
};

Planned Features

Customization

In config/environment.js

ENV.googleMap = {
  // your configuration goes in here
  libraries: ['places', 'geometry'], // milage varies based on g-maps supported features
  version: '3', // not recommended
  apiKey: 'your-unique-google-map-api-key',
  lazyLoad: false, // default
  language: 'ja', // optional
  region: 'JA' // optional
}

Contributors

�� @LauLaman
�� @sukima

Changelog

0.5.0

Fixes bug when Ember-Data not included
Adds Map refresh service
Adds Map theming
Adds Lazy Load support

0.4.0

Adds Geocoding
Adds Google Places Autocomplete
Wrap GMaps-for-apps geocoding service in Promise

0.3.3

Adds scale control support
Adds work client api-key support
Unit test refactor
Restructures g-maps core functionality

0.3.2

Delegated gMap service onLoad to component loaded action
Fixed some core mixin test race conditions
Updated readme

0.3.1

Upgrade to Ember-cli@1.13.8
Reverted to RSVP.Promise for tests
Unit test for Overlay Mixin
Travis-CI Badge
Ember Observer Badge
Passing Phantom Tests

0.3.0

Google Maps Overlays child
README Overlay examples
Document supported child events

0.2.1

Google Maps API updates
Heatmap tests

0.2.0

Heatmap Extension

0.1.2

Full test coverage

0.1.1-beta

Fixed GMap zooming lat lng hijacking
Added warnings for invalid selections' props
Added syncing of DrawingManager controls to selectionsMode
Fix auto setting of map type to 'undefined'

0.1.0-beta

Added Rectangle Maps Child
Map selections
fixed g-maps bindings on center_changed

0.0.14-beta

Fixed Bower dependency

0.0.13-beta

GMaps-For-Apps.js rendering layer
Improved Map Child bindings
- No longer requires id property
Polyline Map Child
Performant Map destroy

0.0.12-beta

Basic Map Component
- Bound MapType
Map service
- map idle promise
- map tilesLoaded promise
Marker Map Child
Circle Map Child
Polygon Map Child

License

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copyof this software and associated documentation files (the "Software"), to dealin the Software without restriction, including without limitation the rightsto use, copy, modify, merge, publish, distribute, sublicense, and/or sellcopies of the Software, and to permit persons to whom the Software isfurnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included inall copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS ORIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THEAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHERLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS INTHE SOFTWARE.

使用案例

Ember启动报错

Ember启动报错 Path or pattern "bower_components/dinosheets/dist/dinosheets.amd.js" did not match any files Error: Path or pattern "bower_components/dinosheets/dist/dinosheets.amd.js" did not match any fil
使用vscode调试ember.js

{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 //参考文章 https://dev.to/michalbryxi/debugging-emberjs-with-vscode-2p5g "