两页样式的Google地图在单页上 [英] Two styled Google maps on single page

查看：120
本文介绍了两页样式的Google地图在单页上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我很感激在单个页面上设置两个Google地图（API 3）的帮助。他们有一些共享的样式。我可以得到一个运行，但不是两个在一起。




  • http://theredfrog.com/new/temp3.html - 一张地图（确定）

  • http://theredfrog.com/new/temp4.html - 两张地图（破碎）



    • 这是脚本... 

     < script type = 文本/ JavaScript的 > 
    函数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>


    解决方案

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


    1. 错别字（ map：mapleeds，不是 map：leedshull，


    2. 排序，在初始化之前不能使用变量


    3. 这些无效： google.maps.StyledMapTypeHull ， google.maps.StyledMapTypeLeeds （可能是搜索和替换出错了。应该是 google.maps.StyledMapType 

      < code>< 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：'风景'， 
       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'}，
       {饱和度：-100}，
       {亮度：-23}，
       {能见度：'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>



    I'd appreciate some help setting up two Google maps (API 3) on a single page. They've got some shared styles. I can get a single one running, but not two together.

    Here's the script...

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

    解决方案

    Your problems are (you need to run through your code with a debugger):

    1. typos (map: mapleeds, not map: leedshull,

    2. ordering, you can't use variables before you initialize them

    3. these are not valid: google.maps.StyledMapTypeHull, google.maps.StyledMapTypeLeeds (maybe a search and replace gone wrong. Should be 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>

    这篇关于两页样式的Google地图在单页上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆