0
Я построил datagrid и карту. На этой карте я хотел бы поместить некоторые метки, когда я нажимаю строку datagrid.DevExtreme и DxMap и DxDataGrid
Какой способ я могу разместить маркер с полным адресом?
Мой код здесь:
HTML:
<!DOCTYPE html> <html ng-app="myApp"> <head> <title>CEMS WebGUI</title> <meta charset="utf-8" /> <!-- SCROLLS --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> <!--[if lt IE 9]> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--<![endif]--> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-sanitize.min.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script> <script type="text/javascript" src="http://cdn3.devexpress.com/jslib/15.1.5/js/dx.webappjs.js"></script> <script type="text/javascript" src="script.js"></script> <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.5/css/dx.light.css" /> </head> <!-- define angular controller --> <body ng-controller="mainController" > <nav class="navbar-default"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/">CEMS Web UI Example</a> </div> </div> </nav> <div class="container"> <div dx-menu="{ items: menuItems, onItemClick: itemClicked, orientation: 'horizontal' }"></div> </div> <!-- <div class="container"> <ul class="nav navbar-nav navbar-right"> <li><a href="#/"><i class="fa fa-home"></i> Home</a></li> <li><a href="#about"><i class="fa fa-shield"></i> About</a></li> <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li> </ul> </div>--> <div id="main"> <!-- angular templating this is where content will be injected --> <div ng-view></div> </div> <!-- <div ng-model="map"></div> <div dx-button="{ text: 'Sample Button' }"> </div> <br> <br> <div> <div dx-map="{ provider: 'google', type: 'roadmap', zoom: 11, center: '45.340836, -75.719230' }"> </div> </div>--> </body> </html>
2 - JavaScript:
/* global $http */
//Define directives to the Angular Route and DevExtreme
var myApp = angular.module('myApp', ['ngRoute', 'dx']);
//URL to show ?
var serviceHome = "http://localhost:8000/sts";
//myApp.controller('appCtrl', function($scope, $http, $templateCache) {
//
//
//
// });
// create the controller and inject Angular's $scope
myApp.controller('mainController', function($scope, $location) {
// create a message to display in our view
$scope.message = 'Home';
$scope.menuItems = [
{
text: "Home", url: '',
selectable: true,
items: [
{ text: "Home", url: "/"},
{ text: "UI Widgets", url: 'devicessts'},
{ text: 'Data Visualization', url: 'sts'},
{ text: "Data Layer", url: '/'}
]
},
{
text: "About", url: '',
items: [
{ text: "About", url: 'about' },
{ text: "UI Widgets", beginGroup: true, url: '' },
{ text: "Data Visualization", selected: true, url: '' },
{ text: "Themes" , url: '' },
{ text: "Common" , url: '' }
]
},
{
text: "Contact", url: '',
items: [
{ text: 'Contact us', url: "contact" },
{ text: 'UI Widgets', url: 'contact' },
{ text: 'Data Visualization Widgets', url: '', visible: true, selectable: true },
{ text: 'CSS Classes', url: '' },
{ text: 'UI Events', url: '' },
{ text: 'item1', url: '',
items: [
{ text: 'First', disabled: true},
{ text: 'Second', url: ''}
]},
{ text: 'item2', url: '' },
{ text: 'item3', url: '' }
]
}
];
$scope.itemClicked = function (data) {
// $location.path(data.itemData.url);
if (data.itemData.url !== '') {
$location.path(data.itemData.url);
};
//
// if (data.itemData.url !== '') {
// window.location.assign(data.itemData.url);
// };
// DevExpress.ui.notify("The \"" + data.itemData.text + "\" item is clicked", "success", 1500);
// DevExpress.ui.redirectTo(data.itemData.url);
};
});
myApp.controller('aboutController', function($scope) {
$scope.message = 'About';
});
myApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! Dr. ';
});
myApp.controller('devicesController', function($scope) {
$scope.message = 'List of Companies';
$scope.customers = [{
"ID": 1,
"CompanyName": "Super Mart of the West",
"Address": "702 SW 8th Street",
"City": "Bentonville",
"State": "Arkansas",
"Zipcode": 72716,
"Phone": "(800) 555-2797",
"Fax": "(800) 555-2171",
"Website": "http://www.nowebsitesupermart.com"
}, {
"ID": 2,
"CompanyName": "Electronics Depot",
"Address": "2455 Paces Ferry Road NW",
"City": "Atlanta",
"State": "Georgia",
"Zipcode": 30339,
"Phone": "(800) 595-3232",
"Fax": "(800) 595-3231",
"Website": "http://www.nowebsitedepot.com"
}, {
"ID": 3,
"CompanyName": "K&S Music",
"Address": "1000 Nicllet Mall",
"City": "Minneapolis",
"State": "Minnesota",
"Zipcode": 55403,
"Phone": "(612) 304-6073",
"Fax": "(612) 304-6074",
"Website": "http://www.nowebsitemusic.com"
}, {
"ID": 4,
"CompanyName": "Tom's Club",
"Address": "999 Lake Drive",
"City": "Issaquah",
"State": "Washington",
"Zipcode": 98027,
"Phone": "(800) 955-2292",
"Fax": "(800) 955-2293",
"Website": "http://www.nowebsitetomsclub.com"
}, {
"ID": 5,
"CompanyName": "E-Mart",
"Address": "3333 Beverly Rd",
"City": "Hoffman Estates",
"State": "Illinois",
"Zipcode": 60179,
"Phone": "(847) 286-2500",
"Fax": "(847) 286-2501",
"Website": "http://www.nowebsiteemart.com"
}, {
"ID": 6,
"CompanyName": "Walters",
"Address": "200 Wilmot Rd",
"City": "Deerfield",
"State": "Illinois",
"Zipcode": 60015,
"Phone": "(847) 940-2500",
"Fax": "(847) 940-2501",
"Website": "http://www.nowebsitewalters.com"
}, {
"ID": 7,
"CompanyName": "StereoShack",
"Address": "400 Commerce S",
"City": "Fort Worth",
"State": "Texas",
"Zipcode": 76102,
"Phone": "(817) 820-0741",
"Fax": "(817) 820-0742",
"Website": "http://www.nowebsiteshack.com"
}, {
"ID": 8,
"CompanyName": "Circuit Town",
"Address": "2200 Kensington Court",
"City": "Oak Brook",
"State": "Illinois",
"Zipcode": 60523,
"Phone": "(800) 955-2929",
"Fax": "(800) 955-9392",
"Website": "http://www.nowebsitecircuittown.com"
}, {
"ID": 9,
"CompanyName": "Premier Buy",
"Address": "7601 Penn Avenue South",
"City": "Richfield",
"State": "Minnesota",
"Zipcode": 55423,
"Phone": "(612) 291-1000",
"Fax": "(612) 291-2001",
"Website": "http://www.nowebsitepremierbuy.com"
}, {
"ID": 10,
"CompanyName": "ElectrixMax",
"Address": "263 Shuman Blvd",
"City": "Naperville",
"State": "Illinois",
"Zipcode": 60563,
"Phone": "(630) 438-7800",
"Fax": "(630) 438-7801",
"Website": "http://www.nowebsiteelectrixmax.com"
}, {
"ID": 11,
"CompanyName": "Video Emporium",
"Address": "1201 Elm Street",
"City": "Dallas",
"State": "Texas",
"Zipcode": 75270,
"Phone": "(214) 854-3000",
"Fax": "(214) 854-3001",
"Website": "http://www.nowebsitevideoemporium.com"
}, {
"ID": 12,
"CompanyName": "Screen Shop",
"Address": "1000 Lowes Blvd",
"City": "Mooresville",
"State": "North Carolina",
"Zipcode": 28117,
"Phone": "(800) 445-6937",
"Fax": "(800) 445-6938",
"Website": "http://www.nowebsitescreenshop.com"
}, {
"ID": 13,
"CompanyName": "Braeburn",
"Address": "1 Infinite Loop",
"City": "Cupertino",
"State": "California",
"Zipcode": 95014,
"Phone": "(408) 996-1010",
"Fax": "(408) 996-1012",
"Website": "http://www.nowebsitebraeburn.com"
}, {
"ID": 14,
"CompanyName": "PriceCo",
"Address": "30 Hunter Lane",
"City": "Camp Hill",
"State": "Pennsylvania",
"Zipcode": 17011,
"Phone": "(717) 761-2633",
"Fax": "(717) 761-2334",
"Website": "http://www.nowebsitepriceco.com"
}, {
"ID": 15,
"CompanyName": "Ultimate Gadget",
"Address": "1557 Watson Blvd",
"City": "Warner Robbins",
"State": "Georgia",
"Zipcode": 31093,
"Phone": "(995) 623-6785",
"Fax": "(995) 623-6786",
"Website": "http://www.nowebsiteultimategadget.com"
}, {
"ID": 16,
"CompanyName": "EZ Stop",
"Address": "618 Michillinda Ave.",
"City": "Arcadia",
"State": "California",
"Zipcode": 91007,
"Phone": "(626) 265-8632",
"Fax": "(626) 265-8633",
"Website": "http://www.nowebsiteezstop.com"
}, {
"ID": 17,
"CompanyName": "Clicker",
"Address": "1100 W. Artesia Blvd.",
"City": "Compton",
"State": "California",
"Zipcode": 90220,
"Phone": "(310) 884-9000",
"Fax": "(310) 884-9001",
"Website": "http://www.nowebsiteclicker.com"
}, {
"ID": 18,
"CompanyName": "Store of America",
"Address": "2401 Utah Ave. South",
"City": "Seattle",
"State": "Washington",
"Zipcode": 98134,
"Phone": "(206) 447-1575",
"Fax": "(206) 447-1576",
"Website": "http://www.nowebsiteamerica.com"
}, {
"ID": 19,
"CompanyName": "Zone Toys",
"Address": "1945 S Cienega Boulevard",
"City": "Los Angeles",
"State": "California",
"Zipcode": 90034,
"Phone": "(310) 237-5642",
"Fax": "(310) 237-5643",
"Website": "http://www.nowebsitezonetoys.com"
}, {
"ID": 20,
"CompanyName": "ACME",
"Address": "2525 E El Segundo Blvd",
"City": "El Segundo",
"State": "California",
"Zipcode": 90245,
"Phone": "(310) 536-0611",
"Fax": "(310) 536-0612",
"Website": "http://www.nowebsiteacme.com"
}];
$scope.dataGridOptions = {
bindingOptions: {
dataSource: 'customers'
},
paging: {
pageSize: 7
},
editing: {
editMode: 'row',
editEnabled: true,
removeEnabled: true,
insertEnabled: true,
removeConfirmMessage:
"Are you sure you want to delete this record?"
},
selection: {
mode: 'multiple'
},
onCellClick: function (clickedCell) {
clickedCell.cellElement.hasClass("clicked") ? clickedCell.cellElement.removeClass("clicked") : clickedCell.cellElement.addClass("clicked")
// clickedCell.cellElement.addMa
}
};
});
myApp.controller('stsController', function($scope, $http) {
$scope.message = 'List of STS - Database MySQL';
$http.get(serviceHome)
.success(function(data) {
$scope.sts = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
$scope.dataGridOptionsSTS = {
bindingOptions: {
dataSource: 'sts'
},
paging: {
pageSize: 20
},
editing: {
editMode: 'row'
// editEnabled: true,
// removeEnabled: true,
// insertEnabled: true,
// removeConfirmMessage:
// "Are you sure you want to delete this record?"
},
selection: {
mode: 'multiple'
}
};
});
//Exposes the current URL in the browser address bar
//Maintains synchronization between itself and the browser's URL
//Represents the URL object as a set of methods
myApp.config(function($routeProvider) {
$routeProvider
// .when(serviceHome, {
// templateUrl: 'index.html',
// controller: 'appCtrl'
// })
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
})
.when('/devicessts', {
templateUrl : 'pages/devicessts.html',
controller : 'devicesController'
})
.when('/sts', {
templateUrl : 'pages/sts.html',
controller : 'stsController'
});
// $locationProvider.html5Mode(true);
});
Html - Devicests:
<html lang="en-US">
<script type="text/javascript" src="./script.js"></script>
<style>
.format {
float: left;
margin: 5px;
padding: 15px;
width: 70%;
height: 50%;
border: 0px solid black;
}
.format-map {
float: left;
margin: 5px;
padding: 15px;
width: 25%;
height: 50%;
border: 0px solid black;
}
.clicked {
color: chartreuse
}
</style>
<body>
<div class="format">
<h1>Devices</h1>
<p>{{ message }}</p>
<div class="navbar-brand"></div>
<div dx-data-grid= dataGridOptions></div>
<br>
</div>
<!--<div class="format-map">
<div dx-map="{
provider: 'google',
type: 'roadmap',
height: '400px',
width: '500px',
center: '45.340836, -75.719230',
zoom: 13
}">
</div>
</div> -->
<div class="format-map">
<div dx-map="{
provider: 'google',
type: 'roadmap',
height: '400px',
width: '500px',
center: '45.340836, -75.719230',
zoom: 13
}">
</div>
</div>
</body>
</html>
Sergey, Можете ли вы написать в Угловом подходе? Спасибо –
Несомненно, http://plnkr.co/edit/rLB9D24v5jBwfhxjRJIU?p=preview – Sergey
Спасибо за помощь! –