2

我正在尝试复制此 JSFIDDLE 链接中显示的固定标记功能，但尽管使用了相同的代码，但标记似乎并未呈现在我的 html 页面中。除了 js fiddle 代码之外，我唯一添加的是脚本源。有人可以建议我哪里出错了吗？

这是我从JSFIDDLE 链接复制的代码。 

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

2 回答 2

1

您需要包含 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>

让我知道这是否适合你:)

PS 你可能错过了 jQuery，因为它使用 jsFiddle 左侧的下拉菜单包含在内。

于 2013-10-25T16:26:35.720 回答
0

我注意到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-26T02:58:37.037 回答