谷歌地图自定义覆盖物

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>自定义覆盖物</title>
        <style>
            #map{
                width: 800px;
                height: 800px;
            }
        </style>
        <script src="http://maps.googleapis.com/maps/api/js?key=key&language=en&libraries=drawing,geometry,visualization"></script>
        <script src="js/ComplexCustomOverlay.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="map"></div>
    </body>
    <script type="text/javascript">
        var centerPoint = new google.maps.LatLng(31.2351581719, 121.5060055700); //金茂大厦
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            minZoom: 1,
            center: centerPoint,
            // styles : styleJson,
            zoomControl: false, // 启用/禁用缩放控件
            mapTypeControl: false, // 启用/禁用允许用户在地图类型（例如地图和卫星）之间切换的地图类型控件
            scaleControl: false, // 启用/禁用提供简单地图比例的“缩放”控件
            streetViewControl: false, // 启用/禁用Pegman控件
            rotateControl: false, // 启用/禁用旋转控件的外观以控制45°图像的方向
            fullscreenControl: false, // 是否全屏 此控件在移动设备上可见，在桌面上不可见
            gestureHandling: 'greedy', // 属性设置
            // greedy为触摸屏和移动设备，以允许用户在用户滑动（拖动）屏幕时平移地图（向上或向下，向左或向右）。换句话说，单指滑动和双指滑动都可以使地图平移。
        });
        function ComplexCustomOverlay(point, pointClass) {
            this._point = point;
            // this._pointClass = pointClass;
            this._div = null;
            this.setMap(map);
        }
        
        ComplexCustomOverlay.prototype = new google.maps.OverlayView();
        ComplexCustomOverlay.prototype.onAdd = function() {
            var div = document.createElement("div");
            div.innerHTML = "<div style='width: 100px;height: 60px;border: 1px solid red;'>测试自定义覆盖物测试自定义覆盖物测试自定义覆盖物</div>";
            // div.className = this._pointClass;
            //将元素添加到可点击图层
            this.getPanes().overlayMouseTarget.appendChild(div);
        
            this._div = div;
            return div;
        }
        ComplexCustomOverlay.prototype.draw = function() {
            var overlayProjection = this.getProjection();
            var pixel = overlayProjection.fromLatLngToDivPixel(this._point);
            this._div.style.position = "absolute";
                        //需自己计算偏移位置
            this._div.style.left = pixel.x - 17.5 + "px";
            this._div.style.top = pixel.y - 19.5 + "px";
        }
            
        var myCompOverlay = new ComplexCustomOverlay(centerPoint, "startPoint");
        myCompOverlay.setMap(map);
    </script>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容