初始化地图时未出现谷歌地图标记
Posted
技术标签:
【中文标题】初始化地图时未出现谷歌地图标记【英文标题】：Google Maps marker not appearing when map is initialized 【发布时间】：2013-07-06 04:12:45 【问题描述】：我是 Google Map API 的新手。我知道这可能是一个简单的。代码按需要工作，但我无法让标记最初显示在地图上。标记正在等待点击事件显示标记。首次加载地图时需要在地图上显示初始标记，以便可以拖动它。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="libs/jq.ui.min.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places,visualization&sensor=false"></script>
<script>
var initialLocation;
var map;
var marker;
var latlon;
var lat;
var lon;
//---------------------------------------------------
getLocation();
//---------------------------------------------------
function getLocation()
if (navigator.geolocation)
var timeoutVal = 10 * 1000 * 1000;
navigator.geolocation.getCurrentPosition(initialize,showError,
enableHighAccuracy:true,timeout:timeoutVal,maximumAge:0
);
lat = position.coords.latitude;
lon = position.coords.longitude;
//---------------------------------------------------
function initialize()
var myOptions=
center:latlon,
zoom:15,
zoomControl:true,
zoomControlOptions:
style:google.maps.ZoomControlStyle.SMALL
,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
myListener = google.maps.event.addListener(map, 'click', function(event)
placeMarker(event.latLng);
google.maps.event.removeListener(myListener);
);
google.maps.event.addListener(map, 'drag', function(event)
placeMarker(event.latLng);
google.maps.event.removeListener(myListener);
);
// Try W3C Geolocation (Preferred)
if(navigator.geolocation)
// browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position)
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
, function()
showError;
);
function placeMarker(location)
marker = new google.maps.Marker(
position: location,
icon:'map_icon3.png',
animation:google.maps.Animation.DROP,
map: map,
draggable: true
);
marker.setMap(map);
map.setCenter(location);
var markerPosition = marker.getPosition();
populateInputs(markerPosition);
google.maps.event.addListener(marker, "drag", function (mEvent)
populateInputs(mEvent.latLng);
);
function populateInputs(pos)
document.getElementById("t1").value=pos.lat()
document.getElementById("t2").value=pos.lng();
//-------------------------------------------------------------------
function showError(error)
switch(error.code)
case error.PERMISSION_DENIED:
x.innerHTML="User Denied Geolocation"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location Data Unavailable"
break;
case error.TIMEOUT:
x.innerHTML="Request Timed Out"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Unknown Error Occurred"
break;
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 500px"></div>
<input type="text" id="t1" name="t1" />
<input type="text" id="t2" name="t2" />
</body>
</html>
【问题讨论】：
您在代码中的哪个位置尝试在页面加载时显示标记？ 【参考方案1】：请确保您在创建标记时在图标下提到的图像文件是可访问的，即它的路径是正确的。
我将图标图像更改为以下，并且标记可见：
marker = new google.maps.Marker(
position: location,
icon:'http://google.com/mapfiles/ms/micons/red.png',
animation:google.maps.Animation.DROP,
map: map,
draggable: true
);
我无法通过浏览器获取位置。 它一直给我一个错误说：
position is not defined
lat = position.coords.latitude;
为了避免这种情况，我将初始化函数中 myOptions 中的 latlon 变量更改为以固定点为中心。
var latlng = new google.maps.LatLng(19.16981,72.85434);
var myOptions=
center:latlng,
zoom:15,
zoomControl:true,
zoomControlOptions:
style:google.maps.ZoomControlStyle.SMALL
,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
您为地图拖动事件添加的侦听器会出现错误，因为它不返回 MouseEvent，因此无法获得位置。即使省略了这个监听器，代码仍然可以工作。
根据 v3 文档
https://developers.google.com/maps/documentation/javascript/reference#Map
drag None 用户拖动地图时会重复触发此事件。
希望这对您有所帮助。让我知道它是否有效。
【讨论】：
以上是关于初始化地图时未出现谷歌地图标记的主要内容，如果未能解决你的问题，请参考以下文章