marker.js.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>JSDoc: Source: directives/marker.js</title>
  6. <script src="scripts/prettify/prettify.js"> </script>
  7. <script src="scripts/prettify/lang-css.js"> </script>
  8. <!--[if lt IE 9]>
  9. <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  10. <![endif]-->
  11. <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
  12. <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
  13. </head>
  14. <body>
  15. <div id="main">
  16. <h1 class="page-title">Source: directives/marker.js</h1>
  17. <section>
  18. <article>
  19. <pre class="prettyprint source linenums"><code>/**
  20. * @ngdoc directive
  21. * @name marker
  22. * @requires Attr2Options
  23. * @requires NavigatorGeolocation
  24. * @description
  25. * Draw a Google map marker on a map with given options and register events
  26. *
  27. * Requires: map directive
  28. *
  29. * Restrict To: Element
  30. *
  31. * @param {String} position address, 'current', or [latitude, longitude]
  32. * example:
  33. * '1600 Pennsylvania Ave, 20500 Washingtion DC',
  34. * 'current position',
  35. * '[40.74, -74.18]'
  36. * @param {Boolean} centered if set, map will be centered with this marker
  37. * @param {String} &amp;lt;MarkerOption> Any Marker options, https://developers.google.com/maps/documentation/javascript/reference?csw=1#MarkerOptions
  38. * @param {String} &amp;lt;MapEvent> Any Marker events, https://developers.google.com/maps/documentation/javascript/reference
  39. * @example
  40. * Usage:
  41. * &lt;map MAP_ATTRIBUTES>
  42. * &lt;marker ANY_MARKER_OPTIONS ANY_MARKER_EVENTS">&lt;/MARKER>
  43. * &lt;/map>
  44. *
  45. * Example:
  46. * &lt;map center="[40.74, -74.18]">
  47. * &lt;marker position="[40.74, -74.18]" on-click="myfunc()">&lt;/div>
  48. * &lt;/map>
  49. *
  50. * &lt;map center="the cn tower">
  51. * &lt;marker position="the cn tower" on-click="myfunc()">&lt;/div>
  52. * &lt;/map>
  53. */
  54. ngMap.directive('marker', ['Attr2Options', function(Attr2Options) {
  55. var parser = Attr2Options;
  56. var getMarker = function(options, events) {
  57. var marker;
  58. /**
  59. * set options
  60. */
  61. if (options.icon instanceof Object) {
  62. if ((""+options.icon.path).match(/^[A-Z_]+$/)) {
  63. options.icon.path = google.maps.SymbolPath[options.icon.path];
  64. }
  65. for (var key in options.icon) {
  66. var arr = options.icon[key];
  67. if (key == "anchor" || key == "origin") {
  68. options.icon[key] = new google.maps.Point(arr[0], arr[1]);
  69. } else if (key == "size" || key == "scaledSize") {
  70. options.icon[key] = new google.maps.Size(arr[0], arr[1]);
  71. }
  72. }
  73. }
  74. if (!(options.position instanceof google.maps.LatLng)) {
  75. var orgPosition = options.position;
  76. options.position = new google.maps.LatLng(0,0);
  77. marker = new google.maps.Marker(options);
  78. parser.setDelayedGeoLocation(marker, 'setPosition', orgPosition);
  79. } else {
  80. marker = new google.maps.Marker(options);
  81. }
  82. /**
  83. * set events
  84. */
  85. if (Object.keys(events).length > 0) {
  86. console.log("markerEvents", events);
  87. }
  88. for (var eventName in events) {
  89. if (eventName) {
  90. google.maps.event.addListener(marker, eventName, events[eventName]);
  91. }
  92. }
  93. return marker;
  94. };
  95. return {
  96. restrict: 'E',
  97. require: '^map',
  98. link: function(scope, element, attrs, mapController) {
  99. var orgAttrs = parser.orgAttributes(element);
  100. var filtered = parser.filter(attrs);
  101. var markerOptions = parser.getOptions(filtered, scope);
  102. var markerEvents = parser.getEvents(scope, filtered);
  103. console.log('marker options', markerOptions, 'events', markerEvents);
  104. /**
  105. * set event to clean up removed marker
  106. * useful with ng-repeat
  107. */
  108. element.bind('$destroy', function() {
  109. var markers = marker.map.markers;
  110. for (var name in markers) {
  111. if (markers[name] == marker) {
  112. delete markers[name];
  113. }
  114. }
  115. marker.setMap(null);
  116. });
  117. var marker = getMarker(markerOptions, markerEvents);
  118. mapController.addMarker(marker);
  119. /**
  120. * set observers
  121. */
  122. parser.observeAttrSetObj(orgAttrs, attrs, marker); /* observers */
  123. } //link
  124. }; // return
  125. }]);//
  126. </code></pre>
  127. </article>
  128. </section>
  129. </div>
  130. <nav>
  131. <h2><a href="index.html">Index</a></h2><h3>service</h3><ul><li><a href="Attr2Options.html">Attr2Options</a></li><li><a href="GeoCoder.html">GeoCoder</a></li><li><a href="NavigatorGeolocation.html">NavigatorGeolocation</a></li><li><a href="StreetView.html">StreetView</a></li></ul><h3>directive</h3><ul><li><a href="bicycling-layer.html">bicycling-layer</a></li><li><a href="cloud-layer.html">cloud-layer</a></li><li><a href="custom-control.html">custom-control</a></li><li><a href="drawing-manager.html">drawing-manager</a></li><li><a href="dynamic-maps-engine-layer.html">dynamic-maps-engine-layer</a></li><li><a href="fusion-tables-layer.html">fusion-tables-layer</a></li><li><a href="heatmap-layer.html">heatmap-layer</a></li><li><a href="info-window.html">info-window</a></li><li><a href="kml-layer.html">kml-layer</a></li><li><a href="lazy-load.html">lazy-load</a></li><li><a href="map.html">map</a></li><li><a href="map-data.html">map-data</a></li><li><a href="map-type.html">map-type</a></li><li><a href="MapController.html">MapController</a></li><li><a href="maps-engine-layer.html">maps-engine-layer</a></li><li><a href="marker.html">marker</a></li><li><a href="overlay-map-type.html">overlay-map-type</a></li><li><a href="shape.html">shape</a></li><li><a href="traffic-layer.html">traffic-layer</a></li><li><a href="transit-layer.html">transit-layer</a></li><li><a href="weather-layer.html">weather-layer</a></li></ul>
  132. </nav>
  133. <br clear="both">
  134. <footer>
  135. Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a>
  136. and <a href="https://github.com/allenhwkim/angular-jsdoc">angular-jsdoc</a>
  137. </footer>
  138. <script> prettyPrint(); </script>
  139. <script src="scripts/linenumber.js"> </script>
  140. <script>
  141. var href=window.location.href.match(/\/([^\/]+$)/)[1];
  142. document.querySelector("nav a[href='"+href+"']").scrollIntoView(true);
  143. if (window.location.hash == "")
  144. document.querySelector("body").scrollIntoView(true);
  145. </script>
  146. </body>
  147. </html>