1

大家好,我正在尝试使用 ammap 构建交互式路线图现在我已经使用 ammap 构建了交互式地图

http://jsfiddle.net/rizwin/jmM28/1/

var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";
            // svg path for plane icon
            var planeSVG = "M19.671,8.11l-2.777,2.777l-3.837-0.861c0.362-0.505,0.916-1.683,0.464-2.135c-0.518-0.517-1.979,0.278-2.305,0.604l-0.913,0.913L7.614,8.804l-2.021,2.021l2.232,1.061l-0.082,0.082l1.701,1.701l0.688-0.687l3.164,1.504L9.571,18.21H6.413l-1.137,1.138l3.6,0.948l1.83,1.83l0.947,3.598l1.137-1.137V21.43l3.725-3.725l1.504,3.164l-0.687,0.687l1.702,1.701l0.081-0.081l1.062,2.231l2.02-2.02l-0.604-2.689l0.912-0.912c0.326-0.326,1.121-1.789,0.604-2.306c-0.452-0.452-1.63,0.101-2.135,0.464l-0.861-3.838l2.777-2.777c0.947-0.947,3.599-4.862,2.62-5.839C24.533,4.512,20.618,7.163,19.671,8.11z";
        AmCharts.makeChart("mapdiv", {
            type: "map",
            pathToImages: "../ammap/images/",

            dataProvider: {
                map: "worldLow",
                linkToObject: "Sharjah",
                images: [{
                        id: "Sharjah",
                        color: "#000000",
                        svgPath: targetSVG,
                        title: "Sharjah",
                        latitude: 25.340225,
                        longitude: 55.395813,
                        scale: 1.5,
                        zoomLevel: 1.36,
                        zoomLongitude: -19.1341,
                        zoomLatitude: 49.1712,

                        lines: [{
                            latitudes: [25.340225, 50.4422],
                            longitudes: [55.395813, 30.5367]
                        }, {
                            latitudes: [25.340225, 8.475726],
                            longitudes: [55.395813, 76.949615]
                        }, {
                            latitudes: [25.340225, 10.519185,],
                            longitudes: [55.395813, 76.222458]
                        }, {
                            latitudes: [25.340225, 40.4167],
                            longitudes: [55.395813, -3.7033]
                        }, {
                            latitudes: [25.340225, 46.0514],
                            longitudes: [55.395813, 14.5060]
                        }, {
                            latitudes: [25.340225, 48.2116],
                            longitudes: [55.395813, 17.1547]
                        }, {
                            latitudes: [25.340225, 44.8048],
                            longitudes: [55.395813, 20.4781]
                        }, {
                            latitudes: [25.340225, 55.7558],
                            longitudes: [55.395813, 37.6176]
                        }, {
                            latitudes: [25.340225, 38.7072],
                            longitudes: [55.395813, -9.1355]
                        }, {
                            latitudes: [25.340225, 54.6896],
                            longitudes: [55.395813, 25.2799]
                        }, {
                            latitudes: [25.340225, 64.1353],
                            longitudes: [55.395813, -21.8952]
                        }, {
                            latitudes: [25.340225, 40.4300],
                            longitudes: [55.395813, -74.0000]
                        }],

                        images: [{
                            label: "Sharjah Charity International",
                            //svgPath: planeSVG,
                            left: 100,
                            top: 45,
                            labelShiftY: 5,
                            color: "green",
                            labelColor: "green",
                            labelRollOverColor: "#CC0000",
                            labelFontSize: 20
                        }, {
                            label: "Sharjah Charity International",
                            left: 106,
                            top: 70,
                            labelColor: "green",
                            labelRollOverColor: "#CC0000",
                            labelFontSize: 11,
                            linkToObject: "vilnius"
                        }]
                    },

                    {
                        id: "vilnius",
                        color: "#000000",
                        svgPath: targetSVG,
                        title: "Vilnius",
                        latitude: 54.6896,
                        longitude: 25.2799,
                        scale: 1.5,
                        zoomLevel: 4.92,
                        zoomLongitude: 15.4492,
                        zoomLatitude: 50.2631,

                        lines: [{
                            latitudes: [54.6896, 50.8371],
                            longitudes: [25.2799, 4.3676]
                        }, {
                            latitudes: [54.6896, 59.9138],
                            longitudes: [25.2799, 10.7387]
                        }, {
                            latitudes: [54.6896, 40.4167],
                            longitudes: [25.2799, -3.7033]
                        }, {
                            latitudes: [54.6896, 50.0878],
                            longitudes: [25.2799, 14.4205]
                        }, {
                            latitudes: [54.6896, 48.2116],
                            longitudes: [25.2799, 17.1547]
                        }, {
                            latitudes: [54.6896, 44.8048],
                            longitudes: [25.2799, 20.4781]
                        }, {
                            latitudes: [54.6896, 55.7558],
                            longitudes: [25.2799, 37.6176]
                        }, {
                            latitudes: [54.6896, 37.9792],
                            longitudes: [25.2799, 23.7166]
                        }, {
                            latitudes: [54.6896, 54.6896],
                            longitudes: [25.2799, 25.2799]
                        }, {
                            latitudes: [54.6896, 51.5002],
                            longitudes: [25.2799, -0.1262]
                        }, {
                            latitudes: [54.6896, 53.3441],
                            longitudes: [25.2799, -6.2675]
                        }],

                        images: [{
                            label: "Masjid",
                            //svgPath: planeSVG,
                            left: 100,
                            top: 45,
                            labelShiftY: 5,
                            color: "#CC0000",
                            labelColor: "#CC0000",
                            labelRollOverColor: "#CC0000",
                            labelFontSize: 20
                        }, {
                            label: "show masjids",
                            left: 106,
                            top: 70,
                            labelColor: "#000000",
                            labelRollOverColor: "#CC0000",
                            labelFontSize: 11,
                            linkToObject: "london"
                        }]
                    }, {
                        svgPath: targetSVG,
                        title: "Brussels",
                                                    description:"Masjid in brussels",
                        latitude: 50.8371,
                        longitude: 4.3676
                    }, {
                        svgPath: targetSVG,
                        title: "Prague",
                                                    description:"Masjid in Prague",
                        latitude: 50.0878,
                        longitude: 14.4205
                    }, {
                        svgPath: targetSVG,
                        title: "Athens",
                                                    description:"Masjid in Athens",
                        latitude: 37.9792,
                        longitude: 23.7166
                    }, {
                        svgPath: targetSVG,
                        title: "Reykjavik",
                                                    description:"Masjid in Reykjavik",
                        latitude: 64.1353,
                        longitude: -21.8952
                    }, {
                        svgPath: targetSVG,
                        title: "Dublin",
                                                    description:"Masjid in Dublin",
                        latitude: 53.3441,
                        longitude: -6.2675
                    }, {
                        svgPath: targetSVG,
                        title: "Oslo",
                        latitude: 59.9138,
                        longitude: 10.7387
                    }, {
                        svgPath: targetSVG,
                        title: "Lisbon",
                        latitude: 38.7072,
                        longitude: -9.1355
                    }, {
                        svgPath: targetSVG,
                        title: "Moscow",
                        latitude: 55.7558,
                        longitude: 37.6176
                    }, {
                        svgPath: targetSVG,
                        title: "Belgrade",
                        latitude: 44.8048,
                        longitude: 20.4781
                    }, {
                        svgPath: targetSVG,
                        title: "Bratislava",
                        latitude: 48.2116,
                        longitude: 17.1547
                    }, {
                        svgPath: targetSVG,
                        title: "Ljubljana",
                        latitude: 46.0514,
                        longitude: 14.5060
                    }, {
                        svgPath: targetSVG,
                        title: "Madrid",
                        latitude: 40.4167,
                        longitude: -3.7033
                    }, {
                        svgPath: targetSVG,
                        title: "Thrissur(INDIA)",
                        latitude: 10.519185,
                        longitude: 76.222458
                    }, {
                        svgPath: targetSVG,
                        title: "Thiruvanthapuram(INDIA)",
                                                    description:"our masjids are located in tiruvandapuram",
                                                    imageurl:"http://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Jama_Masjid%2C_Delhi%2C_morning_view.jpg/800px-Jama_Masjid%2C_Delhi%2C_morning_view.jpg",
                                                    latitude: 8.475726,
                        longitude: 76.949615
                    }, {
                        svgPath: targetSVG,
                        title: "Kiev",
                        latitude: 50.4422,
                        longitude: 30.5367
                    }, {
                        svgPath: targetSVG,
                        title: "Paris",
                        latitude: 48.8567,
                        longitude: 2.3510
                    }, {
                        svgPath: targetSVG,
                        title: "New York",
                        latitude: 40.43,
                        longitude: -74
                    }
                ]
            },

            areasSettings: {
                unlistedAreasColor: "#cdda32"
            },

            imagesSettings: {
                color: "#CC0000",
                rollOverColor: "#CC0000",
                selectedColor: "#000000"
            },

            linesSettings: {
                color: "#CC0000",
                alpha: 0.4
            },


            backgroundZoomsToTop: true,
            linesAboveImages: true
        });

当我单击该点时,它将加载一个描述窗口

我想在描述窗口中加载图像,就像这个一样

http://rizwinazeeznaina.in/charity/new.png

有人可以帮忙,这样我就可以在描述窗口中加载图像

4

0 回答 0