javascript – Kendo UI和Google Maps

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

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

这个位置在加载澳大利亚位置后加载.我真的很感激任何提示和技巧.

解决方法:

问题与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中,删除您的移动应用程序布局,但它也将中心定义为位于美国的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>: [phone] <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>: [phone] <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 mapfunction 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);    });}

来源：https://www.icode9.com/content-1-264951.html