2

我修改了 Google Maps API V3 复杂图标示例https://developers.google.com/maps/documentation/javascript/examples/icon-complex 从数组中提取数据并在每个标记位置显示自定义信息窗口内容和标题. 我还想根据“位置”数组中的各个项目描述显示特定的自定义图像图标，其中包含不同的“打开”、“关闭”、“公共”或“完整”图像图标。

如何在创建新标记时正确创建循环遍历数组的图像变量，并以与标题和信息窗口文本相同的方式从“位置”数组中提取特定数据？

完整的 HTML 和 Javascript。

<script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather">  
</script>

<script type="text/javascript">



var locations =
[

  ['Coogee Beach', -33.923036, 151.259052, 5, 20, "Closed",],
  ['Cronulla Beach', -34.028249, 151.157507, 3, 50 ,"Full",],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, 10, "Public",],
  ['Maroubra Beach', -33.950198, 151.259302, 1, 30, "Open",]
  ];

  //json array

 function initialize() {

var myOptions = {
  center: new google.maps.LatLng(33.890542, 151.274856),
  zoom: 8,


panControl:false,
zoomControl:false,
mapTypeControl:true,
scaleControl:false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
mapTypeControlOptions: {
  style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
  position:google.maps.ControlPosition.BOTTOM_LEFT
},
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("default"),
    myOptions);

setMarkers(map, locations)

}

function setMarkers(map,locations){

// 向地图添加标记

// 标记大小表示为 X,Y 的大小 // 图像的原点 (0,0) 位于 // 图像的左上角。

// 标记的原点、锚点位置和坐标 // 在 X 方向向右增加，在 // Y 方向向下增加。

 var weatherLayer = new google.maps.weather.WeatherLayer({
  temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT

  });
 weatherLayer.setMap(map);

 var cloudLayer = new google.maps.weather.CloudLayer();
 cloudLayer.setMap(map);





var image = new google.maps.MarkerImage('images/beachflag.png',
  // This marker is 32 pixels wide by 37 pixels tall.
  new google.maps.Size(32, 37),
  // The origin for this image is 0,0.
  new google.maps.Point(0,0),
  // The anchor for this image is the base of the flagpole at 0,37.
  new google.maps.Point(0, 37));           

var shadow = new google.maps.MarkerImage('images/shadow-beachflag.png',
  // The shadow image is larger in the horizontal dimension
  // while the position and offset are the same as for the main image.
  new google.maps.Size(51,37),
  new google.maps.Point(0,0),
  new google.maps.Point(0, 37));
  // Shapes define the clickable region of the icon.
  // The type defines an HTML <area> element 'poly' which
  // traces out a polygon as a series of X,Y points. The final
  // coordinate closes the poly by connecting to the first
  //var icon = typeObject[markers1[i][3]]['icon'];
  // coordinate.
 var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'//
  };




  var marker, i

for (i = 0; i < locations.length; i++)
 { 

 var project = locations[i][0]
 var lat = locations[i][1]
 var long = locations[i][2]
 var add =  locations[i][3]
 var complete = locations[i][4]
 var percentage = locations[i][4]


latlngset = new google.maps.LatLng(lat, long);

var marker = new google.maps.Marker({ 
      map: map,
title: project , position: latlngset, icon: image, shadow: shadow,

    });
    map.setCenter(marker.getPosition())


    var content =
    '<div id="content">'+
    '<h1 id="firstHeading" </h1>'+
    project + 

    '</h1>' +
    " # of Life Guards: " +
    add  +  
    '</h3>' +
    " | Percentage: "
    + complete;
    //infobox content

  var infowindow = new google.maps.InfoWindow()
            maxwidth:800,
google.maps.event.addListener(marker,'click',

(function(marker,content,infowindow){
    return function() {
       infowindow.setContent(content);
       infowindow.open(map,marker);

    };

  })(marker,content,infowindow));

  }
  }
4

1 回答 1

2

如果您只有 4 个描述，一种解决方案是使用与您的描述相同的图像图标：

Open.png、Closed.png、Public.png、Full.png（都在文件夹“images/”中）

然后，您可以简单地执行以下操作：

var description = locations[i][5];
var iconname = 'images/' + description + '.png';

var marker = new google.maps.Marker({ 
    map: map,
    title: project,
    position: latlngset,
    icon: iconname,
    shadow: shadow
    });

或者，如果您想继续使用 google.maps.MarkerImage：

var description = locations[i][5];
var iconname = 'images/' + description + '.png';

var image = new google.maps.MarkerImage(iconname,
  // This marker is 32 pixels wide by 37 pixels tall.
  new google.maps.Size(32, 37),
  // The origin for this image is 0,0.
  new google.maps.Point(0,0),
  // The anchor for this image is the base of the flagpole at 0,37.
  new google.maps.Point(0, 37));    

etc...

如果您想要图标的阴影，您可以执行类似的方法。

于 2013-08-30T07:13:12.743 回答