不同页面的不同 google 标记

Question

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

  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> 标签显示带有图标的标记，例如，如果正文的 class 是 <body class="purple">，则紫色标记应该出现在地图上。

我会尝试将代码分成 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 个字符串（颜色）并将其像 class在标签上。

第二

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

这里我们只是将那个随机变量连接到图标字段上的图标值中（从 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

这里我们初始化地图，同时为了测试演示目的，我们打印 class 名称的值。

这是正常工作的 JSFillde，检查控制台并检查控制台以了解其工作原理。

不同页面的不同 google 标记

Different google marker for different pages

google-maps

google-maps-api-3

google-maps-markers