javascript - Kendo 用户界面和谷歌地图

Question

我的问题相对简单，但过去几个小时我一直在努力想出一个解决方案。 http://chris1904.webege.com/#map你可以看到首先加载澳大利亚 map ，然后切换到加载美国 map 。我使用 Google Maps API V3 中的普通中心功能

var myCenter=new google.maps.LatLng(41.850033, -87.650052);

并且此位置在加载澳大利亚位置后加载。如果有任何提示和技巧，我将不胜感激。

Answer 1

问题与 mapMarker.js 相关，在初始化期间它会创建一个新的谷歌地图并将位置居中。如果你注意代码:

function initializeMap(){
    geocoder = new google.maps.Geocoder();
    var mapProp = {
        center:myCenter,
        zoom:5,
        //disableDefaultUI:true,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"),mapProp);

    setMarkers(map);

    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);  
    });
}

您可以看到它调用了 google.maps.Map 并将其放置在 HTML 元素 map_canvas 中，移除了您的移动应用程序布局，但它还定义了 center 作为美国的 myCenter。

你应该回顾一下你是如何初始化它的。我的建议是将 mapMarker.js 替换为:

var image = new google.maps.MarkerImage(
    'house.png',
    new google.maps.Size(32,37),    // size of the image
    new google.maps.Point(0,0), // origin, in this case top-left corner
    new google.maps.Point(16, 18)    // anchor, i.e. the point half-way along the bottom of the image
);

function setMarkers(map) {
    // Add markers to the map
    // address, lat und lng lokal speichern und abrufen, so dass leads nicht verloren gehen
    latArr = $.jStorage.get("latKey");
    lngArr = $.jStorage.get("lngKey");
    compAddressArr = $.jStorage.get("addressKey");
    // beim ersten Test gibt es die Arrays noch nicht, deshalb einen Wert geben
    if (latArr == null && lngArr == null && compAddressArr == null) {
        latArr = ["workaround"];
        lngArr = ["workaround"];
        compAddressArr = ["workaround"];
    }
    else {
        // wenn die Variablen schon gefuellt sind und mehr als einen Eintrag haben, weil der erste ein workaround ist, dann einen marker auf die map zeichnen
        var amount2 = latArr.length;
        console.log(amount2);
        console.log(lngArr);
        console.log(latArr);
        console.log(compAddressArr);
        if (amount2 > 1) {
            for (var i = 1; i < amount2; i++ ) {
                // marker/lead zeichnen
                var myLatLng = new google.maps.LatLng(latArr[i], lngArr[i]);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon: image,
                    title: compAddressArr[i],
                });
                var infowindowString = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                    '<h1 id="firstHeading" class="firstHeading">Chris Breuer</h1>'+
                    '<div id="bodyContent">'+
                    '<p><b>Phone Number</b>: (808)218-8241 <br>' +
                    '<p><b>Notes</b>:  Uluru, also referred to as Ayers Rock, is a large sandstone rock formation in the southern part of the Northern Territory, central Australia. Some random customer info here</p> '+
                    '<p><b>Address: </b>'+compAddressArr[i]+
                    '</p>'+
                    '</div>'+
                    '</div>';

                var infowindow = new google.maps.InfoWindow({
                    content: infowindowString
                });
                // so dass man das Fenster oefters oeffnen kann
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });
            }
        }
    }
}


function placeMarker(map, location) {
    var lat = location.lat();
    var lng = location.lng();

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

    // This is making the Geocode request
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
        if (status !== google.maps.GeocoderStatus.OK) {
            alert(status);
        }
        // This is checking to see if the Geoeode Status is OK before proceeding
        if (status == google.maps.GeocoderStatus.OK) {
            var address = (results[0].formatted_address);
            var addressArr = address.split(",");
            console.log(addressArr);
            var street = addressArr[0].trim();
            var city = addressArr[1].trim();
            var zipState = addressArr[2].trim();
            var state = zipState.trim().substr(0,2);
            var zip = zipState.trim().substr(3,8);
            var country = addressArr[3] ? addressArr[3].trim() : "N/A";
            var completeAddress = street+" "+city+" "+state+" "+zip+" "+country;
            var marker = new google.maps.Marker({
                position: location,
                map: map,
                icon: image,
                title: completeAddress,
            });

            var infowindowString = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Chris Breuer</h1>'+
                '<div id="bodyContent">'+
                '<p><b>Phone Number</b>: (808)218-8241 <br>' +
                '<p><b>Notes</b>:  Uluru, also referred to as Ayers Rock, is a large sandstone rock formation in the southern part of the Northern Territory, central Australia. Some random customer info here</p> '+
                '<p><b>Address</b>'+completeAddress+
                '</p>'+
                '</div>'+
                '</div>';

            var infowindow = new google.maps.InfoWindow({
                content: infowindowString
            });
            // so dass man das Fenster oefters oeffnen kann
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });
            // address, lat und lng sind gleiche Anzahl, deshalb nur eine amount
            // localStorage nutzen und in Array speichern
            var amount = latArr.length;
            compAddressArr[amount] = completeAddress;
            latArr[amount] = lat;
            lngArr[amount] = lng;
            console.log(latArr);
            console.log(lngArr);
            console.log(compAddressArr);
            $.jStorage.set("latKey", latArr);
            $.jStorage.set("lngKey", lngArr);
            $.jStorage.set("addressKey", compAddressArr);
        }
    });
}

和buildMap的作用是:

//initialize the google map
function buildMap(e) {
    var myOptions = {
        center   : new google.maps.LatLng(-34.397, 150.644),
        zoom     : 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var mapElement = $("#map_canvas");
    var container = e.view.content;

    var map = new google.maps.Map(mapElement[0], myOptions);

    setMarkers(map);

    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(map, event.latLng);
    });
}