谷歌地圖上的固定標記

我試圖複製this JSFIDDLE link中顯示的固定標記功能，但標記似乎無法在我的html頁面中呈現，儘管使用了相同的代碼。除了js小提琴代碼之外，我唯一添加的是腳本源代碼。有人可以建議我去哪裏錯了嗎？谷歌地圖上的固定標記

這是我從JSFIDDLE link複製的代碼。

<!DOCTYPE html> 

<html> 
<head> 
    <title>Page Title</title> 
    <style> 
     body,html,#map_canvas{height:100%;margin:0;} 
#map_canvas .centerMarker{ 
    position:absolute; 
    /*url of the marker*/ 
    background:url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat; 
    /*center the marker*/ 
    top:50%;left:50%; 
    z-index:1; 
    /*fix offset when needed*/ 
    margin-left:-10px; 
    margin-top:-34px; 
    /*size of the image*/ 
    height:34px; 
    width:20px; 
    cursor:pointer; 
} 
    </style> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 


    <script> 
      function initialize() { 
     var mapOptions = { 
      zoom: 14, 
      center: new google.maps.LatLng(52.5498783, 13.425209099999961), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), 
      mapOptions); 
     $('<div/>').addClass('centerMarker').appendTo(map.getDiv()) 
      //do something onclick 
      .click(function(){ 
       var that=$(this); 
       if(!that.data('win')){ 
       that.data('win',new google.maps.InfoWindow({content:'this is the center'})); 
       that.data('win').bindTo('position',map,'center'); 
       } 
       that.data('win').open(map); 
      }); 
     }; 

     google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 

</head> 

<body> 
<div id="map_canvas"></div> 


</body> 
</html>

來源

2013-10-25 user44776

您在jsfiddle中鏈接的代碼似乎對我有用 –

您需要包括jQuery的，因爲你正在使用$('<div/>') ..

我跑你的文件，並將其添加

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

前

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

後運行良好讓我知道這是否適合你:)

P.S.您可能錯過了jQuery，因爲它包含在jsFiddle左側的下拉菜單中。

來源

2013-10-25 16:26:35 asifrc

感謝您的回覆，我在谷歌地圖api源代碼之前添加了jQuery源代碼。它仍然沒有工作，不知道我哪裏出錯。 – user44776

你能用你當前的代碼更新你的代碼嗎？此外，你的JavaScript控制檯報告任何錯誤？ – asifrc

我已經更新了當前問題中的代碼。 – user44776

我注意到http:在上面的代碼中缺少jQuery腳本源代碼，添加它解決了我的問題。

這裏是更新的代碼。

<!DOCTYPE html> 

<html> 
<head> 
    <title>Page Title</title> 
    <meta charset="UTF-8"> 
    <style> 
    body,html,#map_canvas{height:100%;margin:0;} 
    #map_canvas .centerMarker{ 
    position:absolute; 
    /*url of the marker*/ 
    background:url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat; 
    /*center the marker*/ 
    top:50%;left:50%; 
    z-index:1; 
    /*fix offset when needed*/ 
    margin-left:-10px; 
    margin-top:-34px; 
    /*size of the image*/ 
    height:34px; 
    width:20px; 
    cursor:pointer; 
    } 
    </style> 


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 


    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&.js"></script> 


    <script> 
     function initialize() { 
     var mapOptions = { 
      zoom: 14, 
      center: new google.maps.LatLng(52.5498783, 13.425209099999961), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), 
      mapOptions); 
     $('<div/>').addClass('centerMarker').appendTo(map.getDiv()) 
      //do something onclick 
      .click(function(){ 
       var that=$(this); 
       if(!that.data('win')){ 
       that.data('win',new google.maps.InfoWindow({content:'this is the center'})); 
       that.data('win').bindTo('position',map,'center'); 
       } 
       that.data('win').open(map); 
      }); 
     }; 

     google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 

</head> 

<body> 
<div id="map_canvas"></div> 


</body> 
</html>

來源

2013-10-26 02:58:37 user44776

谷歌地圖上的固定標記

回答

相關問題