[英]Trying to parse external json file to create markers in google maps api
I am using JavaScript and a external JSON file. 我正在使用JavaScript和外部JSON文件。 Here is my JSON file. 这是我的JSON文件。 It is in the same folder as my js file. 它与我的js文件位于同一文件夹中。 I called the JSON file csus_locations.JSON 我将JSON文件称为csus_locations.JSON
{
"locations": [
{
"latitude": 38.558961,
"longitude": -121.423011,
"name": "AIRC",
"title": "THIS IS WHERE STUFF GETS DONE!"
},
{
"latitude": 38.562605,
"longitude": -121.419683,
"name": "GUY WEST",
"title": "PRESIDENT?"
},
{
"latitude": 38.556652,
"longitude": -121.423842,
"name": "well",
"title": "WORKOUT"
},
{
"latitude": 38.555465,
"longitude": -121.422551,
"name": "Hornetsatdium",
"title": "FOOTBAL!"
}
]}
I Know that this is legal json code because i tested to verify it. 我知道这是合法的json代码,因为我测试了对其进行验证。 But can i remove "locations": and remove the brackets to make it simpler to parse into google maps? 但是我可以删除“位置”:并删除括号以使其更易于解析为Google地图吗?
I am trying to parse the json file using $http.get but my i am note sure if i wrote the code correctly 我正在尝试使用$ http.get解析json文件,但是我要注意我是否正确编写了代码
angular.module('app.controllers', ['ionic'])
.controller('mapCtrl', function ($scope, $ionicSideMenuDelegate, $ionicLoading, $compile, $ionicPopup, $http) {
$ionicSideMenuDelegate.canDragContent(false);
var myLatlng = new google.maps.LatLng(38.5602, -121.4241);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: false,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Sac State'
});
//i want to get parse with $http.get but i am not sure if i wrote this code correctly
$http.get('csus_locations.json').success(function(res){
console.log("success!");
$scope.locations = res.locations;
//window.alert("The app is reading the Json file!"); this was a test to see if the get function was working
var latLng_csus = new google.maps.LatLng(value.latitude, value.longitude);
var marker = new google.maps.Marker({
position: latLng_csus,
title: value.name
});
});
/* this was my first attempt to create markers
console.log(jsonCSUS);
angular.forEach(jsonCSUS, function(value, key){
var latLng_csus = new google.maps.LatLng(value.latitude, value.longitude);
var marker = new google.maps.Marker({
position: latLng_csus,
title: value.name
});
marker.setMap(map);
});*/
var onSuccess = function (position) {
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
$scope.map = map;
//$scope.map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
};
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
navigator.geolocation.watchPosition(onSuccess, onError, {
maximumAge: 3000,
timeout: 5000,
enableHighAccuracy: true
});
});
The provided JSON file, indeed is a valid one, so you could initialize markers like this: 提供的JSON文件确实是一个有效的文件,因此您可以像这样初始化标记:
$http.get('csus_locations.json').success(function (data) {
$scope.locations = data.locations;
$scope.locations.forEach(function(item){
var latLng = new google.maps.LatLng(item.latitude, item.longitude);
var marker = new google.maps.Marker({
position: latLng,
title: item.name,
map: map
});
});
});
Working example 工作实例
angular.module('mapApp', ['ionic']) .controller('mapCtrl', function ($scope, $http) { var mapOptions = { center: new google.maps.LatLng(38.5602, -121.4241), zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControl: false, disableDefaultUI: true }; var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions); $http.get('https://gist.githubusercontent.com/vgrem/c7ec78e7078c2c9ed1c3/raw/959e9d8b8e60544fcc169ea890e84a2624ed8bbb/csus_locations.json').success(function (data) { $scope.locations = data.locations; $scope.locations.forEach(function(item){ var latLng = new google.maps.LatLng(item.latitude, item.longitude); var marker = new google.maps.Marker({ position: latLng, title: item.name, map: map }); }); }); });
#map-canvas { width: 800px; height: 600px; }
<link href="http://code.ionicframework.com/1.1.1/css/ionic.css" rel="stylesheet"> <script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true"></script> <div ng-app="mapApp" ng-controller="mapCtrl"> <div id="map-canvas"></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.