DevExtreme、DxMap和DxDataGrid

Question

我已经建了一张达格图和一张地图。在那张地图上，我想在一排数据集中点击一些标记。

我怎样才能直接放置一个全地址的标记呢？

我的密码在这里：

1. 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 -Devicest：

        <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 */});

请务必使用正确的标记配置对象。

可以以下列格式之一指定标记位置：

• { lat: 40.749825，lng：-73.987963}
• "40.749825，-73.987963“
• 40.749825，-73.987963
• “纽约布鲁克林大桥”

我建议你用坐标代替地址。

我创造了一个小小提琴这里。第一个网格行包含字符串格式的地址，第二个表示地址为一个坐标数组。