如何在谷歌地图上显示项目，类似于谷歌显示其结果的方式 [英] How to show items on google map similar to the way google shows its results
本文介绍了如何在谷歌地图上显示项目，类似于谷歌显示其结果的方式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要显示带有多个标记的地图，我发现这个问题，它有我正在寻找的，但问题是我需要显示它旁边的每个项目的标记。
< c：forEach var =productitems =products>
$ {product.name}
< / c：forEach>
我也检查了这个问题，但没有多大帮助。 $ b
Google地图代码
var pinColor =FE7569;
var marker，i;
var address = [];
地址[0] =纽约;
地址[1] =拉斯维加斯;
地址[2] =旧金山;
地址[3] =chicago;
//设置默认地图中心位置
var latlng = new google.maps.LatLng（latcenter，longcenter）;
//为每个标记创建pinShadow
var pinShadow = new google.maps.MarkerImage（http://chart.apis.google.com / chart？chst = d_map_pin_shadow，
new google.maps.Size（40，37），
new google.maps.Point（0，0），
new google.maps.Point（12，35））;
//创建动态标记的函数
函数pinImage（i）{
return image = new google.maps.MarkerImage（http://www.googlemapsmarkers.com / v1 /+ i +/+ pinColor +/，新的google.maps.Size（21,34），新的google.maps.Point（0,0），新的google.maps.Point（10,34） ）;
//函数在页面加载后运行
函数initialize（）{
var geocoder = new google.maps.Geocoder（）;
//设置谷歌地图的默认设置值
var settings = {
zoom：3，
center：latlng，
mapTypeControl：true，$ b $ mapTypeControlOptions： {style：google.maps.MapTypeControlStyle.DROPDOWN_MENU}，
navigationControl：true，
navigationControlOptions：{style：google.maps.NavigationControlStyle.SMALL}，
mapTypeId：google.maps.MapTypeId。 ROADMAP};
//启动Google地图并将其分配给网站上的div
var map = new google.maps.Map（document.getElementById（map_canvas），settings）;
//循环虽然数组
中的地址总数为（var i = 0; i< address.length; i ++）{
（function（i）{
//使用geocoder为用户输入地址获取latlong
geocoder.geocode（{'address'：address [i]}，function（results，status）{
if（status == google .maps.GeocoderStatus.OK）{
//重新定义地图中心位置
if（i == 1）{map.setCenter（results [0] .geometry.location）;}
//根据地址数组在地图上创建动态标记
var marker = new google.maps.Marker（{
map：map，
position：results [0] .geometry .location，
title：address [i]，
zIndex：i，
//问题代码---使用下面的函数创建所有标记为1而不是 ivalue .. ??
icon：pinImage（i），
shadow：pinShadow
} ）;
}
}）;
}）（i）;
google.maps.event.addDomListener（window，'load'，initialize）
期望的输出类似于下面的图像，每个结果都有一个命名标记，并且它的位置通过它在地图上相关联的标记来显示。我需要的标记是按字母顺序排列的，也不是基于坐标而不是编号。
google.com。 （我不确定为什么googlemapsmarkers.com停止工作）。
您可以从标记中获取网址，并将其显示为图片。这里有一个代码片段来说明：
<！DOCTYPE html>< head lang =en> < meta charset =UTF-8> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js>< / script> < script src =https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places>< / script> <风格> ＃map-canvas，＃marker-container {width：50％; height：600px; margin：0px; padding：0px;向左飘浮; } .marker-description {padding-left：40px; } .place {padding-left：10px; } .marker {display：inline-block; width：21px; height：35px; }< / style>< / head>< body> < div id =map-canvas>< / div> < div id =marker-container>< / div> <脚本> var map; var markers = []; var pinColor =FE7569; //函数创建动态标记函数pinImage（imagenum）{//应该检查32个以上的针脚... var ch ='A'var makerLetter = String.fromCharCode（ch.charCodeAt（0）+ imagenum）; return image = new google.maps.MarkerImage（http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=+ makerLetter +|+ pinColor）; } function initialize（）{var newYork = new google.maps.LatLng（40.7773514，-73.9554338）; var mapOptions = {zoom：13，center：newYork，disableDefaultUI：true，mapTypeControlOptions：google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; var request = {location：newYork，radius：5000，types：['store']}; var service = new google.maps.places.PlacesService（map）; service.nearbySearch（request，callback）; }函数回调（结果，状态）{if（status == google.maps.places.PlacesServiceStatus.OK）{for（var i = 0，marker; marker = markers [i]; i ++）{marker.setMap（null） ; } markers = []; $（ ＃标记容器）空（）。 for（i = 0; i< results.length; i ++）{var place = results [i]; var placeLoc = place.geometry.location; //为每个地方创建一个标记。 var marker = new google.maps.Marker（{map：map，title：place.name，position：place.geometry.location，icon：pinImage（i）}）; markers.push（标记）; var description = $（< div class ='marker-description'>< image class ='marker'src ='+ marker.icon.url +'>< / image>< span class ='place'>+ place.name +< / span>）; $（ ＃标记容器）附加（描述）; }}} google.maps.event.addDomListener（window，'load'，initialize）; < / script>< / body>< / html>
I need to show a map with multiple markers, Ive found this question which has what I am looking for but the problem is I need to show the marker of each item next to it.
<c:forEach var="product" items="products">
${product.name}
</c:forEach>
I also checked the answer of this question but did not help much.
Google Map Code
var pinColor = "FE7569";
var marker, i;
var address=[];
address[0] = "New york";
address[1] = "las vegas";
address[2] = "san francisco";
address[3] = "chicago";
// Set default map center location
var latlng = new google.maps.LatLng(latcenter,longcenter);
// Create pinShadow for each marker
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com /chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
// Function to create the dynamic marker
function pinImage(i){
return image = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/"+i+"/"+pinColor+"/", new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34));
}
// Function to run once page has loaded
function initialize(){
var geocoder=new google.maps.Geocoder();
// Set Default settigns for google map
var settings = {
zoom: 3,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP};
// Start Google Maps and assign it to div on site
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
// loop though total numner of address in array
for (var i = 0; i < address.length; i++) {
(function(i) {
// Use geocoder to grab latlong for user inputed address
geocoder.geocode( { 'address': address[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Redefine map center location
if (i == 1){ map.setCenter(results[0].geometry.location); }
// Create dynamic markers on map as per the address array
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title:address[i],
zIndex: i,
// PROBLEM CODE --- Using the function below it creates all Markers with a "1" instead of the "i" value..??
icon: pinImage(i),
shadow: pinShadow
});
}
});
})(i);
}
}
google.maps.event.addDomListener(window, 'load', initialize)
Desirable output is similar to following image, each result has a named marker and its location is shown by its associated marker on the map. I need markers to be alphabetical not numbered also based on coordinate not address.
解决方案
EDIT: Changed the snippet to get the marker image from chart.apis.google.com. (I'm not sure why googlemapsmarkers.com stopped working).
You can get the url from the marker, and display it as an image. Here is a code snippet to illustrate:
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<style>
#map-canvas,
#marker-container {
width: 50%;
height: 600px;
margin: 0px;
padding: 0px;
float: left;
}
.marker-description {
padding-left: 40px;
}
.place {
padding-left: 10px;
}
.marker {
display: inline-block;
width: 21px;
height: 35px;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<div id="marker-container"></div>
<script>
var map;
var markers = [];
var pinColor = "FE7569";
// Function to create the dynamic marker
function pinImage(imagenum) {
// should check for more than 32 pins...
var ch = 'A'
var makerLetter = String.fromCharCode(ch.charCodeAt(0) + imagenum);
return image = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + makerLetter + "|" + pinColor);
}
function initialize() {
var newYork = new google.maps.LatLng(40.7773514, -73.9554338);
var mapOptions = {
zoom: 13,
center: newYork,
disableDefaultUI: true,
mapTypeControlOptions: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var request = {
location: newYork,
radius: 5000,
types: ['store']
};
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
$("#marker-container").empty();
for (i = 0; i < results.length; i++) {
var place = results[i];
var placeLoc = place.geometry.location;
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
title: place.name,
position: place.geometry.location,
icon: pinImage(i)
});
markers.push(marker);
var description = $("<div class='marker-description'><image class='marker' src='" + marker.icon.url + "'></image><span class='place'>" + place.name + "</span>");
$("#marker-container").append(description);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
这篇关于如何在谷歌地图上显示项目，类似于谷歌显示其结果的方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
