Question

此js代码用于显示自定义的Google地图。我想为这段代码添加功能。 URL参数ID和show infowindow在Google地图上显示此ID。例如＆＃34; http://www.tabikobo.com/newyork/map/uptown/?=2962＆＃34;（此ID为2966）。。ID被加载为＆＃39; id＆＃39;在XMLdata中。

var uptownMap,defLng = -73.963245,defLat = 40.779438,
san ={

    init :
    function(){
        $(document).ready(function(){

            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=san.putGmap";
            document.body.appendChild(script);
        });


    },


    putGmap : 

    function(){

        var myLatlng = new google.maps.LatLng(defLat, defLng);
        var myOptions = {
            zoom: 15,
                            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        uptownMap = new google.maps.Map(document.getElementById("gmapArea"), myOptions);
        san.getXmlData();
    },
    getXmlData : function(){
        $.ajax({
            type: 'GET',
            cache: true,
            async: true,
            url: '/newyork/map_uptown_xml/',
            datatype: 'xml',
            success: san.parseXmlData
        });
    },
        parseXmlData: function (xml) {

        //a single infowindow for all markers
        var infowindow = new google.maps.InfoWindow({
            pixelOffset: new google.maps.Size(0, 10)
        });

        var i = 0,
            id, name, url, lat, lng, copy, lead, ename, tag;

        $("<ol/>")
            .attr('id', 'gmapAnchor')
            .appendTo('div#gmapController');
        $(xml)
            .find('item')
            .each(function (i) {
                i++;
                id = $(this)
                    .find('description id')
                    .text();
                name = $(this)
                    .find('description name')
                    .text();
                url = $(this)
                    .find('description path')
                    .text();
                lat = $(this)
                    .find('description lat')
                    .text();
                lng = $(this)
                    .find('description lng')
                    .text();
                tag = $(this)
                    .find('description tag')
                    .text();
                tag = tag.slice(5, 20);
                console.log(tag)


                var customIcons = {
                    hotel:
                    {
                        icon: 'http://www.tabikobo.com/newyork/img/icon_hotel.png'
                    },

                var icon = customIcons[tag] || {};



                var myLatLng = new google.maps.LatLng(lat, lng);
                var beachMarker = new google.maps.Marker({
                    position: myLatLng,
                    map: uptownMap,
                    icon: icon.icon,
                });


                var htmlTmpl = {
                    hotel:
                    {
                        content: '<div class="infoWinWrapper"><strong><a href="' +
                            url + '">' + name +
                            '</a></strong><br />' + ename +
                            '<br />' + lead + '</div>'
                    },
                };


                var htmlTmpl = htmlTmpl[tag] || {};



                //click-listener for marker
                google.maps.event.addListener(beachMarker, 'click',
                    function () {
                        //update the content
                        infowindow.setContent(
                            '<div class="hook">' + htmlTmpl
                            .content + '</div>');
                        infowindow.open(uptownMap, this);
                        google.maps.event.addListenerOnce(
                            infowindow, 'domready',
                            function () {
                                var l = $('.hook')
                                    .parent()
                                    .parent()
                                    .parent()
                                    .siblings()
                                    .addClass("infoBox");

                            });

                    });

                //Creat a Tag
                san.putData(name, url, lat, lng, i);
            });
    },
    putData : function(name, url, lat, lng, num){
        var x = num;
        x += '';
        if(x.length == 1){
            var y = '0' + x;
        }else {
            y = x;
        }


        san.setEvent();
    },
    setEvent : function(){
        $("ul#area_list li a").bind('mouseover', function(){
            $(this).parent().find('span.lat').text();

            var point = new google.maps.LatLng(
                $(this).parent().find('span.lat').text(), 
                $(this).parent().find('span.lng').text()
            );

            uptownMap.setZoom(17);
            uptownMap.setCenter(point);

        });
        $("#btnResetZoom a").bind('click', function(){
            var point = new google.maps.LatLng(defLat, defLng);
            uptownMap.setZoom(15);
            uptownMap.setCenter(point);
            return false;
        });
    }

}
window.onload = san.init();

Answer 1

我自己解决了！感谢。

            var PageMapID = location.href.split('?=');
            var PageMapID2 = PageMapID[PageMapID.length -1];

            if (id == PageMapID2) {
                $(document).ready(function(){

                    infowindow.open(uptownMap,beachMarker);
                    infowindow.setContent('<div class="hook">' + htmlTmpl.content + '</div>');

                    var latlng = new google.maps.LatLng(lat, lng);
                    uptownMap.setCenter(latlng);
                });
            }

show infowindow通过URL参数在Googlemaps上显示ID

1 个答案: