javascript - 单个页面上的两个样式的 Google 地图

Question

我很感激在一个页面上设置两个谷歌地图（API 3）的帮助。他们有一些共同的风格。我可以运行一个，但不能同时运行两个。

http://theredfrog.com/new/temp3.html - 一张地图（好的）
http://theredfrog.com/new/temp4.html - 两张地图（破损）

这是脚本...

<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>

score 0 · Accepted Answer

这两行看起来不正确：

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'
});

（也为较短的行重新格式化）

这是更多信息和一个工作示例。

现在，我在 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 或其他浏览器中的开发者工具吗？如果没有，现在是时候了！这是对 Chrome DevTools 的精彩介绍。

score 0 · Accepted Answer

您的问题是（您需要使用调试器运行代码）：

错别字（map: mapleeds,不是map: leedshull,
排序，在初始化变量之前不能使用变量

这些是无效的： google.maps.StyledMapTypeHull，google.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>

javascript - 单个页面上的两个样式的 Google 地图

2 回答 2

Related

Reference