Google地图标记在地图初始化时不显示

我是Google Map API的新手。我知道这可能是一个简单的。代码根据需要工作，除非我无法将标记初始显示在地图上。标记正在等待点击事件来显示标记。当地图第一次加载时需要初始标记在地图上显示，以便拖动它。Google地图标记在地图初始化时不显示

<!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>

来源

2013-07-06 user2555505

你的代码中的哪个位置试图在页面加载时显示标记？ – geocodezip

请确保在创建标记时在图标下方提到的图像文件是可访问的，即其路径正确。

我改变了图标图像以下内容并标记为可见：

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;

为了避免这种情况，我改变了latlon变量myOptions在初始化函数上的固定点中心。

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

拖动无此事件当用户拖动地图时会反复触发。

希望这可以帮助你。请让我知道它是否有效。

来源

2013-07-08 09:42:51 Joyson

Google地图标记在地图初始化时不显示

回答

相关问题