谷歌地图API第3版加载JSON数据 [英] Load JSON data for Google MAPS API v3

查看：417
本文介绍了谷歌地图API第3版加载JSON数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

从下面的例子中code开始（从的https://google-developers.appspot.com/maps/documentation/javascript/overlays#SimpleIcons)

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
  ＆LT; HEAD＆GT;
    ＆LT; META NAME =视CONTENT =初始规模= 1.0，用户可扩展性=无/＆GT;
    ＆LT;风格类型=文/ CSS＆GT;
      HTML {身高：100％}
      车身高度{：100％;保证金：0;填充：0}
      #map_canvas {身高：100％}
    ＆LT; /风格＆GT;
    ＆LT;脚本类型=文/ JavaScript的
      src=\"http://maps.googleapis.com/maps/api/js?key=AIzaSyCHgCs40BzMLmN2-GpJ-liYfcYsas-VVsI&sensor=false\">
    ＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的＆GT;
函数初始化（）{
  VAR的MapOptions = {
    变焦：10，
    MAXZOOM：12，
    中心：新google.maps.LatLng（-33.9，151.2），
    mapTypeId设为：google.maps.MapTypeId.ROADMAP
  }
  VAR地图=新google.maps.Map（的document.getElementById（map_canvas的）
                                的MapOptions）;  setMarkers（地图，海滩）;
}/ **
 *数据由名称，的经纬度，并为zIndex的标记
 *在这些标记物应显示各顶部的顺序
 *等。
 * / VAR的沙滩=（函数（）{
    VAR JSON = NULL;
    $阿贾克斯（{
        异步：假的，
        全球性：假的，
        URL：data.php，
        的dataType：JSON
        '成功'：功能（数据）{
            JSON =数据;
        }
    }）;
    返回JSON;
    警报（OK，加载的数据）;
}）;/ * VAR的沙滩= [
  ['斯图加特'，48.766700，9.183330，4]
  ['Coogee海滩，-33.923036，151.259052 5]
  ['克罗纳拉海滩，-34.028249，151.157507，3]
  ['曼利海滩，-33.80010128657071，151.28747820854187，2]
  ['马鲁巴海滩，-33.950198，151.259302，1]
];
* /
功能setMarkers（地图，位置）{
  //添加标记到地图  //标记尺寸pssed为X，Y的尺寸前$ P $
  //在图像的原点（0,0）位于
  //在图像的左上角。  //起源，锚位置和标志的坐标
  //增加在X方向向右和
  // Y方向向下。
  VAR形象=新google.maps.MarkerImage（图像/ beachflag.png'，
      //这个标记是20个像素宽32像​​素高。
      新为google.maps.Size（20，32），
      //该图片的原点是0,0。
      新google.maps.Point（0,0），
      //该图片的锚旗杆在0.32的基础。
      新google.maps.Point（0，32））;
  VAR阴影=新google.maps.MarkerImage（图像/ beachflag_shadow.png'，
      //阴影图像是在水平尺寸大
      //而位置和偏移的相同的主要图像。
      新为google.maps.Size（37，32）
      新google.maps.Point（0,0），
      新google.maps.Point（0，32））;
      //定义形状的图标的可点击区域。
      //类型定义HTML＆LT;＆地区GT;元素聚，这
      //描绘出一个多边形为一系列的X，Y点。最后
      //坐标通过连接到所述第一关闭聚
      //坐标。
  VAR形状= {
      坐标：[1，1，1，20，18，20，18，1]，
      类型：'聚'
  };
  对于（VAR I = 0; I＆LT; locations.length;我++）{
    VAR沙滩=位置[I]
    VAR myLatLng =新google.maps.LatLng（海滨[1]，海滨[2]）;
    VAR的标记=新google.maps.Marker（{
        位置：myLatLng，
        地图：地图，
        阴影：阴影，
        图标：图像，
        外形：外形，
        标题：海滩[0]
        zIndex的：海滩[3]
    }）;
  }
}
    ＆LT; / SCRIPT＆GT;
  ＆LT; /头＆GT;
  ＆LT;身体的onload =初始化（）＆GT;
    ＆LT; D​​IV ID =map_canvas的风格=宽度：100％;身高：100％＆GT;＆LT; / DIV＆GT;
  ＆LT; /身体GT;
＆LT; / HTML＆GT;

我可以从外部文件加载点？
使用该解决方案负载JSON为可变我做了以下内容：

  VAR海滩=（函数（）{
    VAR JSON = NULL;
    $阿贾克斯（{
        异步：假的，
        全球性：假的，
        URL：data.json，
        的dataType：JSON
        '成功'：功能（数据）{
            JSON =数据;
        }
    }）;
    返回JSON;
}）（）;

但文件列表的海滩似乎并没有被良好的格式化JSON文件！
文件data.json：

 海滩：
  ['邦迪海滩，-33.890542，151.274856，4]
  ['Coogee海滩，-33.923036，151.259052 5]
  ['克罗纳拉海滩，-34.028249，151.157507，3]
  ['曼利海滩，-33.80010128657071，151.28747820854187，2]
  ['马鲁巴海滩，-33.950198，151.259302，1]
];


解决方案

似乎是在澳大利亚受欢迎的活动。请参见下面的：

谷歌地图API第3版：从Excel批量上传标记的自定义信息框

starting from the following example code (from https://google-developers.appspot.com/maps/documentation/javascript/overlays#SimpleIcons)

   <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCHgCs40BzMLmN2-GpJ-liYfcYsas-VVsI&sensor=false">
    </script>
    <script type="text/javascript">
function initialize() {
  var mapOptions = {
    zoom: 10,
    maxZoom: 12,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                mapOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */

 var beaches = (function () {
    var json = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': data.php,
        'dataType': "json",
        'success': function (data) {
            json = data;
        }
    });
    return json;
    alert("OK, data loaded");
}); 



/*var beaches = [
  ['Stuttgart', 48.766700, 9.183330, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];
*/
function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML <area> element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

can I load the points from an external file? Using this solution load json into variable I made the following:

var beaches = (function () {
    var json = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': data.json,
        'dataType': "json",
        'success': function (data) {
            json = data;
        }
    });
    return json;
})();

but the file beaches list doesn't seem to be a well formatted JSON file! file data.json:

beaches: [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

解决方案

Seems to be a popular activity in Australia. See the below:

Google Maps API v3: Bulk uploading markers from Excel with custom info boxes

这篇关于谷歌地图API第3版加载JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆