创建用于在页面中嵌入Google地图的快捷代码

时间:2018-08-06 作者:maverick

我正在尝试创建一个短代码,让您可以在wordpress页面的任何位置嵌入google地图。

短代码必须能够传递两个属性(纬度和经度)

下面是已编辑的问题(我没有编辑整个问题,因为上面的问题有答案)

在我的案例中,添加短代码并不合适,因为有多个位置(地图上的标记)。

因此,我需要创建一个可以加载多个位置的地图。

这不是唯一的问题,有三个位置(例如,位置1、位置2、位置3),每个位置都包含子位置。页面加载时,地图应加载place1位置;单击其他位置选项卡(如place2)时,地图应隐藏place1位置并加载place2位置,place3也是如此。最后还有一个选项卡,用于加载所有位置和各自的位置。

google.maps.event.addDomListener(window, \'load\', init);
        function init() {
            // Basic options for a simple Google Map
            // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
            var mapOptions = {
                // How zoomed in you want the map to start at (always required)
                zoom: 6,

                // The latitude and longitude to center the map (always required)
                center: new google.maps.LatLng(62.1630198, 12.9895886), // New York

                // How you would like to style the map. 
                // This is where you would paste any style found on Snazzy Maps.
                styles: [{"featureType":"administrative","elementType":"all","stylers":
                [{"saturation":"-100"}]},{"featureType":"administrative.province",
                "elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape",
                "elementType":"all","stylers":[{"saturation":-100},{"lightness":65},
                {"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":
                [{"saturation":-100},{"lightness":"50"},{"visibility":"simplified"}]},
                {"featureType":"road","elementType":"all","stylers":[{"saturation":"-100"}]},
                {"featureType":"road.highway","elementType":"all","stylers":[{"visibility":
                "simplified"}]},{"featureType":"road.arterial","elementType":"all","stylers":
                [{"lightness":"30"}]},{"featureType":"road.local","elementType":"all","stylers":
                [{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":
                [{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"water",
                "elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},
                {"saturation":-97}]},{"featureType":"water","elementType":"labels","stylers":
                [{"lightness":-25},{"saturation":-100}]}]
            };

            // Get the HTML DOM element that will contain your map 
            // We are using a div with id="map" seen below in the <body>
            var mapElement = document.getElementById(\'map\');

            // Create the Google Map using our element and options defined above
            var map = new google.maps.Map(mapElement, mapOptions);

            // Let\'s also add a marker while we\'re at it
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(40.6700, -73.9400),
                map: map,
                title: \'Location One\'
            });
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(43.6700, -73.9400),
                map: map,
                title: \'Location Two\'
            });
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(46.6700, -73.9400),
                map: map,
                title: \'Location Three\'
            });
        }
我正在使用ACF为位置的经度和纬度值创建字段。

1 个回复
SO网友:Mohit Kumar

function bartag_func( $atts ) {
$atts = shortcode_atts( array(
    \'latitude\' => \'28.66\', // default value
    \'longitude\' => \'99.25\' // default value
), $atts, \'bartag\' );

return <div class="" latitude=" \'.$atts[\'latitude\'].\' " longitude=" \'.$atts[\'longitude\'].\' "></div>\'; 
} 

add_shortcode( \'bartag\', \'bartag_func\' );
现在,您可以使用以下短代码:

[bartag latitude=\'12.34\' latitude=\'12.34\']
将返回:

<div class="" latitude="12.34" longitude="12.34"></div>

https://codex.wordpress.org/Function_Reference/add_shortcode#Examples

结束

相关推荐

Shortcode with foreach

我不能对foreach使用shortcode。它给了我语法错误。我错在哪里?function create_galeri_shortcode($atts) { $atts = shortcode_atts( array( ), $atts, \'galeri\' ); if ( has_post_format( \'gallery\' )) { $images = get_post_