Question

我正在寻找以下解决方案：我有一个由多个位置组成的JSON文件。每个位置对象包含经度，纬度和位置标题。

我希望拥有的是每个JSON对象，因此对于每个位置，都会在同一页面上创建一个新的Google地图。没有硬编码。

我使用非常基本的标记来显示Google地图。您可以在此处看到实时示例：http://codepen.io/Caspert/pen/VvXXGP

{

    "title":    "Locations",

    "locations": [

        ,{

            "title":  "Location 1",

            "lat":  51.5046803,

            "lng": -0.1746135

        },{

            "title":  "Location 2",

            "lat":  51.5046403,

            "lng": -0.1744135

        },{

            "title":  "Location 3",

            "lat":  51.5046403,

            "lng": -0.1744135

        }

        ]

}

我用jQuery AJAX读出了我的JSON文件，如下所示：

init: function(){

    // Development
    console.log('init dataController');

    // Declare variables
    var root = this; // This in this function

    $.ajax({
        url: 'api/videoData.js',
        dataType: 'json',
        success: function(data) {

            root.dataArr = data;
            root.objectArr = root.dataArr.content;

            var modelCount = 0;
            var modelTypeCount = 0;


            // When all objects are received
            $.when(

                // Deferred object (probably Ajax request)
                // GET text format
                $.get('directives/format-text.html', function(response){
                    console.log('succes');
                    console.log(response);
                    root.dataModelText = response;
                }), 

                // GET location format
                $.get('directives/format-map.html', function(response){
                    console.log('succes');
                    console.log(response);
                    root.dataModelLocation = response;
                }), 

            )

            .then(function() {
                for (var i = 0; i < data.content.length; i++) {

                    if (data.content[modelCount].type == 'text' || data.content[modelCount].type == 'youtube' || data.content[modelCount].type == 'tickets') {
                        Triptube.dataController.getDataText(root.dataModelText, data, modelCount);
                    }

                    if (data.content[modelCount].type == 'location') {
                        modelTypeCount++;
                        Triptube.dataController.getDataLocation(root.dataModelLocation, data, modelCount, modelTypeCount);
                    }

                    modelCount++;

                }
            });


            function getData() {

                var modelParts = 4;
                var modelCount = 0;

                for (var i = 0; i < modelParts; i++) {

                    if (data.content[modelCount].type == 'location') {
                        console.log('type == location');
                    };

                    modelCount++;
                    console.log(modelCount);
                }

                $('body').removeClass('loading'); 

            } 

        },

        error: function(data) { 
            console.log(data);
            console.log('Houston, we have a problem!');
        }


    });


},

getDataLocation: function(dataModelLocation, data, modelCount, modelTypeCount){

    var root = this;

    var raw_model = root.dataModelLocation;
    model = $(raw_model);
    var dataID = data.content[modelCount].timeTrigger;
    var dataIndex = modelCount;

    model.attr('data-id', dataID);
    model.attr('data-index', dataIndex);

    model.find('.format').addClass(' ' + data.content[modelCount].type);
    model.find('#map').attr('map-id', modelTypeCount);

    $(model).insertBefore('.featured .footer');
},

我希望找到解决方案。

更新

我想出了以下内容： http://codepen.io/Caspert/pen/LpdwZW?editors=101

根据@Nedvajz的说明，我在地图中平移时收到以下错误：

Uncaught TypeError: Cannot read property 'x' of undefined

地图ID具有独特的索引，但所有相同的Google地图值：

Answer 1

你必须为每个项目制作自己的元素和地图对象。然后，它将允许您为每个地图指定标记。像这样：http://codepen.io/anon/pen/epMqKz

您提供的文件请执行以下操作：

public class PageBase: System.Web.Ui.Page
{
   // Check here if session type is anonymous
   protected bool Anonymously 
   {
      get
      {
           return (UserSession)Session.Contents["UserId"] is AnonymousSession;
      }
   }

   protected void Page_Init(object Sender,System.EventArgs e) 
    {
        var user = (UserSession)Session.Contents["UserId"];
        if (user == null) 
        { 
            throw new SessionException();
        } 
    }


    protected void Page_Error(object sender, System.EventArgs e) 
    {
         Exception ex = Server.GetLastError();
         Server.ClearError();
         if(ex is SessionException)
         {
            Context.Session.Clear();
            Context.Session.Abandon();
            FormsAuthentication.SignOut();
            Server.Transfer("Default.aspx", true);
         }
    }
}

Answer 2

这是一个带有2个地图的修改后的代码笔，你应该能够弄清楚如何在需要时进一步增加数量

http://codepen.io/anon/pen/avYged

对于html部分，您需要2个或更多div来包含地图

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

在您的javascript中，您需要创建2个或更多地图

// Create map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var map2 = new google.maps.Map(document.getElementById('map2'), mapOptions);

在你的CSS中你可以根据需要为每个地图应用单独的样式

#map {
  height: 400px;
  width: 48%;
  display: block;
  float: left;
}

#map2 {
  height: 400px;
  width: 48%;
  display: block;
  float: left;
}

Answer 3

创建一个<div>来放置地图，将其附加到文档正文

var mapDiv = document.createElement("div");
mapDiv.setAttribute("id", "map" + i);
// mapDiv.style.height = "500px";
// mapDiv.style.width = "500px";
mapDiv.className = "map";
var body = document.getElementsByTagName("body")[0];
body.appendChild(mapDiv);

在<div>中创建地图，在中心添加标记

maps[i] = new google.maps.Map(mapDiv, mapOptions);
var marker = new google.maps.Marker({
    position: {
        lat: mapJsonData.locations[i].lat,
        lng: mapJsonData.locations[i].lng
    },
    title: mapJsonData.locations[i].title,
    map: maps[i]
});

proof of concept fiddle

代码段

function initMap() {

  var latlng = {
    lat: 51.5046803,
    lng: -0.1746135
  };

  var mapOptions = {
    center: latlng,
    scrollwheel: false,
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true
  };

  var maps = [];

  for (var i = 0; i < mapJsonData.locations.length; i++) {
    console.log(mapJsonData.locations[i]);
    mapOptions.center = {
      lat: mapJsonData.locations[i].lat,
      lng: mapJsonData.locations[i].lng
    };
    // Create map
    var mapDiv = document.createElement("div");
    mapDiv.setAttribute("id", "map" + i);
    // mapDiv.style.height = "500px";
    // mapDiv.style.width = "500px";
    mapDiv.className = "map";
    var body = document.getElementsByTagName("body")[0];
    body.appendChild(mapDiv);
    maps[i] = new google.maps.Map(mapDiv, mapOptions);
    var marker = new google.maps.Marker({
      position: {
        lat: mapJsonData.locations[i].lat,
        lng: mapJsonData.locations[i].lng
      },
      title: mapJsonData.locations[i].title,
      map: maps[i]
    });
  }
}
google.maps.event.addDomListener(window, "load", initMap);
var mapJsonData = {
  "title": "Locations",
  "locations": [{
    "title": "Location 1",
    "lat": 51.5046803,
    "lng": -0.1746135,
  }, {
    "title": "Location 2",
    "lat": 42.0,
    "lng": -72
  }, {
    "title": "Location 3",
    "lat": 35,
    "lng": -117
  }]
};

html,
body,
.map {
  height: 200px;
  width: 400px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>

如何在同一页面上创建多个Google地图（而不是标记）？

3 个答案: