DevExtreme 和 DxMap 以及 DxDataGrid

Question

我已经构建了数据网格和地图。在该地图中，当我单击数据网格的一行时，我想做一些标记。

有什么方法可以直接把带有完整地址的标记放上去？

我的代码在这里：

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 - 设备数：

        <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>

Answer 1

要将标记添加到 dxMap 小部件，请使用 addMarker 方法。

map.addMarker({location: /* marker location */});

请确保您使用了正确的标记 configuration object。

您可以使用以下格式之一指定标记位置：

{ 纬度：40.749825，经度：-73.987963}
"40.749825, -73.987963"
[40.749825, -73.987963]
'Brooklyn Bridge,New York,NY'

我建议您使用坐标而不是地址。

我创建了一个小 fiddle here。第一个网格行包含字符串格式的地址，第二个网格行将地址表示为坐标数组。

DevExtreme 和 DxMap 以及 DxDataGrid

DevExtreme and DxMap and DxDataGrid

javascript

google-maps

angularjs

angular-ui-router

devextreme