Question

即时使用hpneo gmaps插件：http://hpneo.github.io/gmaps/

我想使用不同位置的多个地图，现在我有这个代码，但它只显示第一个地图

/* Google map */
var map1;
    $(document).ready(function(){
      prettyPrint();
      map1 = new GMaps({
        div: '#map',
        scrollwheel: false,
        lat: 54.7181780,
        lng: 25.2204530,
        zoom: 16
      });

map1.addMarker({
        lat: 54.7181780,
        lng: 25.2204530,
        title: 'II "Meistrus" ',
        icon: '/images/marker.png'

      });
});

/* Vilnius */
var map2;
    $(document).ready(function(){
      prettyPrint();
      map2 = new GMaps({
        div: '#vilnius',
        scrollwheel: false,
        lat: 54.8900070,
        lng: 23.9255120,
        zoom: 10
      });

map2.addMarker({
        lat: 54.8900070,
        lng: 23.9255120,
        title: 'II "Meistrus" ',
        icon: '/images/marker.png'

      });
});

这是小提琴代码：http://jsfiddle.net/337T7/ - 工作正常，但如果我想只显示＆＃34;维尔纽斯＆＃34;映射并删除<div id="map" class="map"></div>无人地图显示。

我做错了什么？

Answer 1

在尝试调用div之前，应检查div是否存在。最简单的方法是将代码放在

中

if(document.getElementById('map)){
    //your code
}

此外，我认为将两个代码块放在一个单独的文档中是一个好习惯。已经

因此生成的代码将是这样的：

var map1, map2;
$(document).ready(function(){
  prettyPrint();
  if(document.getElementById('map')){
    map1 = new GMaps({
      div: '#map',
      scrollwheel: false,
      lat: 54.7181780,
      lng: 25.2204530,
      zoom: 16
    });
    map1.addMarker({
      lat: 54.7181780,
      lng: 25.2204530,
      title: 'II "Meistrus" ',
      icon: '/images/marker.png'
    });
  }

  if(document.getElementById('vilnius')){
    prettyPrint();
    map2 = new GMaps({
      div: '#vilnius',
      scrollwheel: false,
      lat: 54.8900070,
      lng: 23.9255120,
      zoom: 10
    });
    map2.addMarker({
      lat: 54.8900070,
      lng: 23.9255120,
      title: 'II "Meistrus" ',
      icon: '/images/marker.png'
    });
  }
});

我相信如果div不是通过另一种方式实际上在HTML中而不是通过测试div是否存在而没有与其中一个映射相关的代码会更优雅。但我不知道你的项目结构如何。

Answer 2

由于div不存在，第一个调用是抛出一个错误，即取消剩余的调用。您将要检查div是否存在：http://jsfiddle.net/337T7/1/

/* Google map */
var map1;
$(document).ready(function(){
    if ($('#map').length) {
        prettyPrint();
        map1 = new GMaps({
            div: '#map',
            scrollwheel: false,
            lat: 54.7181780,
            lng: 25.2204530,
            zoom: 16
        });

        map1.addMarker({
            lat: 54.7181780,
            lng: 25.2204530,
            title: 'II "Meistrus" ',
            icon: 'http://silk.webmode.lt/wp-content/themes/silk_theme/images/marker.png'

        });
    }
});

/* Vilnius */
var map2;
$(document).ready(function(){
   if ($('#vilnius').length) {
      prettyPrint();
      map2 = new GMaps({
        div: '#vilnius',
        scrollwheel: false,
        lat: 54.8900070,
        lng: 23.9255120,
        zoom: 10
      });

    map2.addMarker({
        lat: 54.8900070,
        lng: 23.9255120,
        title: 'II "Meistrus" ',
        icon: 'http://silk.webmode.lt/wp-content/themes/silk_theme/images/marker.png'

      });
   }
});

在一个页面中显示多个谷歌地图

2 个答案: