谷歌地图标记问题 [英] problems with google map markers
问题描述
正如您可以在我的 test.php 中看到的那样，标记工作正常。
，但是当我放大地图以获得更好的概览时，标记将朝北？
如果我缩小很多，标记会移动到北海:-(
这是一个已知的错误吗？或者我做错了什么？
<！DOCTYPE html>
< html>
< head>
< title> MyRange世界范围驾驶范围< / title>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = yes/>
< style type =text / css>
html {height：100％}
body {height：100％; margin：30px; padding：0px}
#map_canvas {height：80％}
< / style> ;
< script type =text / javascript
src =https://maps.google.com/maps/api/js?sensor=true>
< / script>
< script type =text / javascript>
function initialize（）{
var latlng = new google.maps.LatLng（51.1601369818597,6.72036588191986）;
var myOptions = {
zoom：16，
center：latlng，
mapTypeId：google.maps.MapTypeId.HYBRID
};
var map = new google。 maps.Map（document.getElementById（map_canvas），myOptions ）;
var image ='images / flag_red_big.png';
var myLatLng = new google.maps.LatLng（51.1601369818597,6.72036588191986）;
var golfMarker = new google.maps.Marker（{position：myLatLng，map：map，icon：image}）;
}
< / script>
< / head>
< body onload =initialize（）>
< div align =centerid =map_canvasstyle =width：100％; height：100％>< / div>
< / body>
< / html>
您需要使用 MarkerImage 。
仅供参考 - 您的图标似乎移动了，因为底部之间有很多空的空间的标志和图像的底部（这是它现在锚定的地方）。
as you can see at my test.php the marker ist working fine. but when I zoom the map for an better overview the marker is going to north??? If I zoom a lot, the marker moved to North sea :-( Is this a known bug? or am I doing something wrong?
<!DOCTYPE html>
<html>
<head>
<title>MyRange Driving Ranges world wide </title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 30px; padding: 0px }
#map_canvas { height: 80% }
</style>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.1601369818597, 6.72036588191986);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = 'images/flag_red_big.png';
var myLatLng = new google.maps.LatLng(51.1601369818597, 6.72036588191986);
var golfMarker = new google.maps.Marker({ position: myLatLng, map: map, icon: image });
}
</script>
</head>
<body onload="initialize()">
<div align="center" id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
The default anchor point for an icon (which is what you get if you don't define it) is at the bottom center of the image.
You need to fully specify the icon using an instance of MarkerImage.
FYI - your icon seems to move because there is a lot of empty space between the bottom of the flag and the bottom of the image (which is where it is currently anchored).
这篇关于谷歌地图标记问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
