在google地图上显示一个层-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaoguang44/article/details/6898639

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=你的API Key" type="text/javascript"></script>
    <script type="text/javascript">
        function initialize() {
            if (!GBrowserIsCompatible()) {
                alert("不支持GoogleMap");
            }
                
            if (GBrowserIsCompatible()) {
                var map = new GMap2(document.getElementById("map_canvas"));
               
                //显示控件
                map.addControl(new GLargeMapControl());
                map.addControl(new GMapTypeControl());
                //显示中心坐标
                GEvent.addListener(map, "move", function () {
                    var center = map.getCenter();
                    document.getElementById("CenterPoint").innerHTML = center.toString();
                });
                //显示地图
                map.setCenter(new GLatLng(39.9493, 116.3975), 13);
                //设置坐标
                var Beijing = new GLatLng(39.9493, 116.3975);
                //显示标记的函数
                map.addOverlay(create_Marker(Beijing, "北京"));

                //设置标记和信息窗口
                function create_Marker(point,zhan) {
                    var marker = new GMarker(point);
                    GEvent.addListener(marker, "click", function () {
                        marker.openInfoWindowHtml("这里是<b>"+zhan+"站</b><br>");
                    });
                    return marker;
                }
            }
        }
    </script>
</head>
<body οnlοad="initialize()" οnunlοad="GUnload()">
    
    <form id="form1" runat="server">
      <div id="map_canvas" style="width: 500px; height: 300px"></div>
      <div id="CenterPoint"></div>
    </form>
</body>
</html>

效果：