Question

可能重复：
Accessing Javascript Array to placemarkers on Google Map

我有一个数组：

var CITIES = {
  "Buenos Aires":
  {latitude: -34.6084, longitude: -58.3732},
  "Santiago":
  {latitude: -33.4254, longitude: -70.5665},
  "Gaborone":
  {latitude: -24.6541, longitude: 25.9087},
...
}

我需要在2D Google地图上放置标记;我试着用这个功能做到这一点：

/*
 * void
 * mark()
 *
 * Markes locations of study abroad programs all around the world map
 */

function mark()
{
    // mark programs
    for (var city in CITIES)
    {
        // plant cities on map
        new google.maps.Marker({
         icon: "http://google-maps-icons.googlecode.com/files/smallcity.png",
         map: map,
         position: new google.maps.LatLng(CITIES[city].latitude, CITIES[city].longitude),
         title: 'CITIES[city]'
        });
    }
}

控制台上没有错误。

如何制作标记？（错误与我指的是CITIES [city]）吗？

Answer 1

缩放

你放大了吗？因为如果你处理下面的问题（live example），它对我有用：

// Note that this script is just before the closing body
// tag, so we can access items above by their ID and such.
// To avoid clashes, avoid creating any public symbols
// by using an anonymous scoping function.
(function() {
  // Our map
  var map;

  // Our cities
  var CITIES = {
    "Buenos Aires":
    {latitude: -34.6084, longitude: -58.3732},
    "Santiago":
    {latitude: -33.4254, longitude: -70.5665},
    "Gaborone":
    {latitude: -24.6541, longitude: 25.9087}
  };

  // Call our load function
  map = load();

  // Set up our handler on the button
  // (I don't recommend using `onclick` generally, I
  // recommend using a library that deals with the
  // addEventListener/attachEvent issue for you; just
  // using it here for simplicity.)
  document.getElementById('btnAdd').onclick = addMarkers;

  // Our load function
  function load() {
    var latlng, myOptions;

    // Get the map
    latlng = new google.maps.LatLng(-34.6084, -58.3732);
    myOptions = {
      zoom: 3,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    return new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

  // Add markers
  function addMarkers() {

    var cityName, city;

    for (cityName in CITIES)
    {
        city = CITIES[cityName];

        // plant cities on map
        new google.maps.Marker({
         icon: "http://google-maps-icons.googlecode.com/files/smallcity.png",
         map: map,
         position: new google.maps.LatLng(city.latitude, city.longitude),
         title: cityName
        });
    }
  }

  // The end of our anonymous scoping function; we call
  // it immediately.
})();

`map`

的问题

~~在mark函数中，您使用的是变量map。它没有在您引用的任何代码中定义，是否在封闭范围内定义？如果没有，那可能就是问题所在。~~

你在下面评论说它是一个全局变量，说它是var map = null;。我不认为它可以是null，但根据the docs，它应该是Map或StreetViewPanorama个实例。例如，像"the basics" tutorial中的这个例子：

var map = new google.maps.Map(document.getElementById("map_canvas"),
                              myOptions);

`CITIES[city]`

的问题

如果您想要访问值CITIES[city]，而不是

title: 'CITIES[city]'

你想要

title: CITIES[city]

（没有引号）但我认为你更有可能只想要：

title: city

...因为CITIES[city]是一个对象，你可能想要城市名称，而不是对象的默认字符串化（将是[object Object]）。

（没有引号）。所以：

for (var city in CITIES)
{
    // plant cities on map
    new google.maps.Marker({
     icon: "http://google-maps-icons.googlecode.com/files/smallcity.png",
     map: map,
     position: new google.maps.LatLng(CITIES[city].latitude, CITIES[city].longitude),
     title: city
    });
}

偏离主题＃1

我可能会缓存查找，虽然一个不错的JavaScript实现会为你做（有很多坏的可能不会）：

var cityName, city;

for (cityName in CITIES)
{
    city = CITIES[cityName];

    // plant cities on map
    new google.maps.Marker({
     icon: "http://google-maps-icons.googlecode.com/files/smallcity.png",
     map: map,
     position: new google.maps.LatLng(city.latitude, city.longitude),
     title: cityName
    });
}

偏离主题＃2

CITIES不是数组。它是一个非数组对象。但是没关系，你使用的for..in循环无论如何都要循环遍历object properties (not array indexes)，这样才能解决问题。： - ）

偏离主题＃3

;声明结尾处需要CITIES：

var CITIES = {
    ....
}; // <== here

JavaScript的分号插入将为您提供假设}之后的换行符，但依靠分号插入绝不是一个好主意。

Answer 2

//默认纬度 var LATITUDE = 42.3745615030193;

//默认经度 var LONGITUDE = -71.11803936751632;

//对地图的全局引用 var map;

//加载Google Maps API的第3版 google.load（“maps”，“3”，{other_params：“sensor = false”}）;

/ * *无效 * load（） * *加载地图。 * /

功能负载（） { var latlng，myOptions;

// Get the map
latlng = new google.maps.LatLng(LATITUDE, LONGITUDE);
myOptions = {
  zoom: 3,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map(document.getElementById("map"),
    myOptions);

}

/ * *无效 *标记（） * *标记世界各地的留学项目地图 * /

功能标记（） { var cityName，city;

for (cityName in CITIES)
{
city = CITIES[cityName];

// plant cities on map
new google.maps.Marker({
 icon: "http://google-maps-icons.googlecode.com/files/smallcity.png",
 map: map,
 position: new google.maps.LatLng(city.latitude, city.longitude),
 title: cityName
});
}

}

哈佛海外：映射

  <div id="top">
    <a href="index.php"><img alt="Harvard Abroad" src="Images/logo.jpg"></a>
  </div>

  <div id="logo">
    Harvard Abroad: Mapped
  </div>

  <div id="button">
    <input onclick="mark();" type="button" value="Map">
  </div>

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

  <div id="bottom">
  |
  <a href="index.php" style="font-weight: bold">index</a>
  |
  <a href="search.php" style="font-weight: bold">search</a>
  |
  <a href="comment.php" style="font-weight: bold">comment</a>
  |
  <a href="viewcomment.php" style="font-weight: bold">view comments</a>      
  |
  <a href="logout.php" style="font-weight: bold">log out</a>
  |
  </div>

访问JS数组以在2D Google Map上放置标记

2 个答案:

缩放

`map`

`CITIES[city]`

偏离主题＃1

偏离主题＃2

偏离主题＃3