Php 如何将动态数据从mysql拉到anguarJS，然后是google地图标记

我试图从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');
    }
});

//角度应用程序模块和控制器
var investup=angular.module（'mapsApp'，[]）
investup.controller（'MapCtrl'，函数（$scope，$compile）{
var城市=[
{
标题：“xyz”，
城市：''，
纬度：12.2917925，
长：76.6704174
},
{
标题：“添加到购物车”，
城市：“添加到购物车”，
纬度：12.2725645，
长：76.6705986
},
];
//定义您的位置：信息窗口的HTML内容、纬度、经度
var弹出窗口=[
[''],
[''],
];
//设置不同的图标和阴影
变量iconURLPrefix=http://maps.google.com/mapfiles/ms/icons/';
var icons=[iconURLPrefix+'red dot.png'，iconURLPrefix+'purple dot.png']
var iconsLength=icons.length；
变量映射选项={
缩放：12，
中心：新google.maps.LatLng（12.2982778,76.6903664），
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false，
街景控制：错误，
泛控制：错误，
ZoomControl选项：{
位置：google.maps.ControlPosition.LEFT_底部
}
}
$scope.popup=弹出窗口；
$scope.map=new google.maps.map（document.getElementById（'map'），mapOptions）；
var-activeInfoWindow；
var-activeInfoWindow2；
var-iconCounter=0；
$scope.markers=[]；
对于（i=0；i

下面是结果的屏幕截图

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

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

---

提前感谢。

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

为了简单起见，您可以使用这个库（），并将

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

---

我认为您需要实现某种API，在服务器端返回一些JSON数据，然后使用

$http

服务或

$ngResource

模块调用此端点。谢谢#Mohamed。你能举例说明bcoz iam new angularjs和jsond你在服务器端使用框架吗？不，我没有为此使用任何框架。谢谢#Mohamed。我会尽力回复你的。