Wijmo UI for the Web
マークの追加
Wijmo ユーザーガイド > ウィジェット > Maps > ユーザーシナリオ > マークの追加

Wijmaps では、地図コントロールにマークを追加できます。プレースマークを使用すると、レストラン、病院、博物館などの重要な場所を、地図上に直接マークを描画することで保存できます。

地図上の任意の場所をクリックすると、新規マークを追加できます。この方法で、いくつものマークを追加できます。新たに追加したマークは、1 つ前のマークに接続されます。既存のマークをクリックすると、このマークは地図から削除されます。

次のスクリプトは、マークの画像を追加します。また、この画像の高さと幅を設定し、地図に表示する矢印の種類を定義します。

スクリプト
コードのコピー 
<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijmaps"], function () {
        $(document).ready(function () {
                $("#maps").wijmaps({
                    zoom: 2,
                    layers: [
                    {
                        type: "vector",
                        data: { vectors: [] }
                    },
                    {
                        type: "vector",
                        data: { vectors: [] },
                        placemark: {
                            labelVisibility: "visible",
                            
                            image: "images/google_placemarker.png",
                            size: { width: 50, height: 35 },
                            pinPoint: { x: 24, y: 32 },
                            render: function (d) {
                                return $("<div style='width:50px;height:35px;cursor:pointer;'><img style='position:absolute;left:0px;top:0px;' src='../images/livewidgets/google_placemarker.png' /><div style='color:white;font-size:10pt;position:absolute;top:5px;width:100%;height:100%;text-align:center;'>" + d.vector.data.name + "</div></div>")
                                .on("click", function (e) {
                                    markclicked(e, d.vector.data);
                                });
                            }
                        }
                    }],
                    centerChanged:function() {
                        window.centerChanged = true;
                    }
                }).off(".layer")
                .on("click.layer", function (e) {
                    if (window.centerChanged || e.button !== 0) return;
                    var offset = $("#maps").offset();
                    var point = { x: e.pageX - offset.left, y: e.pageY - offset.top };
                    var geoPoint = $("#maps").wijmaps("viewToGeographic", point);
                    var layers = $("#maps").wijmaps("option", "layers");

                    var layerMark = layers[1];
                    var vector = {
                        type: "placemark",
                        coordinates: [geoPoint.x, geoPoint.y],
                        name: layerMark.data.vectors.length + 1 + ""
                    };
                    layerMark.data.vectors.push(vector);

                    var layerLine = layers[0];
                    var coords = [];
                    var vectors = layerMark.data.vectors;
                    for (var i = 0; i < vectors.length; i++) {
                        var mark = vectors[i];
                        coords.push(mark.coordinates[0]);
                        coords.push(mark.coordinates[1]);
                    }
                    var line = {
                        type: "polyline",
                        coordinates: coords,
                        stroke: "gray",
                        strokeWidth: "2",
                        strokeDashArray: "- "
                    };
                    layerLine.data.vectors[0] = line;

                    $("#maps").wijmaps("refreshLayers");
                })
                .on("mousedown.layer", function (e) {
                    window.centerChanged = false;
                });
            });
        });

        function markclicked(e, d) {
            e.stopPropagation();

            var layers = $("#maps").wijmaps("option", "layers");
            var layerMark = layers[1];
            var vectors = layerMark.data.vectors;
            var index = $.inArray(d, vectors);
            vectors.splice(index, 1);
            for (var i = 0; i < vectors.length; i++) {
                vectors[i].name = i + 1 + "";
            }

            var layerLine = layers[0];
            var coords = [];
            for (var i = 0; i < vectors.length; i++) {
                var mark = vectors[i];
                coords.push(mark.coordinates[0]);
                coords.push(mark.coordinates[1]);
            }
            var line = {
                type: "polyline",
                coordinates: coords,
                stroke: "gray",
                strokeWidth: "2",
                strokeDashArray: "- "
            };
            layerLine.data.vectors[0] = line;

            $("#maps").wijmaps("refreshLayers");

            return false;
        }
    </script>

関連トピック

参照

wijmaps メソッド

 

 

Copyright © GrapeCity inc. All rights reserved.