g map init 示例

最新推荐文章于 2026-08-01 13:51:35 发布

原创最新推荐文章于 2026-08-01 13:51:35 发布 · 253 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

该博客介绍了如何使用Google Maps API进行地图初始化，包括设置初始位置、缩放级别，以及添加地图监听器以获取中心位置变化和拖动事件。重点在于地图组件的创建和基本事件处理。


初始化
G_initMap: function (point, zoomLevel) {
    console.log("initG==>", point, zoomLevel)
    if (zoomLevel == undefined || zoomLevel == null)
        zoomLevel = 15;
    var th = this;
    if (th.G_MAPINITED == false) {//第一次初始化
        th.G_MAPINITED = true;
        initMap = function () {
            G_MAP = new google.maps.Map(document.getElementById("map"), {
                zoom: zoomLevel,
                // RotateControlOptions :RIGHT_CENTER,
                center: point,
                mapTypeId: "hybrid",
                zoomControl: true,
                mapTypeControl: false,
                scaleControl: false,
                streetViewControl: false,
                rotateControl: false,
                fullscreenControl: false,
                clickableIcons: false,
                zoomControlOptions: {
                    position: google.maps.ControlPosition.RIGHT_CENTER,
                },
                // scaleControlOptions:true,
            });
            new google.maps.Marker({
                position: point,
                map:G_MAP,
                title: "Hello World!",
            });
            /**
             * HYBRID    此地图类型在卫星图像上显示主要街道的透明图层。
             ROADMAP    此地图类型显示普通街道地图。
             SATELLITE    此地图类型显示卫星图像。
             TERRAIN    此地图类型显示具有地形和植被等物理特征的地图。
             */
            // G_MAP.addListener("center_changed", () => {
            //     console.log("center_changed", {lat: G_MAP.getCenter().lat(), lng: G_MAP.getCenter().lng()})
            // });
            G_MAP.addListener('zoom_changed', () => {

            });
            G_MAP.addListener("dragend", () => {
                console.log("dragend", {lat: G_MAP.getCenter().lat(), lng: G_MAP.getCenter().lng()})
                // th.G_TO_BMAP();
            });

        }
        window.google.maps.Load && window.google.maps.Load(G_ZSYDA);
    } else {
        G_MAP.panTo(point)//第二次初始化
        G_MAP.setZoom(zoomLevel)
    }
}

标签

#css