在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):angular-ui/ui-map开源软件地址(OpenSource Url):https://github.com/angular-ui/ui-map开源编程语言(OpenSource Language):JavaScript 76.6%开源软件介绍(OpenSource Introduction):UI.MapThis directive allows you to add Google Maps Javascript API elements. Requirements
UsageYou can get it from Bower bower install angular-ui-map This will copy the UI.Map files into a <script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-event/dist/event.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-map/src/map.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=onGoogleReady"></script> Make sure to listen to the callback parameter when loading the Google Maps API !
The API must be fully loaded before this module !
Here we name this callback function onGoogleReady() {
angular.bootstrap(document.getElementById("map"), ['app.ui-map']);
} Add the UI.Map module as a dependency to your application module : var myAppModule = angular.module('app.ui-map', ['ui.map']); Finally, add the directive to your html: <section id="map" ng-controller="MapCtrl" >
<div ui-map="myMap" ui-options="mapOptions" class="map-canvas"></div>
</section> Note that To see something it's better to add some CSS, like .map-canvas { height: 400px; } Optionsgoogle.maps.MapOptions object can be passed through the main directive attribute myAppModule.controller('MapCtrl', ['$scope', function ($scope) {
$scope.mapOptions = {
center: new google.maps.LatLng(35.784, -78.670),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}]); UI.EventUI.Event allows you to specify custom behavior over user events. You just need to prefix the official event by map- to bind a callback to it. For example, the click or zoom_changed event of the google.maps.Map class can be used through the UI.Event object keys map-click and map-zoom_changed : <section id="map" ng-controller="MapCtrl" >
<div ui-map="myMap"ui-options="mapOptions" class="map-canvas"
ui-event="{'map-click': 'addMarker($event, $params)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
></div>
</section> TestingWe use Karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt: npm install -g grunt-cli
npm install && bower install
grunt The karma task will try to open Firefox and Chrome as browser in which to run the tests. Make sure this is available or change the configuration in Grunt ServeWe have one task to serve them all ! grunt serve It's equal to run separately:
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论