如何在循环中创建谷歌地图标记,如"Marker1", "Marker2"
How can I create Google Map markers in a loop like "Marker1", "Marker2"
对于这个新手的问题,我很抱歉,但是我没有找到任何解决这个问题的方法。
我想在谷歌地图上创建4个标记(或更多,但这里是4个)。我使用get ajax请求获取信息,并使用JSON进行响应。我可以创建这些标记,但是我对每个标记的信息窗口有一个问题。这里是我试过的代码:
function readDevices(output){
// Get an array for the 4 devices with guid 42421 42422 42423 and 42424
var arrayOfDevices = new Array();
$.each(output.data, function(key, value){
$.each(value, function(deviceKey, deviceValue){
if(deviceKey == 'guid' && deviceValue >= 42421 && deviceValue <= 42424){
arrayOfDevices.push(value); // add the entire object in the tab
}
});
});
for(var i = 0; i < arrayOfDevices.length; i++){
var guid = arrayOfDevices[i]["guid"];
var latitude = arrayOfDevices[i]["latitude"];
var longitude = arrayOfDevices[i]["longitude"];
var name = arrayOfDevices[i]["name"];
var coord = new google.maps.LatLng(latitude, longitude);
var contentString = '<div id="content">'+
'<form method="get" action="manual" id="form-new">'+
'<button type="submit" id="new-button" name="'+guid+'" class="btn new-btn">Manual</button>'+
'</form>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: coord,
title: name
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
}
此代码在正确的位置放置了4个标记。但是当我点击其中一个标记时,"弹出窗口"出现在我创建的最后一个标记附近。我想为每个标记设置信息窗口。
我不能这样做:
var marker+i = new google.maps.Marker();
…但是也许有一些技巧可以让你做一些类似的事情呢?
我希望我说的很清楚^^'
谢谢大家的帮助!: -)
KhorneHoly答案后的正确代码!
function addMarker(markerData, map){
var contentString = '<div id="content">'+
'<form method="get" action="manual" id="form-new">'+
'<button type="submit" id="new-button" name="'+markerData["guid"]+'" class="btn new-btn">Manual</button>'+
'</form>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var LatLng = new google.maps.LatLng(markerData["latitude"], markerData["longitude"]);
var marker = new google.maps.Marker({
position: LatLng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
function readDevices(output){
var arrayOfDevices = new Array();
var markers = new Array();
$.each(output.data, function(key, value){
$.each(value, function(deviceKey, deviceValue){
if(deviceKey == 'guid' && deviceValue >= 42421 && deviceValue <= 42424){
arrayOfDevices.push(value);
}
});
});
for(var i = 0; i < arrayOfDevices.length; i++){
var guid = arrayOfDevices[i]["guid"];
var latitude = arrayOfDevices[i]["latitude"];
var longitude = arrayOfDevices[i]["longitude"];
var name = arrayOfDevices[i]["name"];
var coord = new google.maps.LatLng(latitude, longitude);
markers.push(addMarker(arrayOfDevices[i], map));
}
}
您想要做的是不可能的,因为您不能生成这样的变量。但你能做的是生成一个数组用for循环中的标记符填充,像这样:
var markers = new Array();
for (var i = 0; i < ArrayWithYourResultYouWantGenerateTheMarkersFrom.length; ++i) {
markers.push(addMarker(ArrayWithYourResultYouWantGenerateTheMarkersFrom.[i], map));
}
public function addMarker(markerData, map){
var LatLng = new google.maps.LatLng(markerData.lat, markerData.lon);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
}
相关文章:
- 铬:“;未捕获的语法错误:意外的标记:"
- 可以设置“;文件名"发生错误时显示的内联脚本标记的
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 检测电话窃听,即:<a href="电话:xxx">在UIWebview上
- 使用“+="操作人员
- //而不是在src=“”上使用http://"属性
- "未捕获的语法错误:意外的标记}"
- 可以<脚本类型=“;text/javascript”>window.location=“/"</
- "实例范围”;TypeScript类的getter/setter
- Javascript复选框函数:;缺少:在属性id之后"
- "“;变量未引用正确的对象
- "日期“;AJAX请求返回的类型值未定义
- 得到"TypeError:无法读取属性'filename'未定义的“;调用“npm start
- Soundcloud api"未捕获的类型错误:无法读取属性'uri'“未定义”;
- "工具提示"jQuery插件坏了
- "锻造;React中的表达式
- 图像可以从源<img src=""/>.TEXT可以在没有javascript的情况下从外部
- 如何提取“;href"最近列表项中的属性值
- CKEditor如何允许href="javascript:void(0)"在小部件中
- 插入“;img src"在javascript中