【问题标题】:Google Maps API Makers from JSON Array来自 JSON 数组的 Google Maps API 制造商
【发布时间】:2015-05-24 03:55:21
【问题描述】:

我有一个 php 脚本,它形成一个数组,然后作为 json 回显 - AJAX 调用将其拾取。那部分正在工作。

PHP 脚本输出以下示例:

[{"p": "123456","latlng": "52.012312,-.4213123"},{"p": "78910","latlng": "53.01,-.4128"}];

格式需为[123456,52.012312,-.4213123],[780910, 53.01,-.4123]

有人可以帮助我获取当前数组,并使用 jquery 形成一个符合地图 API 要求的新数组吗?

地图脚本:

function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
    mapTypeId: 'roadmap'
};

// Display a map on the page
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
map.setTilt(45);

// Multiple Markers
var markers = window.latlng;
//test markers
//= [
//    ['Bondi Beach', -33.890542, 151.274856],
//      ['Coogee Beach', -33.923036, 151.259052],
//      ['Cronulla Beach', -34.028249, 151.157507],
  //    ['Manly Beach', -33.80010128657071, 151.28747820854187]
 // ];

// Info Window Content (test content)
var infoWindowContent = [
    ['<div class="info_content">' +
    '<h3>London Eye</h3>' +
    '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +        '</div>'],
    ['<div class="info_content">' +
    '<h3>Palace of Westminster</h3>' +
    '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
    '</div>']
];

// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;

// Loop through our array of markers & place each one on the map  
function placemarker() {
for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        map: map,
        title: markers[i][0]
    });

    // Allow each marker to have an info window    
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
        }
    })(marker, i));

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
}
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed',     function(event) {
    this.setZoom(14);
    google.maps.event.removeListener(boundsListener);
});

AJAX 调用/Jquery:

          $.ajax({
            type: "POST",
            url: "engine.php",
            dataType: 'json',
            data: {req: 'latlng'},
            success: function(latlng){
            console.log("LATLNG:"+latlng);
            //var l = JSON.parse(latlng);
                var con = [];
                for(var i in latlng) {
                con.push([latlng[i][1],latlng[i][2]]);
                }
                window.latlng = con;
                placemarker();
                //var l = [];
                ////$.each(l, function(k, v) {
                //l.push([v.price, v.latlng]);
               // window.latlng = l;
                //});
            console.log(window.latlng);
            },
            error: function(){
            //alert(html);
            },
            complete: function(){
            }
        });

目前没有错误或输出。

【问题讨论】:

    标签: javascript jquery ajax json google-maps-api-3


    【解决方案1】:

    您可以将对象数组转换为所需的格式,如下所示:

    var dataFromPhp = [{p: '123456',latlng: '52.012312,-.4213123'},{p: '78910',latlng: '53.01,-.4123'}];
    var dataForGoogle = dataFromPhp.map(function (obj) { 
      return [obj.p].concat(obj.latlng.split(',')); 
    })
    document.write(dataForGoogle.join(' ** '));

    【讨论】:

    • 我这样做了,但地图仍然显示为空白。
    • 我也得到:Uncaught TypeError: undefined is not a function
    • 奇怪,我在 Stack Overflow 上运行时没有出现异常。这是一个小提琴,展示了一个基本示例如何在地图上放置点:jsfiddle.net/xw5f1sgy
    • 我想我找到了问题所在。数组输出如下:
    • [{"p:" "123456","latlng": "52.012312,-.4213123"},{"p" "78910","latlng": "53.01,-.4128" }];
    猜你喜欢
    • 2011-03-25
    • 1970-01-01
    • 1970-01-01
    • 2017-03-17
    • 2011-02-11
    • 2011-09-10
    • 1970-01-01
    • 2016-10-23
    • 2014-02-23
    相关资源
    最近更新 更多