Question

我有地图区域的静态图像，我需要使用带有多个动态标记的可点击标记叠加显示它们。标记必须对应于特定的地理位置。我会知道标记的地理坐标，但它们会经常变化。

静态图像必须在没有任何周围区域可见的情况下显示（并且 - 无变焦，无拖动，无平移等）。例如，美国州的地图，没有边界状态和多个特别放置的可点击标记。这使得即使使用地图样式自定义也无法使用谷歌地图api（至少对于实际的地图显示）。

所以我的问题是：

有没有办法在利用谷歌地图api标记功能的同时做到这一点？或者我是否必须重写我自己的标记功能版本（点击，信息框等）？
有没有办法用标记加载谷歌地图，然后用我的静态地图“交换”谷歌地图？

想象一下：

http://web2.nebdev.net/tasks/sandbox/untitled3.png

标记可根据特定地理代码进行点击和定位。

Answer 1

你的答案是：

是
是

禁用控件：https://developers.google.com/maps/documentation/javascript/examples/control-disableUI

程式化地图标记：https://developers.google.com/maps/documentation/javascript/examples/icon-complex

聆听点击/ DOM事件：https://developers.google.com/maps/documentation/javascript/examples/event-domListener

Answer 2

我对这个问题很感兴趣。但我担心你无法做出你想要的东西。

至少，您可以使用Google地图尝试这些内容：
1.指定所需的边界（以匹配您的静态图像） - Google API
2.添加标记 - Google API
3.禁用可拖动和ScrollWheelZoom - Google API
4.在标记上添加点击事件 - Google API
5.用静态图片替换地图 - Google API

问题将是第1步，您几乎无法将Google地图的界限指定为静态图像的区域。

您可以在Google地图上指定一个区域，例如area layer，但基本上外层空间仍然是矩形（Google Map本身和LatLngBounds）

Answer 3

好的，我想我得上班了。这个概念非常简单：

在地图区域创建非Google地图叠加层，以便在加载时隐藏gmap。我必须这样做，否则，标记将无法正确加载。
加载地图和标记后，从地图元素中删除所有图像。
将地图元素的背景图片设置为自定义地图
删除遮盖地图区域的叠加层。

演示：http://web2.nebdev.net/tasks/sandbox/t1234.html

这是代码（它可能比我更好地解释）：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Simple markers</title>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script>
        function initialize() {
            //$('#map-canvas').hide();
            var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
            var mapOptions = {
                zoom: 4,
                center: myLatlng,
                disableDefaultUI: true,
                draggable: false,
                disableDoubleClickZoom: true,
                keyboardShortcuts: false,
                mapTypeControl: false,
                noClear: true,
                overviewMapControl: false,
                panControl: false,
                rotateControl: false,
                scaleControl: false,
                scrollwheel: false,
                streetViewControl: false,
                zoomControl: false
            }
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'Hello World!'
            });
            google.maps.event.addDomListener(marker,'click',function() {alert('Click')});
            //google.maps.event.addDomListener(marker,'mouseover',function() {alert('Mouseover')});
            google.maps.event.addDomListener(map,'idle',removeMaps);
        }

        function removeMaps() {
            window.setTimeout(function(){
                $('img','#map-canvas').remove();
                $('.gm-style-cc,.gmnoprint .gm-style-cc,.gmnoprint').remove()
                $('#map-canvas').show();
                $('#map-canvas').attr('style','background:url(http://web2.nebdev.net/tasks/sandbox/untitled4.png) no-repeat top left transparent');
                $('#map-canvas-overlay').hide();
                console.log(marker.getVisible());
            },1000);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-canvas" style="width:400px;height:400px;"></div>
        <div id="map-canvas-overlay" style="width:400px;height:400px;background:url() #CCC;position:absolute;top:0px;left:0px;z-index:10000">Loading...</div>
    </body>
</html>

尝试使用可点击标记部署静态自定义地图

3 个答案: