Google maps y knockoutjs

Estoy haciendo una aplicación de una sola página donde en la segunda vista necesito mostrar el mapa de Google. Estoy usando la API de Google Maps donde se creará el objeto del mapa.Google maps y knockoutjs

var map = new google.maps.Map(mapId, { 
     zoom: 5, 
     center: new google.maps.LatLng(55, 11), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
});

El parámetro mapId me está dando un problema. La vista contiene un div con id que dice "mapId", pero no puedo obtener el id, por lo que no se puede mostrar el mapa. Intenté el enlace HTML, el enlace de atributos pero no funciona. Soy nuevo en el nocaut. Sugiera algún método

Fuente

2012-10-04 Empty

¿Puede ser más específico acerca de por qué no se puede obtener el id del elemento? ¿Es la segunda vista un modal/diálogo? –

la segunda vista es un modal. y PS- Estoy usando knockout.js. Para acceder a la identificación, estoy usando la sintaxis jquery sintaxis $ ('# mapId') [0], devuelve null o undefined. Cuando uso atrribute binding para id, el valor se asigna a la id, pero no representa un elemento div (que se requiere para el objeto de mapa) sino solo una cadena que es igual al valor id. – Empty

¿Podría publicar algún código en jsfiddle o en su pregunta? Estoy pensando si estás inicializando el objeto de mapa de google * antes * Knockout tiene la posibilidad de vincular el ID con tu elemento. –

Aquí hay un buen ejemplo del uso de Knockout JS y Google Maps. Con suerte, te ayudará a encaminarte por el buen camino. http://www.codeproject.com/Articles/387626/BikeInCity-2-KnockoutJS-JQuery-Google-Maps

Fuente

2012-11-28 17:36:42 Aligned

En lugar de mapId que querrá utilizar document.getElementById('map'), donde 'map' es el id del div que contiene el mapa (<div id="map"></div>). This jsFiddle debería ayudar.

Fuente

2012-12-21 01:47:02 Gady

Debe utilizar vinculante al igual que una costumbre:

ko.bindingHandlers.map = { 

    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var mapObj = ko.utils.unwrapObservable(valueAccessor()); 
     var latLng = new google.maps.LatLng(
      ko.utils.unwrapObservable(mapObj.lat), 
      ko.utils.unwrapObservable(mapObj.lng)); 
     var mapOptions = { center: latLng, 
          zoom: 5, 
          mapTypeId: google.maps.MapTypeId.ROADMAP}; 

     mapObj.googleMap = new google.maps.Map(element, mapOptions); 
    } 
};

Su HTML se vería así:

<div id="mapDiv" data-bind="style:{width:'300px',height:'300px'},map:myMap"></div>

Por último el modelo de vista:

function MyViewModel() { 
    var self = this; 
    self.myMap = ko.observable({ 
     lat: ko.observable(55), 
     lng: ko.observable(11)}); 
}

Aquí es una fiddle eso hace un poco más de lo que está pidiendo pero también debería funcionar bien para su caso.

Fuente

2013-04-30 17:48:25 schmidlop

¿cómo empujas más puntos en un solo mapa? intenté Array observable pero no funciona, ¿alguien puede ayudarme con eso? –

@kougiland: en el enlace he ocultado una referencia al objeto de mapa de google en la propiedad googleMap del modelo de vista ('myMap' en el ejemplo). Puede acceder a él como self.myMap(). GoogleMap y agregar marcadores directamente. Si desea un enlace que mantenga los marcadores del mapa en sincronía con una matriz observable, entonces debe hacer una pregunta diferente. – schmidlop

He modificado el enlace "schmidlop" para restablecer el marcador al cambiar las entradas (entradas largas lat) y el marcador siempre en el centro del mapa.

HTML

<input data-bind="value: mapOne().lat" /> 

<input data-bind="value: mapOne().lng" />

encuadernación, incluir esto en algún archivo js e incluirla en html.

ko.bindingHandlers.map = { 
     init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
      $("#" + element.getAttribute("id")).data("mapObj",""); 
      mapObj = ko.utils.unwrapObservable(valueAccessor()); 
      var latLng = new google.maps.LatLng(
       ko.utils.unwrapObservable(mapObj.lat), 
       ko.utils.unwrapObservable(mapObj.lng)); 
      var mapOptions = { center: latLng, 
           zoom: 12, 
           mapTypeId: google.maps.MapTypeId.ROADMAP}; 

      mapObj.googleMap = new google.maps.Map(element, mapOptions); 

      mapObj.marker = new google.maps.Marker({ 
       map: mapObj.googleMap, 
       position: latLng, 
       draggable: true 
      });  

      mapObj.onChangedCoord = function(newValue) { 
       var latLng = new google.maps.LatLng(
        ko.utils.unwrapObservable(mapObj.lat), 
        ko.utils.unwrapObservable(mapObj.lng)); 

       mapObj.googleMap.setCenter(latLng); 
       mapObj.marker.setPosition(latLng);     
      }; 

      mapObj.onMarkerMoved = function(dragEnd) { 
       var latLng = mapObj.marker.getPosition(); 
       mapObj.lat(latLng.lat()); 
       mapObj.lng(latLng.lng()); 
      }; 

      mapObj.lat.subscribe(mapObj.onChangedCoord); 
      mapObj.lng.subscribe(mapObj.onChangedCoord); 

      google.maps.event.addListener(mapObj.marker, 'dragend', mapObj.onMarkerMoved); 

      $("#" + element.getAttribute("id")).data("mapObj",mapObj); 
     } 
    };

Ver Modelo

self.mapOne = ko.observable();  


self.mapOne({'lat':ko.observable(87.22),'lng':ko.observable(27.22)});

Fuente

2017-04-21 11:11:12

Google maps y knockoutjs

Respuesta

Cuestiones relacionadas