Javascript 谷歌地图上的固定标记_Javascript_Jquery_Css_Google Maps_Google Maps Api 3

Javascript 谷歌地图上的固定标记

javascript jquery css google-maps google-maps-api-3

Javascript 谷歌地图上的固定标记,javascript,jquery,css,google-maps,google-maps-api-3,Javascript,Jquery,Css,Google Maps,Google Maps Api 3,我试图复制中所示的固定标记功能，但该标记似乎没有显示在我的html页面中，尽管使用了相同的代码。除了js fiddle代码之外，我唯一添加的是脚本源代码。有人能告诉我哪里出了问题吗这是我从中复制的代码页面标题正文，html，#地图#画布{高度：100%；边距：0；} #地图/画布.中心标记{ 位置：绝对位置； /*标记的url*/ 背景：url(http://maps.gstatic.com/mapfiles/markers2/marker.png)不重复； /*居中标记*/ 顶部：50

我试图复制中所示的固定标记功能，但该标记似乎没有显示在我的html页面中，尽管使用了相同的代码。除了js fiddle代码之外，我唯一添加的是脚本源代码。有人能告诉我哪里出了问题吗

这是我从中复制的代码


页面标题
正文，html，#地图#画布{高度：100%；边距：0；}
#地图/画布.中心标记{
位置：绝对位置；
/*标记的url*/
背景：url(http://maps.gstatic.com/mapfiles/markers2/marker.png)不重复；
/*居中标记*/
顶部：50%；左侧：50%；
z指数：1；
/*在需要时修复偏移*/
左边距：-10px；
利润上限：-34px；
/*图像的大小*/
高度：34px；
宽度：20px；
光标：指针；
}
函数初始化（）{
变量映射选项={
缩放：14，
中心：新google.maps.LatLng（52.5498783,13.4252090999961），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map_canvas'），
地图选项）；
$（''）.addClass（'centerMarker'）.appendTo（map.getDiv（））
//再舔一下
。单击（函数（）{
var，该值=$（此值）；
如果（！that.data（'win'））{
data（'win'，新的google.maps.InfoWindow（{content:'this is the center'））；
数据（'win'）.bindTo（'position'，map，'center'）；
}
即.data（'win'）。open（map）；
});
};
google.maps.event.addDomListener（窗口“加载”，初始化）；

您需要包括jQuery，因为您使用的是

$（“”）

我运行了你的文件，添加后效果很好

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

让我知道这是否对您有效：）

另外，您可能错过了jQuery，因为它是使用JSFIDLE左侧的下拉菜单包含的。

我注意到上面代码中的jQuery脚本源中缺少

http:

，添加它解决了我的问题

这是更新后的代码

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


页面标题
正文，html，#地图#画布{高度：100%；边距：0；}
#地图/画布.中心标记{
位置：绝对位置；
/*标记的url*/
背景：url(http://maps.gstatic.com/mapfiles/markers2/marker.png)不重复；
/*居中标记*/
顶部：50%；左侧：50%；
z指数：1；
/*在需要时修复偏移*/
左边距：-10px；
利润上限：-34px；
/*图像的大小*/
高度：34px；
宽度：20px；
光标：指针；
}
函数初始化（）{
变量映射选项={
缩放：14，
中心：新google.maps.LatLng（52.5498783,13.4252090999961），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map_canvas'），
地图选项）；
$（''）.addClass（'centerMarker'）.appendTo（map.getDiv（））
//再舔一下
。单击（函数（）{
var，该值=$（此值）；
如果（！that.data（'win'））{
data（'win'，新的google.maps.InfoWindow（{content:'this is the center'））；
数据（'win'）.bindTo（'position'，map，'center'）；
}
即.data（'win'）。open（map）；
});
};
google.maps.event.addDomListener（窗口“加载”，初始化）；

感谢您的回复，我在Google maps api源代码之前添加了jQuery源代码。它仍然不起作用，不知道我哪里出错了。你能用你当前的代码更新你问题中的代码吗？另外，您的javascript控制台是否报告任何错误？我需要向jQueryURL添加一个协议（至少在IE中）<代码>src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js“我错过了将

http:

添加到jQuery源url的步骤，添加它是可行的。您链接到的JSFIDLE中的代码似乎对我有效

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