Question

我正在尝试在Google地图上放置多个标记（API v3）。我查看了Google文档以及此thread。地图绘制并居中于初始点，但地图上没有显示任何标记。

Firebug没有报告任何错误。

这是JS

<script type="text/javascript">

   var map;

    function initialize() {
            var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(41.056466,-85.3312009),
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };

    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

    }
    google.maps.event.addDomListener(window, 'load', initialize);

    //Add 1st marker
    var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709);
    var marker_0 = new google.maps.Marker({
        position: Latlng_0,
                  title:"0"});

        marker_0.setMap(map);

    //Add 2nd marker
    var Latlng_1 = new google.maps.LatLng(41.065294480291,-85.330151019708);
    var marker_1 = new google.maps.Marker({
        position: Latlng_1,
        title:"1"});
        marker_1.setMap(map);

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

感谢您的期待！

Answer 1

标记未显示的原因是因为部分代码在之前执行，因为加载事件被触发并且初始化方法被调用 - 此时您的地图变量已经创建但仍然是空的。

尝试添加代码以在initialize方法中添加标记

var map; function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(41.056466,-85.3312009), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); // Add 1st marker var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709); var marker_0 = new google.maps.Marker( { position: Latlng_0, title:"0" } ); marker_0.setMap(map); //Add 2nd marker var Latlng_1 = new google.maps.LatLng(41.065294480291,-85.330151019708); var marker_1 = new google.maps.Marker( { position: Latlng_1, title:"1" } ); marker_1.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize);

请在此处查看标记显示{j}的标记http://jsfiddle.net/KvugB/

Answer 2

我使用此代码。我希望它对你有所帮助：

(function() {

window.onload = function() {

    // Creating a new map
    var map = new google.maps.Map(document.getElementById("map"), {
      center: new google.maps.LatLng(41.056466, -85.3312009),
      disableDefaultUI: false,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    });


    // Creating the JSON data
    var json = [
        {
            "title": "Title 1",
            "lat": 41.057814980291,
            "lng": -85.329851919709,
            "description": ""
        },
        {
            "title": "Title 2",
            "lat": 41.057814981000,
            "lng": -85.8048,
            "description": ""
        },
    ]

    var styles = [
  {
   "featureType": "water",
   "elementType": "geometry.fill",
   "stylers": [
      { "visibility": "on" },
      { "color": "#0077bb" },
  { "lightness": 70 }
      ]
      },{
      "featureType": "landscape.natural",
      "elementType": "geometry.fill",
      "stylers": [
      { "visibility": "on" },
      { "saturation": -100 },
      { "color": "#699e6b" },
      { "lightness": 76 }
      ]
      },{
      "featureType": "poi.park",
      "elementType": "geometry.fill",
      "stylers": [
      { "visibility": "off" }
      ]
      },{
      "featureType": "road.local",
      "elementType": "geometry.fill",
      "stylers": [
      { "visibility": "on" },
      { "color": "#ffffff" }
      ]
      }
      ];

       map.setOptions({styles: styles});



    // Creating a global infoWindow object that will be reused by all markers
    var infoWindow = new google.maps.InfoWindow();

    // Looping through the JSON data
    for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i],
            latLng = new google.maps.LatLng(data.lat, data.lng);




        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: data.title
        });

        // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
        (function(marker, data) {

            // Attaching a click event to the current marker
            google.maps.event.addListener(marker, "click", function(e) {
                infoWindow.setContent(data.description);
                infoWindow.open(map, marker);
            });


        })(marker, data);

    }

}

   })();

Answer 3

这是对@JoanManuelHernández答案的回复，但我无法在评论中发布格式化代码。

琼，你的解决方案很棒;这和我自己做的非常相似。创建标记位置数组比为每个标记位置使用单个变量要好。

我想提出一些小改进建议。一个是你有一个名为json的数组。这不是一个非常具有描述性的名称; json可能意味着任何类型的数据。如何称呼它为places或locations之类的东西？

接下来，如果您有创建闭包来处理异步回调的循环，我认为如果将整个循环体移动到它自己的函数中，它会更容易理解它是如何工作的。那你就不需要内联匿名函数了。所以这段代码：

// Looping through the JSON data
for (var i = 0, length = json.length; i < length; i++) {
    var data = json[i],
        latLng = new google.maps.LatLng(data.lat, data.lng);

    // Creating a marker and putting it on the map
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: data.title
    });

    // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
    (function(marker, data) {

        // Attaching a click event to the current marker
        google.maps.event.addListener(marker, "click", function(e) {
            infoWindow.setContent(data.description);
            infoWindow.open(map, marker);
        });


    })(marker, data);
}

会变成：

// Looping through the places list
for( var i = 0, length = places.length;  i < length;  i++ ) {
    addPlace( places[i] );
}

// Add one place marker
function addPlace( place ) {
    var latLng = new google.maps.LatLng( place.lat, place.lng );

    // Creating a marker and putting it on the map
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: place.title
    });

    // Attaching a click event to the current marker
    google.maps.event.addListener( marker, "click", function(e) {
        infoWindow.setContent( place.description );
        infoWindow.open( map, marker );
    });
}

它做同样的事情，这样简单一点。

另一个想法：风格化的地图非常酷 - 我自己也是风格地图的忠实粉丝 - 但是我想知道为了简单起见它是否应该留在这里，因为它与OP的问题？

如果您喜欢，请随意将这些想法纳入您自己的答案中，如果其他人发现此变体有用，请提升Joan的答案，因为这是原始代码的来源。

谷歌地图v3 - 标记不显示

3 个答案: