1
我想向您展示地圖上該地區的地點列表。用下面的代碼我可以證明這一點，但我無法弄清楚如何從MySQL中提取數據。我如何用ajax.php更改下面的$ scope.names部分。Angularjs讓json不能在Google地圖上工作
此HTML代碼工作完美：
var hotelApp = angular.module('hotelApp', [])
hotelApp.controller('ContentControler', function ($scope, $http) {
\t var imageUrl = base_url + 'marker.png';
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.location_name = "";
\t
$http.get('properties.php').success(function(data) {
$scope.namesx = data;
});
\t
$scope.names = [{
prop_Name: name,
prop_Addr: '123 Easy Street',
prop_Price: 325.00,
prop_Dist: .25,
prop_Desc: 'This is the First Location.',
lat: 43.7000,
long: -79.4000
}, {
prop_Name: 'Location 2',
prop_Addr: '456 Easy Street',
prop_Price: 114.00,
prop_Dist: 3,
prop_Desc: 'This is the Second Location.',
lat: 40.6700,
long: -73.9400
}, {
prop_Name: 'Location 3',
prop_Addr: '789 Easy Street',
prop_Price: 98.00,
prop_Dist: 4,
prop_Desc: 'This is the Third Location.',
lat: 41.8819,
long: -87.6278
}, {
prop_Name: 'Location 4',
prop_Addr: '1011 Easy Street',
prop_Price: 150.00,
prop_Dist: 1,
prop_Desc: 'This is the Fourth Location.',
lat: 34.0500,
long: -118.2500
}, {
prop_Name: 'Location 5',
prop_Addr: '1213 Easy Street',
prop_Price: 250.00,
prop_Dist: 7,
prop_Desc: 'This is the Firth Location.',
lat: 36.0800,
long: -115.1522
}];
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow({maxWidth: 350});
var createMarker = function (info) {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.prop_Name,
\t \t \t deniz: info.prop_Addr,
\t \t \t animation: google.maps.Animation.DROP,
\t \t \t
});
\t \t
marker.content = '<div id="iw-container"><div class="iw-content"><div class="iw-subTitle">' + '<li>' + info.prop_Desc + '</li>' + '<li>' + info.prop_Addr + '</li>' + '<li>' + info.prop_Price + '</li>' + '<li>' + info.prop_Dist + '</li>' + '</div></div></div>';
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent('<div class="iw-subTitle">' + marker.title + '</div>' + marker.content);
infoWindow.open($scope.map, marker);
});
\t \t
\t \t google.maps.event.addListener($scope.map, 'click', function() {
\t \t \t infoWindow.close($scope.map, marker);
\t \t });
\t \t
$scope.markers.push(marker);
\t \t
\t \t google.maps.event.addListener(infoWindow, 'domready', function() {
\t \t // Reference to the DIV that wraps the bottom of infowindow
\t \t var iwOuter = $('.gm-style-iw');
\t \t /* Since this div is in a position prior to .gm-div style-iw.
\t \t * We use jQuery and create a iwBackground variable,
\t \t * and took advantage of the existing reference .gm-style-iw for the previous div with .prev().
\t \t */
\t \t var iwBackground = iwOuter.prev();
\t \t // Removes background shadow DIV
\t \t iwBackground.children(':nth-child(2)').css({'display' : 'none'});
\t \t // Removes white background DIV
\t \t iwBackground.children(':nth-child(4)').css({'display' : 'none'});
\t \t // Moves the infowindow 115px to the right.
\t \t iwOuter.parent().parent().css({left: '115px'});
\t \t // Moves the shadow of the arrow 76px to the left margin.
\t \t iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 76px !important;'});
\t \t // Moves the arrow 76px to the left margin.
\t \t iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 76px !important;'});
\t \t // Changes the desired tail shadow color.
\t \t iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'silver 0px 1px 6px', 'z-index' : '1'});
\t \t // Reference to the div that groups the close button elements.
\t \t var iwCloseBtn = iwOuter.next();
\t \t // Apply the desired effect to the close button
\t \t iwCloseBtn.css({opacity: '1', right: '38px', top: '3px', border: '7px solid #48b5e9', 'border-radius': '13px', 'box-shadow': '0 0 5px #3990B9'});
\t \t // If the content of infowindow not exceed the set maximum height, then the gradient is removed.
\t \t if($('.iw-content').height() < 140){
\t \t $('.iw-bottom-gradient').css({display: 'none'});
\t \t }
\t \t // The API automatically applies 0.7 opacity to the button after the mouseout event. This function reverses this event to the desired value.
\t \t iwCloseBtn.mouseout(function(){
\t \t $(this).css({opacity: '1'});
\t \t });
\t \t });
}
for (i = 0; i < $scope.names.length; i++) {
createMarker($scope.names[i]);
}
$scope.openInfoWindow = function (e, selectedMarker) {
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
\t
\t
\t
\t
\t $scope.goster = function (e, selectedMarker) {
e.preventDefault();
\t \t selectedMarker.setIcon(imageUrl);
\t \t selectedMarker.setAnimation(google.maps.Animation.BOUNCE);
}
\t
\t $scope.gizle = function (e, selectedMarker) {
e.preventDefault();
\t \t selectedMarker.setIcon(null);
selectedMarker.setAnimation(null);
}
\t
//Max Location Price
$scope.maxPrice = 500;
$scope.priceRangeFilter = function (location) {
return location.prop_Price <= $scope.maxPrice;
};
//Max POI Radius
$scope.maxRadius = 15;
$scope.radiusRangeFilter = function (location) {
return location.prop_Dist <= $scope.maxRadius;
};
$scope.$watch('nas',
function (newValue, oldValue) {
for (jdx in $scope.markers) {
$scope.markers[jdx].setMap(null);
}
$scope.markers = [];
for (idx in $scope.nas) {
createMarker($scope.nas[idx]);
}
}, true);
});#map {
height:400px;
width:100%;
}
.gm-style-iw {
\t width: 350px !important;
\t top: 15px !important;
\t left: 0px !important;
\t background-color: #fff;
\t border: 1px solid silver;
\t border-radius: 0px;
\t
\t -webkit-box-shadow: 48px 9px 14px -10px rgba(0,0,0,0.2);
\t -moz-box-shadow: 48px 9px 14px -10px rgba(0,0,0,0.2);
\t box-shadow: 48px 9px 14px -10px rgba(0,0,0,0.2);
}
#iw-container {
\t margin-bottom: 0px;
}
#iw-container .iw-title {
\t font-family: 'Open Sans Condensed', sans-serif;
\t font-size: 22px;
\t font-weight: 400;
\t padding: 10px;
\t background-color: #48b5e9;
\t color: white;
\t margin: 0;
\t border-radius: 0;
}
#iw-container .iw-title a{
\t color: white;
\t text-decoration: none;
}
#iw-container .iw-content {
\t width:330px;
\t font-size: 13px;
\t line-height: 18px;
\t font-weight: 400;
\t margin-right: 1px;
\t color:#aaa;
\t padding: 10px;
\t max-height: 400px;
\t overflow-y: hidden;
\t overflow-x: hidden;
}
.iw-content a{
\t color:#777;
\t text-decoration: none;
}
.iw-content img {
\t margin: 0; \t
}
.iw-subTitle {
\t font-size: 16px;
\t font-weight: 700;
\t padding: 5px 0;
}
.iw-bottom-gradient {
\t position: absolute;
\t width: 326px;
\t height: 25px;
\t bottom: 10px;
\t right: 18px;
\t background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
\t background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
\t background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
\t background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}<html lang="tr">
<head>
<meta charset="utf-8">
<title>Airbnb Çalışmam</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyBVgASeglOFj8kUSEnVQVfr4vuaD1pVxI8&sensor=false&libraries=places" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
\t var base_url = "http://www.odevi.org/test/airbnb/airbnb_map/";
</script>
</head>
<body>
<div ng-app="hotelApp" ng-controller="ContentControler">
<div id="map"></div>
<h2>Filters</h2>
<p>Location Name:
<input type="text" ng-model="location_name">
</p>
<p>Maxium Price:
<input type="text" ng-model="maxPrice">
</p>
<p>POI Search Radius:
<input type="text" ng-model="maxRadius">
</p>
\t <div id="esra">tese</div>
\t <div id="class" ng-repeat="marker in markers | orderBy : 'title'">
\t \t <a href="#" ng-mouseover="goster($event, marker)" ng-mouseleave="gizle($event, marker)">{{marker.title}}-{{marker.deniz}}</a>
</div>
<div ng-repeat="x in nas = (names | filter:{prop_Name:location_name} | filter:priceRangeFilter | filter:radiusRangeFilter)"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
</body>
</html>，但我想用JSON讓PHP MySQL的數據。如何更改$ scope.names與ajax.php你可以幫助我？
我ajax.php代碼：
<?php
$response['success'] = false;
$dsn = "mysql:dbname=dname;host=localhost;charset=utf8;";
$db = new PDO($dsn, "dnames", "1111111");
$stmt = $db->prepare("SELECT * FROM wp_propertiesx");
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
if(!empty($result)) {
\t $response['success'] = true;
\t $response['data'] = $result;
\t $ney = $response['data'];
}
echo json_encode($ney);
?>
我應該在哪裏放這段代碼？ –