Kendo UI和Google Maps(Kendo UI and Google Maps)
我的问题相对简单，但我在过去几个小时内一直试图想出一个解决方案。 http://chris1904.webege.com/#map你可以看到，首先加载了澳大利亚的地图，然后切换到加载美国地图。 我使用Google Maps API V3中的常规中心功能
var myCenter=new google.maps.LatLng(41.850033, -87.650052);这个位置在加载澳大利亚位置后加载。 我真的很感激任何提示和技巧。
My problem is relatively simple, but I have been trying for the last couple of hours to come up with a solution. http://chris1904.webege.com/#map you can see that first a map of Australia loads and after that it switches to loading an American map. I use the normal center function out of the Google Maps API V3
var myCenter=new google.maps.LatLng(41.850033, -87.650052);and this location loads after loading an Australian location. I would really appreciate any hints and tips.
最满意答案
问题与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); }); }The problem is related with mapMarker.js during the initialization it creates a new google map and centers the position. If you pay attention to the code:
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); }); }You can see that it invokes google.maps.Map and places it in the HTML element map_canvas removing your mobile application layout but it also defines center as myCenter that is in USA.
You should review how you initialize it. My recommendation is replacing your mapMarker.js by:
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); } }); }and buildMap function as:
//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); }); }Kendo UI和Google Maps(Kendo UI and Google Maps)我的问题相对简单，但我在过去几个小时内一直试图想出一个解决方案。 http://chris1904.webege.com/#map你可以看到，首先加载了澳大利亚的地图，然后切换到加载美国地图。 我使用Google Maps API V3中的常规中心功能
var myCenter=new google.maps.LatLng(41.850033, -87.650052);这个位置在加载澳大利亚位置后加载。 我真的很感激任何提示和技巧。
My problem is relatively simple, but I have been trying for the last couple of hours to come up with a solution. http://chris1904.webege.com/#map you can see that first a map of Australia loads and after that it switches to loading an American map. I use the normal center function out of the Google Maps API V3
var myCenter=new google.maps.LatLng(41.850033, -87.650052);and this location loads after loading an Australian location. I would really appreciate any hints and tips.
最满意答案
问题与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); }); }The problem is related with mapMarker.js during the initialization it creates a new google map and centers the position. If you pay attention to the code:
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); }); }You can see that it invokes google.maps.Map and places it in the HTML element map_canvas removing your mobile application layout but it also defines center as myCenter that is in USA.
You should review how you initialize it. My recommendation is replacing your mapMarker.js by:
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); } }); }and buildMap function as:
//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); }); }
发布评论