谷歌地图API - 错误的地点多个图标 [英] Google Map API - multiple icons in wrong spot
本文介绍了谷歌地图API - 错误的地点多个图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以问题是，当我添加更多比使用API的Google Map中的一个图标，这些图标显得彼此重叠。
奇怪的是标签都位于正确的位置，但使用的坐标与图标。
这是传递给函数的字符串
1344，52.65665917，-2.49004717，'../Images/Icons/Direction/container_blueN.ico'，'Galahad'，'2014年3月5日星期三，14:00'，'惠灵顿路，马蹄，冬青银行'，'保留' ，'0 KPH'，0
函数是
函数AddClusterLocation（FID，经度，经度，图标，ID，DateStamp，位置，事件，速度，IgnitionStatus）{
if（objMap）{
var cssName ='MarkerIgnitionOff';
switch（IgnitionStatus）{
case'1'：
cssName ='MarkerIgnitionOn';
休息;
默认值：
cssName ='MarkerIgnitionOff';
}
var adjustedIcon =新google.maps.MarkerImage（
图标，
新google.maps.Size（32，32），
新google.maps.Point（0，0），
new google.maps.Point（16，16）
）;
$ b var objMarker = new MarkerWithLabel（{
position：new google.maps.LatLng（latitude，longitude），
draggable：false，
raiseOnDrag：false，
icon：adjustedIcon，
map：objMap，
labelContent：'& nbsp;& nbsp;'+ ID +'& nbsp;& nbsp;'，
labelAnchor ：new google.maps.Point（-8，-8），
labelClass：cssName，//标签的CSS类
labelStyle：{opacity：1.0}
}）;
//将Maker添加到数组
objMakersArray.push（objMarker）;
//将事件监听器封装在一个匿名函数
中//然后我们立即调用并将变量传递给
（函数（ID，DateStamp，Location，Event，Speed，图标）{
google.maps.event.addListener（objMarker，'click'，function（）{
if（！objInfoWindows）{
objInfoWindows = new google.maps.InfoWindow（）;
}
//创建段落
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>日期/时间< td>'+ DateStamp +'< / td>< / tr>';
htmlstring = htmlstring +'< tr>< td> < strong>位置< / strong>< / td>< td>'+ Location +'< / td>< / tr>';
htmlstring = htmlstring +'< tr>< td>< strong>< td>< / td>< td>'+ Event +'< / td>< / tr>';
htmlstring = htmlstring +'< tr> < td>< strong> Speed< td>< / td>< td>'+ Speed +'< / td>< / tr>< / table>'
// htmlstring = htmlstring +'< / div>';
adiv.innerHTML = htmlstring;
// para1.innerHTML = htmlstring;
para1.appendChild（adiv）;
//放大DIV
var aDiv = document.createElement（'div'）;
DD.style.width =100px;
aDiv.style.float ='left';
//放大
var alink = document.createElement（'a'）;
alink.innerHTML ='放大';
alink.href ='＃';
alink.onclick = function（）{
objMap.setCenter（objMarker.getPosition（））;
zoomLevel = objMap.getZoom（）;
if（zoomLevel！= 21）{
objMap.setZoom（zoomLevel + 1）;
}
返回false;
};
aDiv.appendChild（alink）;
//缩小DIV
var bDiv = document.createElement（'div'）;
bDiv.style.width ='100px';
bDiv.style.float ='left';
//放大
var blink = document.createElement（'a'）;
blink.innerHTML ='缩小';
blink.href ='＃';
blink.onclick = function（）{
objMap.setCenter（objMarker.getPosition（））;
zoomLevel = objMap.getZoom（）;
if（zoomLevel！= 0）{
objMap.setZoom（zoomLevel - 1）;
}
返回false;
};
bDiv.appendChild（blink）;
//添加收藏Div
var cDiv = document.createElement（'div'）;
cDiv.style.float ='right';
cDiv.style.width ='150px';
//添加收藏
var clink = document.createElement（'a'）;
clink.innerHTML ='添加到收藏夹';
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（），真正）;
}
返回false;
};
cDiv.appendChild（clink）;
var para2 = document.createElement（'p'）;
para2.appendChild（aDiv）;
para2.appendChild（bDiv）;
para2.appendChild（cDiv）;
//创建主分区来存放所有元素
var masterDiv = document.createElement（'div'）;
//获取具有Atlas
的DIV的名称var objDiv = objMap.getDiv（）;
var divName = objDiv.id;
//绑定到映射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）;
//创建包含详细地图的div
var detailDiv = document.createElement（'div'）;
infoDiv.style.float ='right';
detailDiv.style.width ='200px';
detailDiv.style.height ='200px';
masterDiv.appendChild（detailDiv）
//设置小地图
//为总览图创建MapOptions
var overviewOpts = {
zoom：14，
icon：adjustedIcon，
center：objMarker.getPosition（），
mapTypeId：google.maps.MapTypeId.HYBRID，
disableDefaultUI：true
};
var objdetailMap = new google.maps.Map（detailDiv，overviewOpts）;
//创建一个将显示在详细地图中的标记
var objdetailMarker = new google.maps.Marker（{
position：objMarker.getPosition（），
map：objdetailMap，
icon：adjustedIcon，
clickable：false
}）;
//设置InfoWindow的内容
objInfoWindows.setContent（masterDiv）;
//将InfoWindow绑定到标记
objInfoWindows.open（objMap，objMarker）;
}）;
}）（ID，DateStamp，Location，Event，Speed，Icon）;
objMarker = null;
}
}
这个函数会是这样的：
$ p $ 函数OnCurrentPosition（arg）{
if（arg == null）{
parent.location ='../Security/Login.aspx';
if（arg）{
var纬度，经度
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 $ .. /图片/图标/方向/ container_blueN.ico $ Galahad $ 2014 Mar 05星期三，14：00 $ Wellington Road，Horsehay，Hollybank $ RESERVED $ 0 KPH $ 0 $ 0.00000000 $ 0.00000000 $ 0; 1342 $ 52.65582367 $ -2.48958417 $ .. /图片/图标/方向/ container_yellowN.ico $ Gwinevere $ 2014 Mar 05 14 ：00 $ Woodlands Lane，Horsehay，Coalbrookdale $ RESERVED $ 0 KPH $ 0 $ 0.00000000 $ 0.00000000 $ 0;
我真的很迷茫，因为标签是正确的，我已经检查过纬度和经度以及每次调用函数时的不同。此外，这是工作，只有客户昨天发现它不是。
这是我使用的API
< script src =http://maps.google.com/maps/api/js?sensor=falsetype =text / javascript>< / script> ;
感谢您阅读此问题，希望您能够提供帮助！
Jim
解决方案
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.
这篇关于谷歌地图API - 错误的地点多个图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
