在谷歌地图中按类型显示自定义图像标记图标
Display custom image marker icons by type in Google Maps.
我修改了Google Maps API V3复杂图标示例https://developers.google.com/maps/documentation/javascript/examples/icon-complex从数组中提取数据,并在每个标记位置显示自定义信息窗口内容和标题。我还想根据单个项目显示特定的自定义图像图标带有不同"打开"、"关闭"、"公共"或"完整"图像图标的"位置"数组中的描述。
如何正确创建一个图像变量,该变量在创建新标记时在数组中循环,并以与标题和信息窗口相同的方式从"locations"数组中提取特定数据文本
完整的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个描述,那么一个解决方案的图像图标名称与您的描述相同:
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...
如果你想要你的图标阴影,你可以做一个类似的方法。
相关文章:
- 加载图像时加载图标
- 如何制作Yii框架的linkHtmlOptions's的CGridView显示为图像图标,单击时会触发javas
- Google Places API显示雷达搜索中的位置图标/图像
- 访问标记图标的图像数组元素
- 使用KendoUI网格,您将如何将可选图像或图标添加到行模板中
- 如何添加可拖动的“;添加图像”;jquery中的图标
- 如何将日期选择器放在图像图标上
- 如何在gmaps.js上添加标记图像图标
- Kendo TreeView-只向没有子节点的父节点添加删除图像图标
- 单击我们在 css 中添加的图像图标时的下拉列表
- 无法在网页上显示的 HTML 段落上叠加图像图标
- 将图像/图标添加为数据表中的行值
- dataTables如何添加排序图像/图标
- Javascript加载/旋转图像/图标,同时加载搜索结果
- 使用Ajax预览图像:返回一个损坏的图像图标
- Javascript从数据动态创建图像/图标(标记)
- 在d3中添加图像/图标而不是svg形状
- 用文字代替破碎的图像图标
- 在静态图像上绘制图像图标
- 是LeafletJS异步的,当它加载图像图标时