Javascript 如何创建多个未预定义的图像Google地图标记数组

我正在尝试根据用户“选定”字段集成多个图像标记。例如，用户选择的苹果和另一个用户选择的橘子，地图将显示两个标记，一个是橘子，另一个是苹果。 我正在使用一个名为ACF的wordpress插件来处理字段选择 并使用这里的代码显示谷歌地图。 我能够改变图标，虽然问题是，即使我把这个条件，它仍然显示只有一个图像是在第一个条件“苹果”设置

---

如何基于多个用户选择显示带有多个图标的多个标记？

在JavaScript中，要检查条件是否为真，必须使用

=

而不是

=

。所以，应该是这样

if (fruitmarker == "apple") {
    icons = "/apple.png";
} else if (fruitmarker == "grapes") {
    icons = "/grapes.png";
} else {
    icons = "/oranges.png";
};

在代码中，第一个条件始终为true:）

(function ($) {
$.noConflict();
    /*
     *  render_map
     *
     *  This function will render a Google Map onto the selected jQuery element
     *
     *  @type   function
     *  @date   8/11/2013
     *  @since  4.3.0
     *
     *  @param  $el (jQuery element)
     *  @return n/a
     */

    function render_map($el) {

        // var
        var $markers = $el.find('.marker');


        // vars
        var args = {
            zoom: 16,
            center: new google.maps.LatLng(0, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map($el[0], args);


        // add a markers reference
        map.markers = [];

        // add markers
        $markers.each(function () {

            add_marker($(this), map);

        });

        // center map
        center_map(map);

    }

    /*
     *  add_marker
     *
     *  This function will add a marker to the selected Google Map
     *
     *  @type   function
     *  @date   8/11/2013
     *  @since  4.3.0
     *
     *  @param  $marker (jQuery element)
     *  @param  map (Google Map object)
     *  @return n/a
     */

    function add_marker($marker, map) {


        var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
        var icons =  IconURL + iconIMG;


        // create marker
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: icons


        });

        // add to array
        map.markers.push(marker);

        // if marker contains HTML, add it to an infoWindow
        if ($marker.html()) {
            // create info window
            var infowindow = new google.maps.InfoWindow({
                content: $marker.html()
            });

            // show info window when marker is clicked
            google.maps.event.addListener(marker, 'mouseover', function () {

                infowindow.open(map, marker);

            });
             google.maps.event.addListener(marker, 'mouseout', function () {

                infowindow.close(map, marker);

             });

        }

    }

    /*
     *  center_map
     *
     *  This function will center the map, showing all markers attached to this map
     *
     *  @type   function
     *  @date   8/11/2013
     *  @since  4.3.0
     *
     *  @param  map (Google Map object)
     *  @return n/a
     */

    function center_map(map) {

        // vars
        var bounds = new google.maps.LatLngBounds();

        // loop through all markers and create bounds
        $.each(map.markers, function (i, marker) {

            var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());

            bounds.extend(latlng);

        });

        // only 1 marker?
        if (map.markers.length == 1) {
            // set center of map
            map.setCenter(bounds.getCenter());
            map.setZoom(16);
        } else {
            // fit to bounds
            map.fitBounds(bounds);
        }

    }




    /*
     *  document ready
     *
     *  This function will render each map when the document is ready (page has loaded)
     *
     *  @type   function
     *  @date   8/11/2013
     *  @since  5.0.0
     *
     *  @param  n/a
     *  @return n/a
     */

    $(document).ready(function () {

        $('.acf-map').each(function () {

            render_map($(this));

        });

    });

})(jQuery);

if (fruitmarker == "apple") {
    icons = "/apple.png";
} else if (fruitmarker == "grapes") {
    icons = "/grapes.png";
} else {
    icons = "/oranges.png";
};