我是 Google map API 的新手。我知道这可能是一个简单的问题。代码可以根据需要工作，但我无法让标记最初显示在 map 上。标记正在等待单击事件来显示标记。 map 首次加载时需要在 map 上显示初始标记，以便可以拖动它。
<!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>
最佳答案
请确保您在创建标记时在图标下提到的图像文件是可访问的，即它的路径是正确的。
我将图标图像更改为以下内容并且标记可见:
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
};
您为 map 拖动事件添加的监听器会出现错误，因为它不返回 MouseEvent，因此无法获取位置。即使省略此监听器，代码仍然可以工作。
根据 v3 文档
https://developers.google.com/maps/documentation/javascript/reference#Map
drag None 当用户拖动 map 时会重复触发此事件。
希望这对您有帮助。如果有效请告诉我。
关于javascript - map 初始化时 Google map 标记不出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17499579/