带有 javascript 的多个标记图标的下拉选项

Question

我很困惑用选项值更改我的自定义图标映射。所以请帮我处理你的cmets。 :D

这是选项值

      <select name='type' id='type' onChange='document.getElementById("customicon").value="this.value"'>
  <option<?php if($place['type'] == "sekolahremaja") {?> selected="selected"<?php } ?>>Sekolah Remaja</option>
  <option<?php if($place['type'] == "jalanremaja") {?> selected="selected"<?php } ?>>Jalan Remaja</option>
  <option<?php if($place['type'] == "komunitas") {?> selected="selected"<?php } ?>>Komunitas</option>
  <option<?php if($place['type'] == "screening") {?> selected="selected"<?php } ?>>Screening</option>
  <option<?php if($place['type'] == "lembaga") {?> selected="selected"<?php } ?>>Lembaga</option>
  <option<?php if($place['type'] == "personal") {?> selected="selected"<?php } ?>>Personal</option>
  <option<?php if($place['type'] == "foto") {?> selected="selected"<?php } ?>>Foto</option>
        </select>

这是我的 javascript 代码

var customicon = {
    "sekolahremaja" : "sekolahremaja",
    "jalanremaja" : "jalanremaja",
    "komunitas" : "komunitas",
    "screening" : "screening",
    "lembaga" : "lembaga",
    "personal" : "personal",
    "events" : "events",
    };
var markerImage = "../images/icons/"+customicon+".png";

          <?php if ($_GET['place_id']){?>
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(<?=$place['lat']?>,<?=$place['lng']?>),
            map: map,
            animation: google.maps.Animation.DROP,
            draggable: true,
            icon: markerImage
          });

Answer 1

试试这个

<select name='type' id='type' onChange="changeImage(this.value)">
  <option value="sekolahremaja" <?php if($place['type'] == "sekolahremaja") {?> selected="selected"<?php } ?>>Sekolah Remaja</option>
  <option value="jalanremaja" <?php if($place['type'] == "jalanremaja") {?> selected="selected"<?php } ?>>Jalan Remaja</option>
  <option value="komunitas" <?php if($place['type'] == "komunitas") {?> selected="selected"<?php } ?>>Komunitas</option>
  <option value="screening" <?php if($place['type'] == "screening") {?> selected="selected"<?php } ?>>Screening</option>
  <option value="lembaga" <?php if($place['type'] == "lembaga") {?> selected="selected"<?php } ?>>Lembaga</option>
  <option value="personal" <?php if($place['type'] == "personal") {?> selected="selected"<?php } ?>>Personal</option>
  <option value="foto" <?php if($place['type'] == "foto") {?> selected="selected"<?php } ?>>Foto</option>
        </select>

您的 javascript 如下所示

var markerImage='';
function changeImage(value)
{
  markerImage = "../images/icons/"+customicon.value+".png";
} 

因为 customicon 是对象

现在markerImage 拥有您想要显示为标记图标的图像网址

还检查position: new google.maps.LatLng(<?=$place['lat']?>,<?=$place['lng']?>) 在这里您需要将lat 和lng 转换为如下数字

 position: new google.maps.LatLng(Number(<?=$place['lat']?>),Number(<?=$place['lng']?>))

Answer 2

我不确定这是否是您要找的。​​p>

<select name='type' id='type' onchange='changeMarker(this.value)'>
  <option value="sekolahremaja">Sekolah Remaja</option>
  ...
  <option value="foto">Foto</option>
</select>

javascript 的东西

function changeMarker(v){
  var customicon = {
    "sekolahremaja" : "sekolahremaja",
    "jalanremaja" : "jalanremaja",
    "komunitas" : "komunitas",
    "screening" : "screening",
    "lembaga" : "lembaga",
    "personal" : "personal",
    "events" : "events",
    };
  var markerImage = "../images/icons/"+customicon[v]+".png";
  var marker = new google.maps.Marker({
            position: new google.maps.LatLng(<?=$place['lat']?>,<?=$place['lng']?>),
            map: map,
            animation: google.maps.Animation.DROP,
            draggable: true,
            icon: markerImage
          });
}