Google Maps Marqueur — définir la couleur d'arrière-plan

Je suis en utilisant une image PNG transparente comme mon marqueur, et tiens pour la zone transparente à être rempli d'une certaine couleur. J'ai déjà accompli ce à l'aide du marqueur ombres, mais ceux-ci ne fonctionnent pas avec le visuel d'actualisation (c'est à dire de la v3.14).

Merci!

  • Faire votre propre custom Revêtement.
  • J'ai regardé la documentation et de l'USGS exemple, mais restent indécis quant à la meilleure façon de mettre en œuvre cette approche. Toute aide serait appréciée.
  • J'ai un 50 points de récompense sur cette question, si vous avez le temps pour plus de précisions.
InformationsquelleAutor mustafa.0x | 2013-10-10
  1. 3

    Un truc qui pourrait être de manipuler l'image PNG avec PHP, si c'est une option. Le script suivant prend 4 paramètres: la source de l'image, la quantité de rouge, de vert et de bleu.

    image.php script:

    $src = $_GET['src'];

$r = $_GET['r'];
$g = $_GET['g'];
$b = $_GET['b'];

$image = @imagecreatefrompng($src);

//Create a new true color image with the same size
$w = imagesx($image);
$h = imagesy($image);
$color = imagecreatetruecolor($w, $h);

//Fill the new image with desired color
$bg = imagecolorallocate($color, $r, $g, $b);
imagefill($color, 0, 0, $bg);

//Copy original transparent image onto the new image
imagecopy($color, $image, 0, 0, 0, 0, $w, $h);

//Serve the image
header("Content-type: image/png");
imagepng($color);
imagedestroy($color);

    En javascript, appel image.php avec les paramètres souhaités:

    var marker = new google.maps.Marker({
    position: new google.maps.LatLng(0, 0),
    map: map,
    icon: 'path/to/image.php?src=http://maps.google.com/mapfiles/marker.png&r=100&g=125&b=255'
});

    Image d'origine:

    Google Maps Marqueur — définir la couleur d'arrière-plan

    De l'image de sortie:

    Google Maps Marqueur — définir la couleur d'arrière-plan

    • Je suis en espérant quelque chose en Javascript uniquement, mais merci, c'est une possibilité, je suppose.
    • Jetez un oeil à cet exemple: blog.mridey.com/2009/09/... il s'agit de créer un marqueur d'étiquette (OverlayView) sous le marqueur. Peut-être que vous pouvez adapter à votre besoins.
    • Merci, votre lien fourni suffisamment d'inspiration. 🙂
    InformationsquelleAutor MrUpsidown
  2. 1

    Je pense que le Docteur Molle est droit

    Il vous suffit juste d'appliquer le style css à l'image du marqueur.

    Pour rendre le marqueur de ne pas utiliser de la toile, vous devez définir optimisé pour de faux.

    var marker = new google.maps.Marker({
  position: new google.maps.LatLng(-34.397, 150.644),
  map: map,
  optimized: false,
  icon: "http://i.stack.imgur.com/su8w5.png"
});

    Avec juste css défini, vous pouvez appliquer l'arrière-plan de toutes les marques.

    img[src="path/to/custom/marker.png"] {
   background-color: black;
}

    Je suis à l'aide de Tomas exemple, et l'a modifié

    http://jsfiddle.net/Qrj2n/2/

    InformationsquelleAutor allenhwkim
  3. 1

    Définir la optimized-option de la marque à false, alors vous pouvez appliquer css personnalisé pour le marqueur-img, en utilisant le sélecteur:

    img[src="path/to/custom/marker.png"]

    <edit/>

    pour être en mesure d'utiliser la même image avec de multiples couleurs tout simplement ajouter de la couleur comme URI-fragment, alors vous obtiendrez un unique sélecteur de même avec la même image:

    JS:

    new google.maps.Marker({
  optimized: false,
  icon: 'path/to/custom/marker.png#red'
  //other properties
});

    CSS:

    #map-canvas img[src="path/to/custom/marker.png#red"]{
 background-color:red;
}

    Bien sûr, le CSS-les règles peuvent également être défini de façon dynamique via JS lorsque vous ne voulez pas coder en dur, voir: feuille de style.insertRule()

    Démo avec plusieurs arrière-plan de couleurs pour la même image(y compris les règles dynamiques d'insertion) :

    http://jsfiddle.net/doktormolle/vngp1hdr/

    • Cette solution n'est pas très approprié comme plusieurs repères utiliser le même marqueur de l'icône.
    • Vous ne savez pas si une version mise à jour de changer cela, mais je n'arrive pas à trouver toutes les balises img avec l'icône; peut-être qu'ils sont servis comme images d'arrière-plan, de sorte que cela ne fonctionnera plus?
    • Il travaille toujours pour moi, a ajouté une démo(à noter que la optimized-option des marqueurs doit être mis à false).
    InformationsquelleAutor Dr.Molle
  4. 0

    J'ai rencontré tout à fait le même problème. Je souhaite convertir mon fond de l'icône de transparent à la place.

    Je crois que le plus simple est de convertir une icône (png,jpg,bitmap) au format gif en rendant l'arrière-plan transparent. Vous pouvez utiliser les éléments suivants outil en ligne pour vous aider à le faire. Il est extrêmement facile.

    Ce qui suit est la exemple de l'icône avec la sortie de transparence de google map. Espérons que cela aide.

    InformationsquelleAutor ct.tan
  5. -2

    OK, où est la difficulté? Si vous souhaitez que le semi-transparent couleurs, il suffit de créer puis de l'icône, comme ici, j'ai 50% transparent vert:

    Google Maps Marqueur — définir la couleur d'arrière-plan

    Et puis le mettre sur la carte:

    http://jsfiddle.net/Qrj2n/

    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(-34.397, 150.644),
      map: map,
      icon: "http://i.stack.imgur.com/su8w5.png"
});
    • Je veux mettre de la couleur d'arrière-plan du marqueur, pas de l'icône. De cette façon, je n'ai pas à créer une icône pour chaque hex de couleur qui existe.
    • ensuite, vous devriez être plus clair dans votre question. Vous avez écrit *"je suis à l'aide d'une image PNG transparente comme mon marqueur, et tiens pour la zone transparente à être rempli d'une certaine couleur" - qui suggèrent que vous parlez de la zone transparente de l'PNG! Désolé, mais alors son mal en question écrite. Vous devez décrire ce que vous voulez et pourquoi, nous ne sommes pas là pour deviner votre esprit.
    • Haha, impertinent, n'est-ce pas? 🙂 Je n'ai pas downvote vous; pas besoin d'être sarcastique.
    • Je sais que ce n'était pas toi 🙂 Ce n'est pas une vengeance. C'est que j'ai vraiment pense que votre question est mal écrit. BTW, ma réponse serait une solution à la question comme vous l'avez écrit.
    InformationsquelleAutor TMS