8
votes

Google Maps et Knockoutjs

Je fais une application de page unique où dans la deuxième vue, j'ai besoin d'afficher la carte Google. J'utilise l'API Google Maps où l'objet de la carte doit être créé. xxx

Le paramètre MAPID me donne un problème. La vue contient une DIV avec id indique "MAPID", mais je ne suis pas en mesure d'obtenir l'identifiant et que la carte ne peut donc pas être affichée. J'ai essayé la liaison HTML, la liaison d'attribut, mais cela ne fonctionne pas. Je suis nouveau à Knockout. Veuillez suggérer une méthode


3 commentaires

Pouvez-vous être plus précis sur la raison pour laquelle vous ne pouvez pas obtenir l'identifiant de l'élément? La deuxième vue est-elle un dialogue modal / dialogue?


La deuxième vue est un modal. et ps- j'utilise knockout.js. Pour accéder à l'ID, j'utilise la syntaxe de la syntaxe JQuery ('# MAPID') [0], il renvoie NULL ou non défini. Lorsque j'utilise une liaison Atrribute pour ID, la valeur est attribuée à l'ID, mais elle ne représente pas un élément div (qui est requis pour l'objet de la carte), mais seule une chaîne égale à la valeur d'identification.


Pourriez-vous publier un code sur Jsfiddle ou dans votre question? Je pense que si vous initialisez l'objet Google Map avant Knockout a une chance de lier l'ID à votre élément.


4 Réponses :


1
votes

Voici un bon exemple d'utilisation de Kockout JS et Google Maps. Espérons que cela vous aidera à vous mettre sur la bonne voie. http://www.codeproject.com/articles/387626 / Bikeincity-2-Knockoutjs-jQuery-Google-Maps


0 commentaires

0
votes

au lieu de MAPID Vous voudrez utiliser document.getelementByID ("carte") , où 'carte' est l'identifiant de la div contenant la carte (

). Ce jsfiddle devrait aider.

0 commentaires

20
votes

Vous devez utiliser une liaison personnalisée comme: xxx

Votre HTML ressemblerait à ceci: xxx

enfin votre modèle de vue: xxx

voici un violon Cela fait un peu plus que ce que vous demandez, mais devrait également fonctionner pour votre cas.


2 commentaires

Comment appuyez-vous alors plus de points dans une seule carte? J'ai essayé Observablarray, mais cela ne travaille peut-être que quelqu'un m'aider à ce sujet?


@Kougiland - Dans la liaison, j'ai refusé une refente à l'objet Google Map dans la propriété GoogleMap du modèle de vue ('myMap' dans l'exemple). Vous pouvez y accéder comme auto.mymap (). Googlemap et ajouter des marqueurs directement. Si vous souhaitez une liaison qui conserve les marqueurs de carte dans le synchronisation avec un tableau observable, vous devez poser une question différente.



1
votes

J'ai modifié la liaison "schmidlop" pour réinitialiser le marqueur sur la modification des entrées (entrées Lat longues) et le marqueur toujours au centre de la carte.

html p> xxx pre>

liaison , Inclure cela dans certains fichiers JS et l'inclure dans HTML. P>

self.mapOne = ko.observable();    


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


0 commentaires