Question

我试图将图像地图与自定义投影组合在一起。我从以下3个URL中借用了代码：

https://developers.google.com/maps/documentation/javascript/examples/map-coordinates https://developers.google.com/maps/documentation/javascript/examples/maptype-image https://developers.google.com/maps/documentation/javascript/examples/map-projection-simple

我添加了代码以10度为增量循环遍历所有Lat和Lng值，但实际只显示了一些标记。

如果我删除该行：

mapType.projection = new MercatorProjection();

然后标记都按预期显示。这意味着我无法使用自定义投影，除非有更好的方法。

所有的Javascript代码都在下方，应该会显示带有标记的月亮。

感谢。

<!DOCTYPE html>
<html>
    <head>
        <title>Showing pixel and tile coordinates</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
        <script>
            var map;
            var TILE_SIZE = 256;
            var chicago = new google.maps.LatLng(41.850033,-87.6500523);

            function modulo(n, d) {
                var result = (n % d + d) % d;
                return result;
            }

            function bound(value, opt_min, opt_max) {
                if (opt_min != null) value = Math.max(value, opt_min);
                if (opt_max != null) value = Math.min(value, opt_max);
                return value;
            }

            function degreesToRadians(deg) {
                return deg * (Math.PI / 180);
            }

            function radiansToDegrees(rad) {
                return rad / (Math.PI / 180);
            }

            /** @constructor */
            function MercatorProjection() {
                this.pixelOrigin_ = new google.maps.Point(TILE_SIZE / 2, TILE_SIZE / 2);
                this.pixelsPerLonDegree_ = TILE_SIZE / 360;
                this.pixelsPerLonRadian_ = TILE_SIZE / (2 * Math.PI);
            }

            MercatorProjection.prototype.fromLatLngToPoint = function(latLng, opt_point) {
                var me = this;
                var point = opt_point || new google.maps.Point(0, 0);
                var origin = me.pixelOrigin_;

                point.x = origin.x + latLng.lng() * me.pixelsPerLonDegree_;

                // Truncating to 0.9999 effectively limits latitude to 89.189. This is
                // about a third of a tile past the edge of the world tile.
                var siny = bound(Math.sin(degreesToRadians(latLng.lat())), -0.9999, 0.9999);
                point.y = origin.y + 0.5 * Math.log((1 + siny) / (1 - siny)) * -me.pixelsPerLonRadian_;
                return point;
            };

            MercatorProjection.prototype.fromPointToLatLng = function(point) {
                var me = this;
                var origin = me.pixelOrigin_;
                var lng = (point.x - origin.x) / me.pixelsPerLonDegree_;
                var latRadians = (point.y - origin.y) / -me.pixelsPerLonRadian_;
                var lat = radiansToDegrees(2 * Math.atan(Math.exp(latRadians)) - Math.PI / 2);
                return new google.maps.LatLng(lat, lng);
            };

            // Normalizes the coords that tiles repeat across the x axis (horizontally)
            // like the standard Google map tiles.
            function getNormalizedCoord(coord, zoom) {

                var y = coord.y;
                var x = coord.x;

                // tile range in one direction range is dependent on zoom level
                // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
                var numTiles = 1 << zoom;

                // don't repeat across y-axis (vertically)
                if (y < 0 || y >= numTiles) {
                    return null;
                }

                // repeat across x-axis
                if (x < 0 || x >= numTiles) {
                    x = modulo(x, numTiles);
                }

                return {
                    x: x,
                    y: y
                };
            }

            function createInfoWindowContent() {
                var numTiles = 1 << map.getZoom();
                var projection = new MercatorProjection();
                var worldCoordinate = projection.fromLatLngToPoint(chicago);
                var pixelCoordinate = new google.maps.Point(
                    worldCoordinate.x * numTiles,
                    worldCoordinate.y * numTiles);
                var tileCoordinate = new google.maps.Point(
                    Math.floor(pixelCoordinate.x / TILE_SIZE),
                    Math.floor(pixelCoordinate.y / TILE_SIZE));

                return [
                    'Chicago, IL',
                    'LatLng: ' + chicago.lat() + ' , ' + chicago.lng(),
                    'World Coordinate: ' + worldCoordinate.x + ' , ' +
                        worldCoordinate.y,
                        'Pixel Coordinate: ' + Math.floor(pixelCoordinate.x) + ' , ' +
                        Math.floor(pixelCoordinate.y),
                    'Tile Coordinate: ' + tileCoordinate.x + ' , ' +
                        tileCoordinate.y + ' at Zoom Level: ' + map.getZoom()
                ].join('<br>');
            }

            function initialize() {
                var mapType = new google.maps.ImageMapType({
                    getTileUrl: function(coord, zoom) {
                        var normalizedCoord = getNormalizedCoord(coord, zoom);
                        if (!normalizedCoord) {
                            return null;
                        }
                        var bound = Math.pow(2, zoom);
                        return 'http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw' +
                            '/' + zoom + '/' + normalizedCoord.x + '/' +
                            (bound - normalizedCoord.y - 1) + '.jpg';
                    },
                    tileSize: new google.maps.Size(TILE_SIZE, TILE_SIZE),
                    maxZoom: 9,
                    minZoom: 0,
                    radius: 1738000,
                    name: 'MyMap'
                });

                mapType.projection = new MercatorProjection(); // Remove and Markers Will Show Correctly

                var mapOptions = {
                    zoom: 3,
                    center: chicago
                };

                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                map.mapTypes.set('mymap', mapType);
                map.setMapTypeId('mymap');

                var coordInfoWindow = new google.maps.InfoWindow();
                coordInfoWindow.setContent(createInfoWindowContent());
                coordInfoWindow.setPosition(chicago);
                coordInfoWindow.open(map);

                google.maps.event.addListener(map, 'zoom_changed', function() {
                    coordInfoWindow.setContent(createInfoWindowContent());
                    coordInfoWindow.open(map);
                });

                for (var lat=-80; lat<85; lat+=10) {
                    for (var lng=-180; lng<180; lng+=10) {
                        var markerlatlng = new google.maps.LatLng(lat, lng);
                        var marker = new google.maps.Marker({
                            position: markerlatlng,
                            map: map,
                            title: "Moon Marker"
                        });
                    }
                }
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

Answer 1

投影没有任何问题，标记的渲染似乎存在错误，缺失的标记被瓷砖覆盖。

将标记的optimized - 选项设置为false，所有标记都会出现。

某些Google Map API v3自定义投影标记未显示

1 个答案: