Question

我正在尝试将谷歌地图实施到我的页面中，但根据页面样式需要在不同页面上使用不同的图钉。是否有可能在每次加载新页面时动态生成一个标记（marker-blue.png，marker-red.png等），取决于<body class="bluetheme">？

  var myMarkers = 'images/';
  var marker = new google.maps.Marker({
      position: myLatlng,
      icon: myMarkers + 'marker-blue.png',
      map: map
  });


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

Answer 1

似乎您希望根据<body>标记显示带有图标的标记，因此，例如，如果正文的类为<body class="purple">，则地图上会出现紫色标记。< / p>

我将尝试将代码分为3个部分。

首先

var array = ['blue','red','yellow',"purple","green"], //array of random colors
    random = array[Math.floor(Math.random()* array.length)]; //get some random color
 console.log("the random color to the body tag will be: " + random)
 document.getElementById('test').className = random //apply some class name

这里我们创建一个数组，其值为静态颜色，我们使用Math.floor数学方法获取数组的1个字符串（颜色），并将其放在标记上。

第二

function initialize() { //simple map initialization
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var marker = new google.maps.Marker({ //create the marker
      position: myLatlng,
      map: map,
      title: 'Hello World!',
      icon:"http://maps.google.com/mapfiles/ms/icons/" +random+ "-dot.png", //taking the random variable.
  });
}

这里我们只是将随机变量和concat插入图标字段的图标值（从this SO获取图标链接。）

<强>第三

var test = document.getElementById('test').className; //get the actual classname of the body
console.log("the curren background color of the body is: " + test)
google.maps.event.addDomListener(window, 'load', initialize);//init the map

这里我们初始化地图，为了测试 - 演示目的，我们打印了类名的值。

这是工作JSFillde，检查控制台并检查控制台以查看其工作原理。

不同页面的不同谷歌标记

1 个答案: