[英]How to create multiple image Google Map Marker Array which is not predefined
I am trying to integrate a multiple image marker based on the user "selected" field. 我试图基于用户“选定”字段集成多个图像标记。 For example the user selected Apple and the other user selected Oranges, the map then will display two markers which is orange and the other one is Apple.
例如,用户选择了Apple,另一个用户选择了Oranges,则地图将显示两个标记,即橙色,另一个标记为Apple。 I am using a wordpress plugin called ACF to handle the field selection and use the code in here http://www.advancedcustomfields.com/resources/field-types/google-map/ to display the google map.
我正在使用一个称为ACF的wordpress插件来处理字段选择,并在此处使用http://www.advancedcustomfields.com/resources/field-types/google-map/中的代码来显示Google地图。 I was able to change the the icons although the problem is even i put this condition it is still showing only one image which is set in the first condition "apple".
我什至可以更改图标,尽管问题是即使我把这种情况设置为它仍只显示在第一个条件“苹果”中设置的一个图像。
<?php /** /Template Name: Project */ get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="post_title">
<?php the_title(); ?>
</div>
<article>
<?php echo the_content(); ?>
</article>
<?php endwhile; ?>
<!--- Google Map Integration Map -->
<?php if( have_rows( 'project_location') ): ?>
<div class="acf-map">
<?php while ( have_rows( 'project_location') ) : the_row(); ?>
<?php
$location = get_sub_field( 'map_location');
$image = get_sub_field( 'project_image');
$sector = get_sub_field( 'project_sector');
if ($sector == "health") {
?>
<script>
iconIMG = "health_icn.png";
</script>
<?php
}
elseif ($sector == "solar") {
?>
<script>
iconIMG = "solar_icn.png";
</script>
<?php
}
else
{
?>
<script>
iconIMG = "water_icn.png";
</script>
<?php
}
?>
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
<!-- Bootstrap -->
<div class="row" style="margin:0;max-width:300px;">
<div class="col-md-6" style="padding:0;width:33%;">
<img src="<?php echo $image ?>" style="width:100px;" />
</div>
<div class="col-md-6" style="width:67%;"><strong>PROJECT NAME:</strong>
<br/>
<h4 style="font-size: 34px;overflow: hidden;text-transform:uppercase;"><?php the_sub_field('project_name'); ?></h4>
</div>
<div style="clear:both;"></div>
<p>
<?php the_sub_field( 'project_description'); ?>
</p>
</div <!--- End of Bootstrap -->
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<!------------------------->
<?php get_footer(); ?>
JS file that controls the map 控制地图的JS文件
(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);
How do I display multiple markers with multiple icons based on multiple user selection? 如何基于多个用户选择显示带有多个图标的多个标记?
In JavaScript, to check if a condition is true you have to use ==
instead of =
. 在JavaScript中,要检查条件是否为真,必须使用
==
而不是=
。 So, it should be 所以应该
if (fruitmarker == "apple") {
icons = "/apple.png";
} else if (fruitmarker == "grapes") {
icons = "/grapes.png";
} else {
icons = "/oranges.png";
};
In your code, the first condition is always true:) 在您的代码中,第一个条件始终为true :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.