Google Map API - 错误位置的多个图标 [英] Google Map API - multiple icons in wrong spot
问题描述
我有一个很奇怪的问题，似乎是最近才出现的.我有一段时间没有对项目进行任何重大的代码更改，也有很长一段时间没有对相关功能进行任何更改.
问题是，当我使用 API 向 Google 地图添加多个图标时，这些图标会出现在彼此的顶部.
奇怪的是标签的位置都正确，但那些使用与图标相同的坐标.
这里是传递给函数的字符串
1344, 52.65665917, -2.49004717, '../Images/Icons/Direction/container_blueN.ico', 'Galahad', '2014 Mar 05 星期三, 14:00', 'Wellington Roadbank, Horsehay', '保留', '0 公里/小时', 0函数是
function AddClusterLocation(FID, latitude, longitude, Icon, ID, DateStamp, Location, Event, Speed, IgnitionStatus) {如果(对象映射){var cssName = 'MarkerIgnitionOff';开关(点火状态){情况1':cssName = 'MarkerIgnitionOn';休息;默认:cssName = 'MarkerIgnitionOff';}varadjustedIcon = new google.maps.MarkerImage(图标，新的 google.maps.Size(32, 32),新的 google.maps.Point(0, 0),新的 google.maps.Point(16, 16));var objMarker = new MarkerWithLabel({位置:新的 google.maps.LatLng(纬度，经度)，可拖动:假，raiseOnDrag: 假，图标:已调整的图标，地图:objMap，labelContent: ' '+ ID + ' ',labelAnchor: 新的 google.maps.Point(-8, -8),labelClass: cssName,//标签的 CSS 类标签样式:{ 不透明度:1.0}});//将 Maker 添加到数组objMakersArray.push(objMarker);//将事件侦听器包裹在匿名函数中//然后我们立即调用并将变量传递给(功能(ID，日期戳，位置，事件，速度，图标){google.maps.event.addListener(objMarker, 'click', function () {如果(！objInfoWindows){objInfoWindows = 新的 google.maps.InfoWindow();}//创建段落var para1 = document.createElement('p');var adiv = document.createElement('div');adiv.style.cssText = '宽度:300px;font-family: "Lucida Grande", Helvetica, Arial, sans-serif;字体大小:10pt；颜色:#000000;';//var htmlstring = '<div style="width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 6pt; color: #FF0000;">'var htmlstring = ''//style="width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 6pt; color: #FF0000;">'htmlstring = htmlstring + '<tr><td style="width: 100px;"><strong>ID</strong></td><td style="width: 200px;">'+ ID + '</td></tr>';htmlstring = htmlstring + '<tr><td><strong>日期/时间</strong></td><td>'+ 日期戳 + '</td></tr>';htmlstring = htmlstring + '<tr><td><strong>位置</strong></td><td>'+ 位置 + '</td></tr>';htmlstring = htmlstring + '<tr><td><strong>事件</strong></td><td>'+ 事件 + '</td></tr>';htmlstring = htmlstring + '<tr><td><strong>速度</strong></td><td>'+ 速度 + '</td></tr></table>'//htmlstring = htmlstring + '';adiv.innerHTML = htmlstring;//para1.innerHTML = htmlstring;para1.appendChild(adiv);//放大 DIVvar aDiv = document.createElement('div');aDiv.style.width = "100px";aDiv.style.float = 'left';//放大var alink = document.createElement('a');alink.innerHTML = '放大';alink.href = '#';alink.onclick = 函数 () {objMap.setCenter(objMarker.getPosition());zoomLevel = objMap.getZoom();如果(缩放级别！= 21){objMap.setZoom(zoomLevel + 1);}返回假；};aDiv.appendChild(alink);//缩小 DIVvar bDiv = document.createElement('div');bDiv.style.width = '100px';bDiv.style.float = 'left';//放大var 闪烁 = document.createElement('a');闪烁.innerHTML = '缩小';眨眼.href = '#';眨眼.onclick = 函数(){objMap.setCenter(objMarker.getPosition());zoomLevel = objMap.getZoom();如果(缩放级别！= 0){objMap.setZoom(zoomLevel - 1);}返回假；};bDiv.appendChild(blink);//添加最喜欢的 Divvar cDiv = document.createElement('div');cDiv.style.float = 'right';cDiv.style.width = '150px';//添加收藏var clink = document.createElement('a');clink.innerHTML = '添加到收藏夹';clink.href = '#';clink.onclick = 函数 () {位置 = objMarker.getPosition();窗格 = window.parent.ASPxSplitterDefault.GetPaneByName('PaneDisplay');如果(窗格){Pane.SetContentUrl('../Pages/FavouritePage.aspx?latitude=' + position.lat() + '&longitude=' + position.lng(), true);}返回假；};cDiv.appendChild(clink);var para2 = document.createElement('p');para2.appendChild(aDiv);para2.appendChild(bDiv);para2.appendChild(cDiv);//创建 Master Div 来保存所有东西var masterDiv = document.createElement('div');//获取具有 Atlas 的 DIV 的名称var objDiv = objMap.getDiv();var divName = objDiv.id;//绑定到映射 Divdocument.getElementById(divName).appendChild(masterDiv);//信息分区var infoDiv = document.createElement('div');infoDiv.style.float = 'left';infoDiv.style.width = '350px';infoDiv.appendChild(para1);infoDiv.appendChild(para2);masterDiv.appendChild(infoDiv);//创建将包含细节图的 divvar detailDiv = document.createElement('div');infoDiv.style.float = 'right';detailDiv.style.width = '200px';detailDiv.style.height = '200px';masterDiv.appendChild(detailDiv)//设置小地图//为概览图创建 MapOptionsvar 概览选项 = {缩放:14，图标:已调整的图标，中心:objMarker.getPosition(),mapTypeId: google.maps.MapTypeId.HYBRID,disableDefaultUI: 真};var objdetailMap = new google.maps.Map(detailDiv,overviewOpts);//创建一个将在细节图中显示的标记var objdetailMarker = new google.maps.Marker({位置:objMarker.getPosition(),地图:objdetailMap，图标:已调整的图标，可点击:假});//设置信息窗口的内容objInfoWindows.setContent(masterDiv);//将信息窗口绑定到标记objInfoWindows.open(objMap, objMarker);});})(ID，日期戳，位置，事件，速度，图标)；objMarker = 空；}
}
调用它的函数是
function OnCurrentPosition(arg) {如果(参数 == 空){parent.location = '../Security/Login.aspx';}如果(参数){var 纬度，经度var arrayList = arg.split(";");警报(参数)；for (i = 0; i
我真的无法解释这一点，因为标签是正确的，我检查了纬度和经度，并且每次调用函数时都不同.另外这是有效的，只有客户昨天才发现它不是.
这是我使用的 API
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
感谢您阅读问题，希望能帮到您！吉姆
解决方案 I have a very strange issue that seems to have appeared only recently. I haven't done any major code changes to the project in a while and none to the function in question in a long while.
So the problem, when I add more than one icon to Google Map using API, the icons are appearig on top of each other.
The strange thing is the labels are all correctly located but those use the same coordinates as the icons.
Here is the string that is passed to the function
1344, 52.65665917, -2.49004717, '../Images/Icons/Direction/container_blueN.ico', 'Galahad', '2014 Mar 05 Wednesday, 14:00', 'Wellington Road, Horsehay, Hollybank', 'RESERVED', '0 KPH', 0
The function is
function AddClusterLocation(FID, latitude, longitude, Icon, ID, DateStamp, Location, Event, Speed, IgnitionStatus) {
if (objMap) {
var cssName = 'MarkerIgnitionOff';
switch (IgnitionStatus) {
case '1':
cssName = 'MarkerIgnitionOn';
break;
default:
cssName = 'MarkerIgnitionOff';
}
var adjustedIcon = new google.maps.MarkerImage(
Icon,
new google.maps.Size(32, 32),
new google.maps.Point(0, 0),
new google.maps.Point(16, 16)
);
var objMarker = new MarkerWithLabel({
position: new google.maps.LatLng(latitude, longitude),
draggable: false,
raiseOnDrag: false,
icon: adjustedIcon,
map: objMap,
labelContent: ' ' + ID + ' ',
labelAnchor: new google.maps.Point(-8, -8),
labelClass: cssName, // the CSS class for the label
labelStyle: { opacity: 1.0 }
});
// Add Maker to array
objMakersArray.push(objMarker);
// Wrap the event listener inside an anonymous function
// then we immediately invoke and passes the variables to
(function (ID, DateStamp, Location, Event, Speed, Icon) {
google.maps.event.addListener(objMarker, 'click', function () {
if (!objInfoWindows) {
objInfoWindows = new google.maps.InfoWindow();
}
// Create Paragraph
var para1 = document.createElement('p');
var adiv = document.createElement('div');
adiv.style.cssText = 'width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 10pt; color: #000000;';
// var htmlstring = '<div style="width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 6pt; color: #FF0000;">'
var htmlstring = '<table>' // style="width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 6pt; color: #FF0000;">'
htmlstring = htmlstring + '<tr><td style="width: 100px;"><strong>ID</strong></td><td style="width: 200px;">' + ID + '</td></tr>';
htmlstring = htmlstring + '<tr><td><strong>Date/Time</strong></td><td>' + DateStamp + '</td></tr>';
htmlstring = htmlstring + '<tr><td><strong>Location</strong></td><td>' + Location + '</td></tr>';
htmlstring = htmlstring + '<tr><td><strong>Event</strong></td><td>' + Event + '</td></tr>';
htmlstring = htmlstring + '<tr><td><strong>Speed</strong></td><td>' + Speed + '</td></tr></table>'
// htmlstring = htmlstring + '</div>';
adiv.innerHTML = htmlstring;
// para1.innerHTML = htmlstring;
para1.appendChild(adiv);
// Zoom In DIV
var aDiv = document.createElement('div');
aDiv.style.width = "100px";
aDiv.style.float = 'left';
// Zoom In
var alink = document.createElement('a');
alink.innerHTML = 'Zoom In';
alink.href = '#';
alink.onclick = function () {
objMap.setCenter(objMarker.getPosition());
zoomLevel = objMap.getZoom();
if (zoomLevel != 21) {
objMap.setZoom(zoomLevel + 1);
}
return false;
};
aDiv.appendChild(alink);
// Zoom OUT DIV
var bDiv = document.createElement('div');
bDiv.style.width = '100px';
bDiv.style.float = 'left';
// Zoom In
var blink = document.createElement('a');
blink.innerHTML = 'Zoom Out';
blink.href = '#';
blink.onclick = function () {
objMap.setCenter(objMarker.getPosition());
zoomLevel = objMap.getZoom();
if (zoomLevel != 0) {
objMap.setZoom(zoomLevel - 1);
}
return false;
};
bDiv.appendChild(blink);
// Add Favourite Div
var cDiv = document.createElement('div');
cDiv.style.float = 'right';
cDiv.style.width = '150px';
// Add Favourite
var clink = document.createElement('a');
clink.innerHTML = 'Add to Favourite';
clink.href = '#';
clink.onclick = function () {
position = objMarker.getPosition();
Pane = window.parent.ASPxSplitterDefault.GetPaneByName('PaneDisplay');
if (Pane) {
Pane.SetContentUrl('../Pages/FavouritePage.aspx?latitude=' + position.lat() + '&longitude=' + position.lng(), true);
}
return false;
};
cDiv.appendChild(clink);
var para2 = document.createElement('p');
para2.appendChild(aDiv);
para2.appendChild(bDiv);
para2.appendChild(cDiv);
// Create Master Div to hold everything
var masterDiv = document.createElement('div');
// Get name of DIV that has Atlas
var objDiv = objMap.getDiv();
var divName = objDiv.id;
// Bind to mapping Div
document.getElementById(divName).appendChild(masterDiv);
// Info Div
var infoDiv = document.createElement('div');
infoDiv.style.float = 'left';
infoDiv.style.width = '350px';
infoDiv.appendChild(para1);
infoDiv.appendChild(para2);
masterDiv.appendChild(infoDiv);
// Creating the div that will contain the detail map
var detailDiv = document.createElement('div');
infoDiv.style.float = 'right';
detailDiv.style.width = '200px';
detailDiv.style.height = '200px';
masterDiv.appendChild(detailDiv)
// Setting up small map
// Creating MapOptions for the overview map
var overviewOpts = {
zoom: 14,
icon: adjustedIcon,
center: objMarker.getPosition(),
mapTypeId: google.maps.MapTypeId.HYBRID,
disableDefaultUI: true
};
var objdetailMap = new google.maps.Map(detailDiv, overviewOpts);
// Create a marker that will show in the detail map
var objdetailMarker = new google.maps.Marker({
position: objMarker.getPosition(),
map: objdetailMap,
icon: adjustedIcon,
clickable: false
});
// Setting the content of the InfoWindow
objInfoWindows.setContent(masterDiv);
// Tying the InfoWindow to the marker
objInfoWindows.open(objMap, objMarker);
});
})(ID, DateStamp, Location, Event, Speed, Icon);
objMarker = null;
}
}
The function that would call this would be
function OnCurrentPosition(arg) {
if (arg == null) {
parent.location = '../Security/Login.aspx';
}
if (arg) {
var latitude, longitude
var arrayList = arg.split(";");
alert(arg);
for (i = 0; i < arrayList.length; i++) {
if (arrayList[i].length) {
var arrLocation = arrayList[i].split("$")
AddClusterLocation(arrLocation[0], arrLocation[1], arrLocation[2], arrLocation[3], arrLocation[4], arrLocation[5], arrLocation[6], arrLocation[7], arrLocation[8], arrLocation[9]);
SetBounds(arrLocation[1], arrLocation[2]);
latitude = arrLocation[1];
longitude = arrLocation[2];
}
}
CreateClusterer();
if (flgLockMapToBounds == false) {
if (objMakersArray.length == 1) {
SetMapCentre(latitude, longitude, 14);
}
else {
ZoomToExtend();
}
}
}
}
arg = 1344$52.65665917$-2.49004717$../Images/Icons/Direction/container_blueN.ico$Galahad$2014 Mar 05 Wednesday, 14:00$Wellington Road, Horsehay, Hollybank$RESERVED$0 KPH$0$0.00000000$0.00000000$0;1342$52.65582367$-2.48958417$../Images/Icons/Direction/container_yellowN.ico$Gwinevere$2014 Mar 05 Wednesday, 14:00$Woodlands Lane, Horsehay, Coalbrookdale$RESERVED$0 KPH$0$0.00000000$0.00000000$0;
I'm really at a lost to explain this as the labels are correct, I've checked the latitude and longitude and its different each time the function is called. Plus this was working, only spotted by customer yesterday that it wasn't.
Here's the API that I use
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
Thank you for reading the question, hopefully you be able to help!
Jim
解决方案 There is an issue with the MarkerWithLabel library. Issue.
这篇关于Google Map API - 错误位置的多个图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆