Google maps api 3 正在尝试部署带有可单击标记的静态自定义地图_Google Maps Api 3

Google maps api 3 正在尝试部署带有可单击标记的静态自定义地图

google-maps-api-3

Google maps api 3 正在尝试部署带有可单击标记的静态自定义地图,google-maps-api-3,Google Maps Api 3,我有地图区域的静态图像，我需要用一个可点击的标记覆盖显示它们，上面有多个动态标记。标记必须对应于特定的地理位置。我会知道标记的地理坐标，但它们会经常变化静态图像必须在周围区域不可见的情况下显示（并且-无缩放、无拖动、无平移等）。例如，美国一个州的地图，没有边界州和多个特别放置的可点击标记。这使得谷歌地图api无法像地图样式定制那样使用（至少对于实际的地图显示）因此，我的问题是：在仍然利用google map api标记功能的情况下，有没有办法做到这一点？或者我必须重写自己版本的标记功能（单

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

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

因此，我的问题是：

在仍然利用google map api标记功能的情况下，有没有办法做到这一点？或者我必须重写自己版本的标记功能（单击、信息框等）

有没有办法加载带有标记的谷歌地图，然后用我的静态地图动态“交换”谷歌地图

想象一下：

（来源：）

可单击标记并根据特定地理代码定位标记。

您的答案是：

对

禁用控件：

样式化地图标记：

收听click/DOM事件：

我对这个问题感兴趣。但恐怕你不能做你想要的

至少，你可以用谷歌地图试试这些东西：
1.指定所需的边界（以匹配静态图像）——Google API
2.添加标记——谷歌API
3.禁用可拖动和滚轮缩放--谷歌API
4.在标记上添加单击事件--Google API
5.用静态图像替换地图——谷歌API

问题将是第一步，您很难指定GoogleMap的边界与静态图像的区域完全一致

你可以在谷歌地图上指定一个区域，但是基本上外层空间仍然是一个矩形（谷歌地图本身和LatLngBounds）

好的，我想我已经让它工作了。这个概念非常简单：

在地图区域上创建一个非谷歌地图覆盖，以隐藏正在加载的gmap。我必须这样做，否则，标记将无法正确加载

加载地图和标记后，从地图元素内部删除所有图像

将地图元素的背景图像设置为自定义地图

删除遮挡地图区域的覆盖

演示：

下面是代码（它可能比我解释得更好）：


简单标记
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
函数初始化（）{
//$（“#映射画布”）.hide（）；
var mylatng=new google.maps.LatLng（-25.363882131.044922）；
变量映射选项={
缩放：4，
中心：myLatlng，
disableDefaultUI:true，
可拖动：错误，
禁用双击缩放：真，
键盘快捷键：false，
mapTypeControl:false，
诺克利尔：没错，
overviewMapControl:错误，
泛控制：错误，
旋转控制：错误，
scaleControl:false，
滚轮：错误，
街景控制：错误，
动物控制：错误
}
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
marker=新的google.maps.marker({
职位：myLatlng，
地图：地图，
标题：“你好，世界！”
});
google.maps.event.addDomListener（标记，'click'，函数（）{alert（'click'）}）；
//google.maps.event.addDomListener（标记，'mouseover'，函数（）{alert（'mouseover'）}）；
google.maps.event.addDomListener（map、'idle'，removeMaps）；
}
函数removeMaps（）{
setTimeout（函数（）{
$（‘img’，‘映射画布’）.remove（）；
$（'.gm样式cc.gmnoprint.gm样式cc.gmnoprint'）.remove（）
$（“#地图画布”）.show（）；
$（“#地图画布”）.attr（'style'，'background:url(http://web2.nebdev.net/tasks/sandbox/untitled4.png)不重复左上角透明“）；
$（“#映射画布覆盖”）.hide（）；
log（marker.getVisible（））；
},1000);
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
加载。。。

是的，我知道地图选项、样式化标记和dom侦听器。这是给我带来问题的自定义地图部分。您可能正在考虑地图覆盖：要添加到下面的答案，您还可以检查如何添加。这将允许您隐藏所有内容，以便仅显示覆盖。同时检查

<!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>