• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

eschwartz/backbone.googlemaps: A Backbone JS extension for interacting with the ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

eschwartz/backbone.googlemaps

开源软件地址(OpenSource Url):

https://github.com/eschwartz/backbone.googlemaps

开源编程语言(OpenSource Language):

JavaScript 92.7%

开源软件介绍(OpenSource Introduction):

Backbone.GoogleMaps

A Backbone JS extension for interacting with the Google Maps API (v3.10)

A note regarding the future of Backbone.GoogleMaps

I am currently working on a library called Aeris.js which may serve as a replacement for Backbone.GoogleMaps. The original intent of Aeris.js was to render weather data, but along the way I had to create a set of abstractions for rendering large amounts of data from various APIs onto maps. The library is much cleaner than Backbone.GoogleMaps, and it's fully tested. I'm also paid to work on it, which means I have more time to support it :)

I put together a jsfiddle which shows how you can bind a Backbone.Collection to a collection of markers. That's really just the tip of the iceberg when it comes to Aeris.js functionality (see the github page for docs and demos): Aeris.js also supports:

  • Seamlessly switch between map libraries (Google Maps, Leaflet, Open Layers)
  • Additional map objects (Info boxes, custom tile layers, KML, Polygons, and Polylines)
  • Binding to map objects using Backbone.Events (eg. marker.on('change:position', cb))
  • Marker clustering
  • Geocode / geolocation services

I am glad so many people have found the Backbone.GoogleMaps library useful. To make Aeris.js more accessible outside of weather applications, I would love to split up the basic mapping functionality into its own repo. If you'd like to give me a hand with this, send me a message and we can put together a game plan. You can find my contact info in my user profile

About backbone.googlemaps

Backbone.GoogleMaps is a simple Backbone JS extension for simplified interactions with the Google Maps API. The motivation for creating this extension was to have an easy way to sync data about maps locations from a database with the Google Maps UI, using Backbone's RESTful interface.

Example

View the files in the example directory for working samples. Don't forget to add your Google Maps API key:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&sensor=false"></script>

A simple example:

// Create Google map instance
var places = new Backbone.GoogleMaps.LocationCollection([
	{
		title: "Walker Art Center",
		lat: 44.9796635,
		lng: -93.2748776
	},
	{
		title: "Science Museum of Minnesota",
		lat: 44.9429618,
		lng: -93.0981016
	}
]);

var map = new google.maps.Map($('#map_canvas')[0], {
	center: new google.maps.LatLng(44.9796635, -93.2748776),
	zoom: 12,
	mapTypeId: google.maps.MapTypeId.ROADMAP
});

// Render Markers
var markerCollectionView = new Backbone.GoogleMaps.MarkerCollectionView({
	collection: places,
	map: map
});
markerCollectionView.render();

Backbone.GoogleMaps Components

Backbone.GoogleMaps is packaged with several customizable components.

GoogleMaps.Location

Represents a lat/lng location on a map. Extends Backbone.Model.

Properties

PropertyDefault ValueDescription
lat 0 The location's latitude
lng 0 The location's longitute
selected false A flag for selecting a location
title "" Location title

Methods

Method Parameters Return Value Description
select Sets the model's selected property as true. Triggers a "selected" event on the model.
deselect Sets the model's selected property as false. Triggers a "deselected" event on the model.
toggleSelect Toggles the model's selected property.
getLatLng google.maps.LatLng instance Returns the latitude and longitude of the model

GoogleMaps.LocationCollection

A collection of GoogleMaps.Location objects. Extends Backbone.Collection.

Only a single Location model can be selected in a given LocationCollection at any time.

GoogleMaps.MapView

A generic GoogleMaps view, for controlling a maps overlay instance. Extends Backbone.View.

Properties

Property Default Value Description
map The google.maps.Map instance to which the overlay is attached
mapEvents {} Hash of Google Map events. Events are attached to this.gOverlay (google map or overlay)
gOverlay this.map The overlay instance controlled by this view
overlayOptions {} Properties set on this.gOverlay upon creation of the google maps overlay instance

Methods

Method Parameters Return Value Description
bindMapEvents mapEvents (optional) Attaches listeners for the events in the mapEvents hash to this.gOverlay

GoogleMaps.InfoWindow

View controller for a google.maps.InfoWindow overlay instance. Extends GoogleMaps.MapView.

Properties

Property Default Value Description
gOverlay Instance of google.maps.InfoWindow The instance of the Google maps InfoWindow controlled by this view
marker (REQUIRED) The marker associated with this.gOverlay
template "<h2><%=title %></h2>" A selector string for a template element

Methods

Method Parameters Return Value Description
render this Instantiates a google.maps.InfoWindow object, and displays it on this.map

GoogleMaps.MarkerView

View controller for a marker overlay. Extends GoogleMaps.MapView.

Properties

Property Default Value Description
gOverlay Instance of google.maps.Marker The instance of the Google maps Marker overlay controlled by this view
infoWindow GoogleMaps.InfoWindow The InfoWindow view class used to when opening an infoWindow for this marker

Methods

<tr>
	<td>toggleSelect</td>
	<td></td>
	<td></td>
	<td>A pass-through to this.model.toggleSelect()</td>
</tr>
<tr>
	<td>render</td>
	<td></td>
	<td>this</td>
	<td>Sets as visisible this.gOverlay (the marker instance itself is created in the constructor)</td>
</tr>
<tr>
	<td>openDetail</td>
	<td></td>
	<td></td>
	<td>opens the InfoWindow associated with this marker</td>
</tr>
<tr>
	<td>closeDetail</td>
	<td></td>
	<td></td>
	<td>closes the InfoWindow associated with this marker</td>
</tr>
Method Parameters Return Value Description
refreshOverlay Updates the position of the marker view on the map

GoogleMaps.MarkerCollectionView

View controller for a collection of GoogleMaps.MarkerView instances. Extends Backbone.View.

Properties

Property Default Value Description
markerView GoogleMaps.MarkerView The MarkerView view class used to when creating child MarkerView instances
map The google.maps.Map instance to which the overlay is attached

Methods

Method Parameters Return Value Description
render collection (optional - defaults to this.collection) Renders and displays MarkerViews for each model in this.collection
closeChildren Removes all child MarkerView views
closeChild child (Location model, or MarkerView instance) Closes a single child MarkerView instance
addChild child (Location model) Renders and displays a single MarkerView
refresh Closes all child MarkerView instances, and opens new instances



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap