Question

我制作了一个新的应用，用户可以在地图中添加他访问过的地点，使用flask_googlemaps扩展程序从视图创建地图，我想在其上添加新标记这个从视图生成的地图。

标记我在视图中手动创建了它们，

views.py

@mapapp.route('/gomap')
def gomap():
    fullmap = Map(
        identifier="fullmap",
        varname="fullmap",
        style=(
            "height:100%;"
            "width:100%;"
            "top:0;"
            "left:0;"
            "position:absolute;"
            "z-index:200;"
        ),
        cluster=False,
        lat=42.8770413,
        lng=74.4517747,
        markers=[
            {
                'icon': '//maps.google.com/mapfiles/ms/icons/green-dot.png',
                'lat': 42.8770413,
                'lng': 74.4513254,
                'infobox': "Hello I am <b style='color:green;'>GREEN</b>!"
            }
        ],
        zoom="12"
    )
    return render_template('example_fullmap.html', fullmap=fullmap)

的index.html

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Flask Google Maps Full Map Example</title>
        <link rel="stylesheet" href="">
        {{fullmap.js}}
    </head>
    <body>
        <h1>Flask Google Maps Full Map Example</h1>
        {{ fullmap.html }}

        <script type="text/javascript">
            var map;

            function initialize() {
                var myLatlng = new google.maps.LatLng(42.8770413,74.4517747);

                var myOptions = {
                    zoom: 10,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    styles: [{"stylers": [{ "saturation": -100 }]}]
                };

                map = new google.maps.Map(document.getElementById("fullmap"), myOptions);

                function placeMarker(location) {
                    var text = prompt("Комментарий");
                    var marker = new google.maps.Marker({
                        position: location, 
                        map: map,
                        title: text,
                        icon: {
                            url: "http://www.suzuki.fr/media/image/interface/map-marker.png",
                            scaledSize: new google.maps.Size(42, 42)
                        }
                    });
                }

            }
            google.maps.event.addDomListener(window, "load", initialize());
        </script>

    </body>
</html>

如果我点击地图可以看到创建新标记的位置，但是如果我点击没有任何反应，实际上该功能没有自我调用，在页面源代码中我可以看到我的JavaScript代码但是在行动中没有发生的情况。

Answer 1

您需要执行placeMarker()功能。您可能需要使用自动执行功能：

(function placeMarker(location) {
                    var text = prompt("Комментарий");
                    var marker = new google.maps.Marker({
                        position: location, 
                        map: map,
                        title: text,
                        icon: {
                            url: "http://www.suzuki.fr/media/image/interface/map-marker.png",
                            scaledSize: new google.maps.Size(42, 42)
                        }
                    });
                }());

用上述自执行方法替换placeMarker()函数。确保将正确的位置传递给方法。

如何使用flask_googlemaps为地图添加新标记？

1 个答案: