使用文件Json打开带有纬度和经度的谷歌地图答案

【问题标题】：opening google maps with latitude and longitude with file Json使用文件Json打开带有纬度和经度的谷歌地图
【发布时间】：2017-12-22 14:34:46
【问题描述】：

我正在尝试使用 Json 文件的经纬度打开此地图，但我无法放置标记，它只是打开地图。

我正在通过 PHP 访问一个 json 文件并创建一个变量数组，就在我将此数组发送到带有纬度和经度点的 javascript 之后。但它没有打开和显示标记。

有人知道发生了什么吗？下面是我正在做的代码。

文件 Points.Json

{
"points":[
            {
                "id"        :"01",
                "name"      :"marker01",
                "latitude"  :"-23.538241",
                "longitude" :"-46.647703"
            },
            {
                "id"        :"02",
                "name"      :"marker02",
                "latitude"  :"-23.551258",
                "longitude" :"-46.656243"
            },
            {
                "id"        :"03",
                "name"      :"marker03",
                "latitude"  :"-23.559160",
                "longitude" :"-46.624443"
            }
        ]
  }

<?php 
  $fileJson = file_get_contents('points.json');
  $fileJson = json_decode($fileJson);

  foreach ($fileJson->points as $value) {
    $locations[] = array('id'=>$value->id, 'name'=>$value->name, 
    'latitude'=>$value->latitude, 'longitude'=>$value->longitude);
  }
    $locations = json_encode($locations);
  ?>

  <div id="map"></div>

function initMap() {
  var mapOptions = {
    center: new google.maps.LatLng(-23.538241, -46.647703),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var myMap = new google.maps.Map(document.getElementById("map"), mapOptions);

	var locationdata = '{"locations":<?php echo $locations; ?>}';

  var locations = [];
  var markers = [];
  for (var i = 0; i < locationdata.locations.length; i++) {
    var marker_location = locationdata.locations;
    createMarker(marker_location[i],markers,myMap);
  }
  var markerCluster = new MarkerClusterer(myMap, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });
}

initMap();

function createMarker(marker_location, markers, myMap) {
    var latLng = new google.maps.LatLng(marker_location.latitude, marker_location.longitude);
    var marker = new google.maps.Marker({
      'position': latLng,
      map:map,
      icon: "http://maps.google.com/mapfiles/ms/icons/green.png"
    });
    markers.push(marker);

    var i_box = '<div>nome :'+ marker_location.nome +'<br>Latitude :' + marker_location.latitude + '<br>Longitude :' + marker_location.longitude + '</div>';

    var myOptions = {
      content: i_box,
      disableAutoPan: false,
      maxWidth: 0,
      pixelOffset: new google.maps.Size(-100, -100),
      zIndex: null,
      boxStyle: {
        background: "url('tipbox.gif') no-repeat",
        opacity: 1,
        width: "200px"
      },
      closeBoxMargin: "0px 0px 0px 0px",
      closeBoxURL: "https://www.google.com/intl/en_us/mapfiles/close.gif",
      infoBoxClearance: new google.maps.Size(1, 1),
      isHidden: false,
      pane: "floatPane",
      enableEventPropagation: false
    };

    google.maps.event.addListener(marker, "click", function(e) {
      ib.open(myMap, this);
    });
    var ib = new InfoBox(myOptions);
}

body{
	margin: 0;
	padding: 0;
	background: #fafafa;
	font-size: 13px;
	font-family: 'Helvetica Neue',sans-serif;
	color: #454545;
	line-height: 15px;}


#maps{height:400px;width:100%;background:#ddd;}
#maps img{max-width:inherit}


#map{height:400px;width:100%;background:#ddd;}
#map img{max-width:inherit}

<div id="map"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBox3TvUA_j5u4bDmVLXvbtzO7F6y19piA&callback=initMap" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

【问题讨论】：

您是如何尝试“打开”文件的？当然可以使用 XMLHTTPRequest 来完成。
您在解析 JSON 时遇到问题，或者您无法在 UI 上绘制标记？
“打开谷歌地图中的书签”是什么意思？您是否尝试在这些位置显示标记（可能使用 InfoWindows）？

标签： javascript arrays json google-maps

【解决方案1】：

这是一个非常深入的示例，说明您正在尝试做什么：https://developers.google.com/maps/documentation/javascript/datalayer

对于未来的问题，您应该查看他们在 Google Maps API 上提供的示例，它们非常有用并提供分步说明

【讨论】：