The Demo preview
On the command line, run the following command
npm install
bower installCopy the codeView demo.html in your browser
Angularjs-baidu-maps.js in SRC. You can generate angularjs-baidu-maps.min.js in dist by running the following command after changing the source code
grunt uglifyCopy the codeuse
For details about how to use demo, see demo.html demo.js demo. CSS
<script src="bower_components/angular/angular.js"></script>
<script src="dist/angularjs-baidu-maps.min.js"></script>Copy the codeThe basic configuration
Js on Baidu map configuration, through an object mapOpts
angular.module('app'['ls.bmap']).controller('DemoCtrl'['$scope'.function ($scope) {
$scope.mapOpts = {
apiKey: 'Replace it with your key',
center: {longitude: 121.595871,latitude: 31.187017},
zoom: 17,
enableScrollWheelZoom: true,
enableMapClick: false.onMapLoadFild: function () {
//Baidu map loading failed}}; }]);Copy the codeDescription:
- MapOpts Baidu map configuration object. The name is the same as map-options=”mapOpts” in HTML
- ApiKey Baidu Map console application key, Baidu map key application
- Center Initializes the center point of the map
- Zoom Initializes the map zoom level
- EnableScrollWheelZoom Whether to allow mouse control of map zooming
- EnableScrollWheelZoom Whether to allow map click events by default (true means basic annotations can be clicked)
- OnMapLoadFild Callback to local map loading failure
In the HTML template, the configuration is as follows
<div id="map" style="height:500px;"
ui-baidu-map="myMap"
map-event="{'map-click': 'onMapClick($event, $params)', 'map-loaded': 'onMapLoaded($event, $params)'}"
map-options="mapOpts">
</div>Copy the codeDescription:
- MyMap is a reference to Baidu Map in Controller, which is the object map. Map. We can operate it using the methods provided by Baidu Map. MyMap can be changed to any value, as long as it has the same name as the controller above
- Map-event command is used to describe various events of Baidu map (map click, map load completed, etc., you can go to the official map reference, the configuration is the same, add ‘map-‘ before the event, the parameter is ($event,$params),$event contains the information of map event, $params is the parameter list (array) for this event
- Map-options is the object name of baidu map that we configure, which can be changed to any value, consistent with controller
Controller configuration information window callback event
angular.module('app'['ls.bmap']).controller('DemoCtrl'['$scope'.function ($scope) {
//. Omit other configurations
$scope.onInfoWindowClick = function (marker) {
//Info form, button click events, same way angularJS events are bound
};
$scope.onInfoWindowClickClose = function($event.$params) {
//Click the information form to close the button callback, baidu map in the upper right corner to close the information form when clicking start.
};
$scope.onInfoWindowClose = function($event.$params) {
//Message form closure callback, triggered when the message form is closed
};
}]);Copy the codeInformation window configuration in HTML template (example). In practice, just add the UI-bidu-map-info-window command to the HTML paragraph that needs to be used as the information window
<div ui-baidu-map-info-window="myInfoWindow"
info-window-event="{'close' : 'onInfoWindowClose($event, $params)','clickclose' : 'onInfoWindowClickClose($event, $params)'}">
<div class="m-b-sm"> note < /div>
<form role="form">
<div class="form-group">
<label for="lat">Lat:</label>
<input id="lat" ng-model="currentMarker.point.lat" class="form-control input-sm w-sm m-l-lg">
</div>
<div class="form-group">
<label for="lng">Lng:</label>
<input id="lng" ng-model="currentMarker.point.lng" class="form-control input-sm w-sm m-l-lg">
</div>
<a class="btn btn-success btn-sm m-l-lg m-b-sm" ng-click="onInfoWindowClick(currentMarker)"> let me try </a>
</form>
</div>Copy the codeDescription:
- Ui-bidu-map-info-window =”myInfoWindow” Specifies the reference name of the operation InfoWindow in the configuration controller, which can be replaced with any value
- Info-window-event is configured in the same way as map events, except that there is no prefix required
- All content contained in the UI-Bidu-map-info-window directive is treated as the content of InfoWindow