单页上有两种风格的谷歌地图

时间:2013-04-08 14:25:40

标签: javascript google-maps google-maps-api-3

我很感激帮助在一个页面上设置两个Google地图(API 3)。他们有一些共享风格。我可以一个人跑,但不能一个人跑。

这是脚本......

<script type="text/javascript">
      function initialize() {
var styles = [
  ....

];

var hulloptions = {
    mapTypeControlOptions: {
        mapTypeIds: [ 'Styled']
    },

    center: new google.maps.LatLng(53.7413176, -0.3353987),
    zoom: 15,
    mapTypeId: 'StyledHull'
};

var leedsoptions = {
    mapTypeControlOptions: {
        mapTypeIds: [ 'Styled']
    },

    center: new google.maps.LatLng(53.796177,-1.541862),
    zoom: 15,
    mapTypeId: 'StyledLeeds'
};

maphull = new google.maps.Map(document.getElementById("map-hull"),hulloptions);
mapleeds = new google.maps.Map(document.getElementById("map-leeds"),leedsoptions);

var image = './skin/logo.png';
var HullLatLng = new google.maps.LatLng(53.7413176, -0.3353987);
var LeedsLatLng = new google.maps.LatLng(53.796177,-1.541862);

var rfdMarkerHull = new google.maps.Marker({
      position: HullLatLng,
      map: maphull,
      icon: image
  });
  var rfdMarkerLeeds = new google.maps.Marker({
      position: LeedsLatLng,
      map: leedshull,
      icon: image
  });

var styledMapTypeHull = new google.maps.StyledMapTypeHull(styles, { name: 'RFD Hull' });
var styledMapTypeLeeds = new google.maps.StyledMapTypeLeeds(styles, { name: 'RFD Leeds' });
maphull.mapTypes.set('StyledHull', styledMapTypeHull);
mapleeds.mapTypes.set('StyledLeeds', styledMapTypeLeeds);
}

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

</script>

2 个答案:

答案 0 :(得分:0)

这两行看起来不正确:

var styledMapTypeHull = new google.maps.StyledMapTypeHull(styles, { name: 'RFD Hull' });
var styledMapTypeLeeds = new google.maps.StyledMapTypeLeeds(styles, { name: 'RFD Leeds' });

您是否在JavaScript控制台上遇到错误?

我认为你的意思是:

var styledMapTypeHull = new google.maps.StyledMapType( styles, {
    name: 'RFD Hull'
});
var styledMapTypeLeeds = new google.maps.StyledMapType( styles, {
    name: 'RFD Leeds'
});

(对于较短的线条也略微重新格式化)

这里有一些more information and a working example

现在,我在Chrome中打开开发者工具后尝试了第二张地图,我发现在它到达目前为止还有其他错误。

首先警告:

Warning: you have included the Google Maps API multiple times
on this page. This may cause unexpected errors.

然后在lazyload

中未定义plugins.js
$(".lazy").lazyload({
    effect: "fadeIn",
    effectspeed: 600,
    failure_limit: 10
});

然后在一些Maps API压缩代码中出现了一个神秘的错误,但如果你看一下调用堆栈,你会在堆栈中看到你的initialize函数,如果你点击它就会转到这一行:

mapleeds = new google.maps.Map(document.getElementById("map-leeds"),leedsoptions);

将其粘贴到JavaScript控制台中,您将看到错误:

document.getElementById("map-leeds")

之后出现更多错误,甚至在查看代码时遇到的问题。

所以你要做一些调试。您熟悉Chrome或其他浏览器中的开发者工具吗?如果没有,现在是时候了!这是great introduction to the Chrome DevTools

答案 1 :(得分:0)

您的问题是(您需要使用调试器运行代码):

  1. 拼写错误(map: mapleeds,不是map: leedshull,

  2. 订购,您无法在初始化之前使用变量

  3. 这些无效:google.maps.StyledMapTypeHullgoogle.maps.StyledMapTypeLeeds(可能是搜索和替换出错了。应该是google.maps.StyledMapType

    <script type="text/javascript">
    var maphull = null;
    var mapleeds = null;
    function initialize() {
    var styles = [
    {
       stylers: [
         { saturation: -100 }
       ]   
     },{
       featureType: 'water',
       elementType: 'all',
    stylers: [
           { lightness: -74 },
           { visibility: 'on' }
          ]
     },{
       featureType: 'landscape',
       elementType: 'geometry',
       stylers: [
        { lightness: -26 },
        { visibility: 'simplified' }
       ]
    },{
    featureType: 'road',
    elementType: 'geometry',
    stylers: [
        { hue: '#efefef' },
        { lightness: 83 },
        { visibility: 'simplified' }
       ]
    },{
          featureType: 'poi',
          elementType: 'all',
            stylers: [
          { hue: '#999999' },
              { saturation: -100 },
              { lightness: -23 },
              { visibility: 'on' }
           ]
    },{
        featureType: 'road',
        elementType: 'labels',
            stylers: [
             { saturation: -100 },
             { visibility: 'on' }
       ]
      }
    ];
    
    var hulloptions = {
       mapTypeControlOptions: {
           mapTypeIds: [ 'Styled']
       },
    
       center: new google.maps.LatLng(53.7413176, -0.3353987),
       zoom: 15,
       mapTypeId: 'StyledHull'
     };
    
     var leedsoptions = {
        mapTypeControlOptions: {
            mapTypeIds: [ 'Styled']
        },
    
        center: new google.maps.LatLng(53.796177,-1.541862),
        zoom: 15,
        mapTypeId: 'StyledLeeds'
      };
    
    var image = './skin/logo.png';
    var HullLatLng = new google.maps.LatLng(53.7413176, -0.3353987);
    var LeedsLatLng = new google.maps.LatLng(53.796177,-1.541862);
    
    var styledMapTypeHull = new google.maps.StyledMapType(styles, { name: 'RFD Hull' });
    var styledMapTypeLeeds = new google.maps.StyledMapType(styles, { name: 'RFD Leeds' });
    
    maphull = new google.maps.Map(document.getElementById("map-hull"),hulloptions);
    mapleeds = new google.maps.Map(document.getElementById("map-leeds"),leedsoptions);
    
    maphull.mapTypes.set('StyledHull', styledMapTypeHull);
    mapleeds.mapTypes.set('StyledLeeds', styledMapTypeLeeds);
      var rfdMarkerHull = new google.maps.Marker({
         position: HullLatLng,
         map: maphull,
         icon: image
      });
      var rfdMarkerLeeds = new google.maps.Marker({
          position: LeedsLatLng,
          map: mapleeds,
          icon: image
      });
    }
    
     google.maps.event.addDomListener(window, 'load', initialize);
    
     </script>