php - 如何将动态数据从 mysql 拉到 anguarJS 然后谷歌地图标记

Question

我正在尝试从 mysql 传递动态数据，然后在 google 上创建多个标记。

这是我的 html 代码。

<div ng-app="mapsApp" ng-controller="MapCtrl">
    <div class="map">
        <div id="map" style="width: 100%;height:738px;"></div>
    </div>
</div>

这是 angularjs 脚本。

//Angular App Module and Controller
var investup = angular.module('mapsApp', [])
investup.controller('MapCtrl', function ($scope, $compile) {
    var cities = [
    {
        title: 'xyz',
        city : '<img src="images/xxx.jpg" />',
        lat : 12.2917925,
        long : 76.6704174
    },
    {
        title: 'Add to Cart',
        city : '<button class="org-btn" ng-click="cartone()" style="display:block;font-size:12px;margin:0 auto 0 auto;">Add to Cart</button>',
        lat : 12.2725645,
        long : 76.6705986
    },
];

//Define your locations: HTML content for the info window, latitude, longitude
var popup = [
['<img src="images/xyz.jpg" />'],
['<img src="images/xyz.jpg"/>'],
];

// Setup the different icons and shadows
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';
var icons = [iconURLPrefix + 'red-dot.png', iconURLPrefix + 'purple-dot.png']

var iconsLength = icons.length;

    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(12.2982778, 76.6903664),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        streetViewControl: false,
        panControl: false,
        zoomControlOptions: {
            position: google.maps.ControlPosition.LEFT_BOTTOM
        }
    }

    $scope.popup = popup;

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var activeInfoWindow;
    var activeInfoWindow2;

    var iconCounter = 0;

    $scope.markers = [];

    for (i = 0; i < cities.length; i++) {

        var createMarker = function (info) {
            var marker = new google.maps.Marker({map: $scope.map,icon: icons[iconCounter],position: new google.maps.LatLng(info.lat, info.long),popup: popup[i][0]});

            google.maps.event.addListener(marker, 'click', function() {

                if(activeInfoWindow2 != null)
                activeInfoWindow2.close();

                var contentString = "<div><h2>" + info.city + "</h2></div>";
                var compiled = $compile(contentString)($scope);
                var infoWindow = new google.maps.InfoWindow({ content: compiled[0] });
                infoWindow.open($scope.map, marker);
                activeInfoWindow = infoWindow;
            }); 

            google.maps.event.addListener(marker, 'mouseover', function() {
                var contentString = "<div><h2>" + marker.popup + "</h2></div>";
                var compiled = $compile(contentString)($scope);
                var infoWindow = new google.maps.InfoWindow({ content: compiled[0] });
                infoWindow.open($scope.map, marker);

                activeInfoWindow2 = infoWindow;

                if(activeInfoWindow != null)
                activeInfoWindow.close();
            });     

            google.maps.event.addListener(marker, 'mouseout', function() {
                if(activeInfoWindow2 != null)
                activeInfoWindow2.close();
            });

            $scope.markers.push(marker);
        }
        createMarker(cities[i]);
        iconCounter++;
    }

    $scope.openInfoWindow = function(e, selectedMarker) {
        e.preventDefault();
        google.maps.event.trigger(selectedMarker, 'click');
    }
});

这是结果的截图

这是静态代码，当我将 php 代码放在城市和弹出部分以不显示结果时。

问题是我不知道如何在 angularJS 中调用 php 代码。请帮助我。

提前致谢。

Answer 1

1- 您可能需要使用一个框架来为您处理 JSON 序列化。

为了简单起见，您可以使用此库(https://github.com/mevdschee/php-crud-api)，并将api.php 复制到服务器根目录。

2- 使用 $http:

investup.controller('MapCtrl', function($scope, $compile, $http) {
    $http.get('/api.php/cities').success(function(response) {
        var cities = response.cities;
        // the rest of controller function body
    }).catch(handleError);
})