使用自定义图标定位Google地图标记 [英] Google Maps marker positioning with custom icon
本文介绍了使用自定义图标定位Google地图标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我遇到一个问题，我的带有自定义图标的标记似乎在地图上略微不同的点上显示，具体取决于缩放级别。我之前使用过自定义图标的标记，所以我不知道我做错了什么。您会看到，最初看起来标记正好位于路上，但如果您缩小两次，它看起来就像在上方，如果您放大两倍，它看起来就像在下面。
代码：
<！DOCTYPE html>
< html>
< head>
< script src =https://maps.googleapis.com/maps/api/js>< / script>
< script type =text / javascript>
var map;
函数initialize（）{
var mapOptions = {
center：new google.maps.LatLng（-38.255338,144.30834），
zoom：11，
mapTypeId：google.maps.MapTypeId.ROADMAP，
draggable：true，
zoomControl：true，
scrollwheel：false，
disableDefaultUI：是的，
};
map = new google.maps.Map（document.getElementById（map），mapOptions）;
var location = new google.maps.LatLng（-38.174379,144.237155）;
变种ICON1 =数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89 + BN / rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz / SMBAPh + PDwrIsAHvgABeNMLCADATZvAMByH / W / qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf + bTAICd + Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA / g88wAAKCRFRHgg / P9eM4Ors7ONo62Dl8t6r8G / yJiYuP + 5C + rcEAAAOF0ftH + LC + zGoA7BoBt / qIl7gRoXgugdfeLZrIPQLUAoOnaV / NW + H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl / AV / 1S + X48 / Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H / LCL // wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s + WM + 3zUAsGo + AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93 / + 8 // UegJQCAZkmScQAAXkQkLlTKsz / HCAAARKCBKrBBG / TBGCzABhzBBdzBC / xgNoRCJMTCQhBCCmSAHHJgKa yCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD / phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8 + Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8 + xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR + cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI + ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG + Qh8lsKnWJAcaT4U + IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr + h0uhHdlR5Ol9BX0svpR + iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK + YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI + pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q / pH5Z / YkGWcNMw09DpFGgsV / jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY / R27iz2qqaE5QzNKM1ezUvOUZj8H45hx + Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4 / OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up + 6Ynr5egJ5Mb6feeb3n + hx9L / 1U / W36p / VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTe pN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm + eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw + 6TvZN9un2N / T0HDYfZDqsdWh1 + c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc + Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26 / uNu5p7ofcn8w0nymeWTNz0MPIQ + BR5dE / C5 + VMGvfrH5PQ0 + BZ7XnIy9jL5FXrdewt6V3qvdh7xc + 9j5yn + M + 4zw33jLeWV / MN8C3yLfLT8Nvnl + F30N / I / 9K / 3R / 0QCngCUBZwOJgUGBWwL7 + Hp8Ib + OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo + qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt / 87fOH4p3iC + N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi / RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z + pn5mZ2y6xlhbL + xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a / zYnKOZarnivN7cyzytuQN5zvn // tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1 + 1dT1gvWd + 1YfqGnRs + FYmKrhTbF5cVf9go3HjlG4dvyr + Z3JS0qavEuWTPZt Jm6ebeLZ5bDpaql + aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO / PLi8ZafJzs07P1SkVPRU + lQ27tLdtWHX + G7R7ht7vPY07NXbW7z3 / T7JvttVAVVN1WbVZftJ + 7P3P66Jqun4lvttXa1ObXHtxwPSA / 0HIw6217nU1R3SPVRSj9Yr60cOxx ++ / p3vdy0NNg1VjZzG4iNwRHnk6fcJ3 / ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w + 0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb ++ 6EHTh0kX / I + c7vDvOXPK4dPKy2 + UTV7hXmq86X23qdOo8 / pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb / 1tWeOT3dvfN6b / FF9 / XfFt1 + cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v + 3Njv3H9qwHeg89HcR / cGhYPP / pH1jw9DBY + Zj8uGDYbrnjg + OTniP3L96fynQ89kzyaeF / 6I / suuFxYvfvjV69fO0ZjRoZfyl5O / bXyl / erA6xmv28bCxh6 + yXgzMV70VvvtwXfcdx3vo98PT + R8IH8o / 2j5sfVT0Kf7kxmTk / 8EA5jz / GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5 / wAAgOkAAHUwAADqYAAAOpgAABdvkl / FRgAAAZhJREFUeNqc0j9rk2EUBfDf + zyxNklNCw5WSsXBDKKIgzgJLnWpgoPQzgqd3GsH1wr6HRShg7GLHSz9Ao2CQyfBsaAZCmpMU6nmTd7EoXlL / TN54cLlcM89cM9J4tSsI3UV93ALlSHWxms8w7t8MYZKNZ8f4CWuDEnHh10ZYgv4ifpR4iIegySRpT2D7 / sGndQgBKEQ8 +的Mz + IF6EqdmL + D9gX6UfW2R9Y2fmQS7H3eIQTw5QZblBy4GLB0qNVuKYyW12rLG1orG1opabVlxrC RrtkiSnLhUGMrrp126Pc + fPjR389rht + ZvX5cUovk7i / ppVzhWgJkkTs12MJK19lSmJ + 1 + WPWvGj8 / P / 1pR5w4AWnwnxXQhKRc1N5uWF3f / GtpdX1Te7shKRdzqBlDpXoZl5JCNOh2rW + 8da467ez0KWm359XGG3cXHullmVgu5cS1 / 7Yjhkr189DUGwYDoThqEKPOt7bO3j7lkjhWot8 / mrC1PDn1YZxmIMQgjI4cdPztf0t48mdW69hAH6eRIMUXvMB9HHr1awCLBokiAbRiywAAAABJRU5ErkJggg ==;
var markerImage1 = {
url：icon1，
scaledSize：new google.maps.Size（14,14），
};
var marker = new google.maps.Marker（{
position：location，
map：map，
icon：markerImage1
}）;
}
< / script>
< style>
#map {
身高：500px;
保证金：0自动;
宽度：1024px;
}
< / style>
< / head>
< body onload ='initialize（）'>
< div id ='map'>< / div>
< / body>
< / html>
解决方案
如果你想让图标的锚点不在底边的中心，你必须设置锚点属性。
对于你的图像（一个圆圈），我认为它应该是中心（7,7）：
var markerImage1 = {
url：icon1，
scaledSize：new google.maps.Size（14,14），
anchor：new google.maps.Point（7,7）
};
代码段
var map; function initialize（）{var mapOptions = {center：new google.maps.LatLng（-38.255338,144.30834），zoom：11，mapTypeId：google.maps.MapTypeId.ROADMAP ，draggable：true，zoomControl：true，scrollwheel：false，disableDefaultUI：true，}; map = new google.maps.Map（document.getElementById（map），mapOptions）; var location = new google.maps.LatLng（-38.174379,144.237155）; var markerImage1 = {url：icon1，scaledSize：new google.maps.Size（14,14），anchor：new google.maps.Point（7,7）}; var marker = new google.maps.Marker（{position：location，map：map，icon：markerImage1}）; var m = new google.maps.Marker（{position：location，map：map}）map.setCenter（m.getPosition（））;} google.maps.event.addDomListener（window，'load'，initialize）; var ICON1 =数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89 + BN / rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz / SMBAPh + PDwrIsAHvgABeNMLCADATZvAMByH / W / qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf + bTAICd + Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA / g88wAAKCRFRHgg / P9eM4Ors7ONo62Dl8t6r8G / yJiYuP + 5C + rcEAAAOF0ftH + LC + zGoA7BoBt / qIl7gRoXgugdfeLZrIPQLUAoOnaV / NW + H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl / AV / 1S + X48 / Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H / LCL // wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSK cUl0v9k4t8s + WM + 3zUAsGo + AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93 / + 8 // UegJQCAZkmScQAAXkQkLlTKsz / HCAAARKCBKrBBG / TBGCzABhzBBdzBC / xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD / phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8 + Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8 + xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR + cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI + ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG + Qh8lsKnWJAcaT4U + IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr + h0uhHdlR5Ol9BX0svpR + iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK + YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI + pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q / pH5Z / YkGWcNMw09DpFGgsV / jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY / R27iz2qqaE5QzNKM1ezUvOUZj8H45hx + Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4 / OBZ3nU 9lT3acKpxZNPTr1ri6qa6UbobtEd79up + 6Ynr5egJ5Mb6feeb3n + hx9L / 1U / W36p / VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm + eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw + 6TvZN9un2N / T0HDYfZDqsdWh1 + c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc + Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26 / uNu5p7ofcn8w0nymeWTNz0MPIQ + BR5dE / C5 + VMGvfrH5PQ0 + BZ7XnIy9jL5FXrdewt6V3qvdh7xc + 9j5yn + M + 4zw33jLeWV / MN8C3yLfLT8Nvnl + F30N / I / 9K / 3R / 0QCngCUBZwOJgUGBWwL7 + Hp8Ib + OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo + qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt / 87fOH4p3iC + N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi / RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z + pn5mZ2y6xlhbL + xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a / zYnKOZarnivN7cyzytuQN5zvn // tE的sIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1 + 1dT1gvWd + 1YfqGnRs + FYmKrhTbF5cVf9go3HjlG4dvyr + Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql + aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO / PLi8ZafJzs07P1SkVPRU + lQ27tLdtWHX + G7R7ht7vPY07NXbW7z3 / T7JvttVAVVN1WbVZftJ + 7P3P66Jqun4lvttXa1ObXHtxwPSA / 0HIw6217nU1R3SPVRSj9Yr60cOxx ++ / p3vdy0NNg1VjZzG4iNwRHnk6fcJ3 / ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w + 0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb ++ 6EHTh0kX / I + c7vDvOXPK4dPKy2 + UTV7hXmq86X23qdOo8 / pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb / 1tWeOT3dvfN6b / FF9 / XfFt1 + cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v + 3Njv3H9qwHeg89HcR / cGhYPP / pH1jw9DBY + Zj8uGDYbrnjg + OTniP3L96fynQ89kzyaeF / 6I / suuFxYvfvjV69fO0ZjRoZfyl5O / bXyl / erA6xmv28bCxh6 + yXgzMV70VvvtwXfcdx3vo98PT + R8IH8o / 2j5sfVT0Kf7kxmTk / 8EA5jz / GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5 / wAAgOkAAHUwAADqYAAAOpgAABdvkl / FRgAAAZhJREFUeNqc0j9rk2EUBfDf + zyxNklNCw5WSsXBDKKIgzgJLnWpgoPQzgqd3GsH1wr6HRShg7GLHSz9Ao2CQyfBsaAZCmpMU6nmTd7EoXlL / TN54cLlcM89cM9J4 tSsI3UV93ALlSHWxms8w7t8MYZKNZ8f4CWuDEnHh10ZYgv4ifpR4iIegySRpT2D7 / sGndQgBKEQ8 +的Mz + IF6EqdmL + D9gX6UfW2R9Y2fmQS7H3eIQTw5QZblBy4GLB0qNVuKYyW12rLG1orG1opabVlxrCRrtkiSnLhUGMrrp126Pc + fPjR389rht + ZvX5cUovk7i / ppVzhWgJkkTs12MJK19lSmJ + 1 + WPWvGj8 / P / 1pR5w4AWnwnxXQhKRc1N5uWF3f / GtpdX1Te7shKRdzqBlDpXoZl5JCNOh2rW + 8da467ez0KWm359XGG3cXHullmVgu5cS1 / 7Yjhkr189DUGwYDoThqEKPOt7bO3j7lkjhWot8 / mrC1PDn1YZxmIMQgjI4cdPztf0t48mdW69hAH6eRIMUXvMB9HHr1awCLBokiAbRiywAAAABJRU5ErkJggg =='; < pre class =snippet-code-css lang-css prettyprint-override> html，body，＃map {height：100％;宽度：100％;填充：0; margin：0;}
< script src =https ：//maps.googleapis.com/maps/api/js>< / script>< div id ='map'>< / div>
I'm having an issue where my marker with a custom icon is seemingly showing at slightly different points on the map dependent on zoom levels. I've used markers with custom icons before so I have no clue what I'm doing incorrectly. You'll see that initially it looks like the marker is sitting right on the road but if you zoom out twice it looks like it's above and if you zoom in twice it looks like it's below.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-38.255338, 144.30834),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: true,
zoomControl: true,
scrollwheel: false,
disableDefaultUI: true,
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var location = new google.maps.LatLng(-38.174379, 144.237155);
var icon1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAZhJREFUeNqc0j9rk2EUBfDf+zyxNklNCw5WSsXBDKKIgzgJLnWpgoPQzgqd3GsH1wr6HRShg7GLHSz9Ao2CQyfBsaAZCmpMU6nmTd7EoXlL/TN54cLlcM89cM9J4tSsI3UV93ALlSHWxms8w7t8MYZKNZ8f4CWuDEnHh10ZYgv4ifpR4iIegySRpT2D7/sGndQgBKEQ8+Mz+IF6EqdmL+D9gX6UfW2R9Y2fmQS7H3eIQTw5QZblBy4GLB0qNVuKYyW12rLG1orG1opabVlxrCRrtkiSnLhUGMrrp126Pc+fPjR389rht+ZvX5cUovk7i/ppVzhWgJkkTs12MJK19lSmJ+1+WPWvGj8/p/1pR5w4AWnwnxXQhKRc1N5uWF3f/GtpdX1Te7shKRdzqBlDpXoZl5JCNOh2rW+8da467ez0KWm359XGG3cXHullmVgu5cS1/7Yjhkr189DUGwYDoThqEKPOt7bO3j7lkjhWot8/mrC1PDn1YZxmIMQgjI4cdPztf0t48mdW69hAH6eRIMUXvMB9HHr1awCLBokiAbRiywAAAABJRU5ErkJggg==';
var markerImage1 = {
url: icon1,
scaledSize: new google.maps.Size(14, 14),
};
var marker = new google.maps.Marker({
position: location,
map: map,
icon: markerImage1
});
}
</script>
<style>
#map {
height: 500px;
margin: 0 auto;
width: 1024px;
}
</style>
</head>
<body onload='initialize()'>
<div id='map'></div>
</body>
</html>
解决方案
If you want the icon's anchor to not be on the center of the bottom edge, you have to set the anchor property.
For your image (a circle), I would think it should be the center (7,7):
var markerImage1 = {
url: icon1,
scaledSize: new google.maps.Size(14, 14),
anchor: new google.maps.Point(7,7)
};
code snippet:
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-38.255338, 144.30834),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: true,
zoomControl: true,
scrollwheel: false,
disableDefaultUI: true,
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var location = new google.maps.LatLng(-38.174379, 144.237155);
var markerImage1 = {
url: icon1,
scaledSize: new google.maps.Size(14, 14),
anchor: new google.maps.Point(7, 7)
};
var marker = new google.maps.Marker({
position: location,
map: map,
icon: markerImage1
});
var m = new google.maps.Marker({
position: location,
map: map
})
map.setCenter(m.getPosition());
}
google.maps.event.addDomListener(window, 'load', initialize);
var icon1 = 'data:image/png;base64,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';
html,
body,
#map {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id='map'></div>
这篇关于使用自定义图标定位Google地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
