0

使用 Google Maps API v3，我尝试将 JSON 编码数据传递给我的sitesvar，该 var 保存地图上每个标记的位置信息。这是我为 JS 准备的：

// initialize variables
var infowindow = null;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var gmarkers = [];

$(document).ready(function () { initialize(); });

function initialize() {

    alert(busipress_map_vars.locations);

    // directions
    directionsDisplay = new google.maps.DirectionsRenderer();

    var centerMap = new google.maps.LatLng(busipress_map_vars.center_lat , busipress_map_vars.center_long);

    var myOptions = {
        zoom: 4,
        center: centerMap,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    setMarkers(map, sites);
    infowindow = new google.maps.InfoWindow({
            content: "loading..."
        });

    var start = busipress_map_vars.path_start;
    var end = busipress_map_vars.path_end;
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });

    directionsDisplay.setMap(map);
}

/*var sites = [
    ['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
    ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
    ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
    ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
];*/
var sites = [ busipress_map_vars.locations ];

function setMarkers(map, markers) {

    var defaultIcon = new google.maps.MarkerImage(busipress_map_vars.default_map_icon,
        // This marker is 32 pixels wide by 32 pixels tall.
        new google.maps.Size(busipress_map_vars.default_map_icon_width, busipress_map_vars.default_map_icon_height),
        // The origin for this image is 0,0.
        new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 0,32.
        new google.maps.Point((busipress_map_vars.default_map_icon_width / 2), busipress_map_vars.default_map_icon_height));
    var defaultShadow = new google.maps.MarkerImage(busipress_map_vars.map_icon_shadow,
        // The shadow image is larger in the horizontal dimension
        // while the position and offset are the same as for the main image.
        new google.maps.Size(busipress_map_vars.map_icon_shadow_width, busipress_map_vars.map_icon_shadow_height),
        new google.maps.Point(0,0),
        new google.maps.Point((busipress_map_vars.default_map_icon_width / 2), busipress_map_vars.map_icon_shadow_height));

    var activeIcon = new google.maps.MarkerImage(busipress_map_vars.active_map_icon,
        // This marker is 20 pixels wide by 32 pixels tall.
        new google.maps.Size(busipress_map_vars.active_map_icon_width, busipress_map_vars.active_map_icon_height),
        // The origin for this image is 0,0.
        new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 0,32.
        new google.maps.Point((busipress_map_vars.active_map_icon_width / 2), busipress_map_vars.active_map_icon_height));
    /*var shadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
        // The shadow image is larger in the horizontal dimension
        // while the position and offset are the same as for the main image.
        new google.maps.Size(59, 32),
        new google.maps.Point(0,0),
        new google.maps.Point(16, 32));
        // Shapes define the clickable region of the icon.
        // The type defines an HTML <area> element 'poly' which
        // traces out a polygon as a series of X,Y points. The final
        // coordinate closes the poly by connecting to the first
        // coordinate.*/
    var shape = {
        coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
        type: 'poly'
    };

    var myContentDiv = document.getElementById('map-details');//Reference to you DOM elem

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            icon: defaultIcon,
            shadow: defaultShadow,
            zIndex: sites[3],
            html: sites[4]
        });

        var contentString = "Some content";

        google.maps.event.addListener(marker, "click", function () {
            //alert(this.html);
            for (var i=0; i<gmarkers.length; i++) {
               gmarkers[i].setIcon(defaultIcon);
            }
            this.setIcon(activeIcon);
            //var myTemplate = '<h1>'+this.title+'</h1><p>'+this.html+'</p>';
            var myTemplate = this.html;
            //alert(marker.title);
            myContentDiv.innerHTML = myTemplate;//Inset this html inside link
            //infowindow.setContent(this.html);
            //infowindow.open(map, this);
        });
        gmarkers.push(marker);
    }
}

您可以在我的顶部附近看到将发送数据的警报，这是该警报的内容：

['Ankida Ridge Vineyards &#8211; The Vrooman Family Vineyard &#038; Winery',37.69603499999999,-79.17580859999998, 1, '<div id="post-45"><a href="http://localhost/jhtwp/business/ankida-ridge-vineyards-the-vrooman-family-vineyard-winery/">Ankida Ridge Vineyards &#8211; The Vrooman Family Vineyard &#038; Winery</a></div>'], ['DelFosse Vineyards &#038; Winery',37.85349230000001,-78.7816219, 2, '<div id="post-49"><a href="http://localhost/jhtwp/business/delfosse-vineyards-winery/">DelFosse Vineyards &#038; Winery</a></div>'], ['Democracy Vineyards',37.7598066,-78.87074580000001, 3, '<div id="post-56"><a href="http://localhost/jhtwp/business/democracy-vineyards/">Democracy Vineyards</a></div>'], ['Lazy Days Winery',37.6153147,-79.01673799999998, 4, '<div id="post-44"><a href="http://localhost/jhtwp/business/lazy-days-winery/">Lazy Days Winery</a></div>'], ['Mountain Cove Vineyards',37.7801633,-78.89298110000004, 5, '<div id="post-43"><a href="http://localhost/jhtwp/business/mountain-cove-vineyards/">Mountain Cove Vineyards</a></div>'], ['Pippin Hill Farm &#038; Vineyards',37.9586103,-78.66310809999999, 6, '<div id="post-52"><a href="http://localhost/jhtwp/business/pippin-hill-farm-vineyards/">Pippin Hill Farm &#038; Vineyards</a></div>'], ['Rebec Vineyards',37.6415525,-78.98114399999997, 7, '<div id="post-38"><a href="http://localhost/jhtwp/business/rebec-vineyards/">Rebec Vineyards</a></div>'], ['Sugarleaf Vineyards',37.939089,-78.61289899999997, 8, '<div id="post-54"><a href="http://localhost/jhtwp/business/sugarleaf-vineyards/">Sugarleaf Vineyards</a></div>']

我相信这具有 API 正在寻找的确切格式（来自我注释掉的示例）：

var sites = [
    ['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
    ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
    ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
    ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
];

但我在加载页面时不断收到此错误：

Uncaught Error: Invalid value for property <zIndex>: n

这是页面源中打印出来的 JSON 数据：

<script type='text/javascript'>
/* <![CDATA[ */
var busipress_map_vars = [];
busipress_map_vars = {"default_map_icon":"http:\/\/localhost\/jhtwp\/wp-content\/plugins\/busipress\/img\/red-dot.png","default_map_icon_width":32,"default_map_icon_height":32,"active_map_icon":"http:\/\/localhost\/jhtwp\/wp-content\/plugins\/busipress\/img\/blue-dot.png","active_map_icon_width":32,"active_map_icon_height":32,"map_icon_shadow":"http:\/\/localhost\/jhtwp\/wp-content\/plugins\/busipress\/img\/msmarker.shadow.png","map_icon_shadow_width":59,"map_icon_shadow_height":32,"center_lat":-34.397,"center_long":150.644,"path_start":"35.7719444, -78.6388889","path_end":"32.7763889,  -79.9311111","locations":"['Ankida Ridge Vineyards &#8211; The Vrooman Family Vineyard &#038; Winery',37.69603499999999,-79.17580859999998, 1, '<div id=\"post-45\"><a href=\"http:\/\/localhost\/jhtwp\/business\/ankida-ridge-vineyards-the-vrooman-family-vineyard-winery\/\">Ankida Ridge Vineyards &#8211; The Vrooman Family Vineyard &#038; Winery<\/a><\/div>'], ['DelFosse Vineyards &#038; Winery',37.85349230000001,-78.7816219, 2, '<div id=\"post-49\"><a href=\"http:\/\/localhost\/jhtwp\/business\/delfosse-vineyards-winery\/\">DelFosse Vineyards &#038; Winery<\/a><\/div>'], ['Democracy Vineyards',37.7598066,-78.87074580000001, 3, '<div id=\"post-56\"><a href=\"http:\/\/localhost\/jhtwp\/business\/democracy-vineyards\/\">Democracy Vineyards<\/a><\/div>'], ['Lazy Days Winery',37.6153147,-79.01673799999998, 4, '<div id=\"post-44\"><a href=\"http:\/\/localhost\/jhtwp\/business\/lazy-days-winery\/\">Lazy Days Winery<\/a><\/div>'], ['Mountain Cove Vineyards',37.7801633,-78.89298110000004, 5, '<div id=\"post-43\"><a href=\"http:\/\/localhost\/jhtwp\/business\/mountain-cove-vineyards\/\">Mountain Cove Vineyards<\/a><\/div>'], ['Pippin Hill Farm &#038; Vineyards',37.9586103,-78.66310809999999, 6, '<div id=\"post-52\"><a href=\"http:\/\/localhost\/jhtwp\/business\/pippin-hill-farm-vineyards\/\">Pippin Hill Farm &#038; Vineyards<\/a><\/div>'], ['Rebec Vineyards',37.6415525,-78.98114399999997, 7, '<div id=\"post-38\"><a href=\"http:\/\/localhost\/jhtwp\/business\/rebec-vineyards\/\">Rebec Vineyards<\/a><\/div>'], ['Sugarleaf Vineyards',37.939089,-78.61289899999997, 8, '<div id=\"post-54\"><a href=\"http:\/\/localhost\/jhtwp\/business\/sugarleaf-vineyards\/\">Sugarleaf Vineyards<\/a><\/div>']"};;
/* ]]> */
</script>

有人对此有任何想法吗？我真的很感激任何帮助。谢谢！

编辑

如果它有帮助（我可能会出错，但我不确定），这就是我要传递到每个位置以生成 API 期望格式的数据的内容：

function busipress_business_teaser($echo = true, $zindex) {

    $location = get_field('address');

    ob_start();
    echo '[\'';
    echo get_the_title();
    echo '\',';
    echo $location['coordinates'] . ', ';
    echo $zindex . ', ';
    echo '\'<div ';
    echo 'id="post-'.get_the_ID().'">';
    echo '<a href="'.get_permalink().'">';
    echo get_the_title();
    echo '</a>';
    echo '</div>\'';
    echo ']';
    $display = ob_get_contents();

    ob_end_clean();

    if($echo) {
        echo $display;
    }
    else {
        return $display;
    }

}

更新

如上所述将所有数据放在双引号中后，我的 HTML 源值是：

<script type='text/javascript'>
/* <![CDATA[ */
var busipress_map_vars = [];
busipress_map_vars = {"default_map_icon":"http:\/\/localhost\/jhtwp\/wp-content\/plugins\/busipress\/img\/red-dot.png","default_map_icon_width":32,"default_map_icon_height":32,"active_map_icon":"http:\/\/localhost\/jhtwp\/wp-content\/plugins\/busipress\/img\/blue-dot.png","active_map_icon_width":32,"active_map_icon_height":32,"map_icon_shadow":"http:\/\/localhost\/jhtwp\/wp-content\/plugins\/busipress\/img\/msmarker.shadow.png","map_icon_shadow_width":59,"map_icon_shadow_height":32,"center_lat":-34.397,"center_long":150.644,"path_start":"35.7719444, -78.6388889","path_end":"32.7763889,  -79.9311111","locations":"[\"Ankida Ridge Vineyards &#8211; The Vrooman Family Vineyard &#038; Winery\",37.69603499999999,-79.17580859999998, \"<div id=\"post-45\"><a href=\"http:\/\/localhost\/jhtwp\/business\/ankida-ridge-vineyards-the-vrooman-family-vineyard-winery\/\">Ankida Ridge Vineyards &#8211; The Vrooman Family Vineyard &#038; Winery<\/a><\/div>\"], [\"DelFosse Vineyards &#038; Winery\",37.85349230000001,-78.7816219, \"<div id=\"post-49\"><a href=\"http:\/\/localhost\/jhtwp\/business\/delfosse-vineyards-winery\/\">DelFosse Vineyards &#038; Winery<\/a><\/div>\"], [\"Democracy Vineyards\",37.7598066,-78.87074580000001, \"<div id=\"post-56\"><a href=\"http:\/\/localhost\/jhtwp\/business\/democracy-vineyards\/\">Democracy Vineyards<\/a><\/div>\"], [\"Lazy Days Winery\",37.6153147,-79.01673799999998, \"<div id=\"post-44\"><a href=\"http:\/\/localhost\/jhtwp\/business\/lazy-days-winery\/\">Lazy Days Winery<\/a><\/div>\"], [\"Mountain Cove Vineyards\",37.7801633,-78.89298110000004, \"<div id=\"post-43\"><a href=\"http:\/\/localhost\/jhtwp\/business\/mountain-cove-vineyards\/\">Mountain Cove Vineyards<\/a><\/div>\"], [\"Pippin Hill Farm &#038; Vineyards\",37.9586103,-78.66310809999999, \"<div id=\"post-52\"><a href=\"http:\/\/localhost\/jhtwp\/business\/pippin-hill-farm-vineyards\/\">Pippin Hill Farm &#038; Vineyards<\/a><\/div>\"], [\"Rebec Vineyards\",37.6415525,-78.98114399999997, \"<div id=\"post-38\"><a href=\"http:\/\/localhost\/jhtwp\/business\/rebec-vineyards\/\">Rebec Vineyards<\/a><\/div>\"], [\"Sugarleaf Vineyards\",37.939089,-78.61289899999997, \"<div id=\"post-54\"><a href=\"http:\/\/localhost\/jhtwp\/business\/sugarleaf-vineyards\/\">Sugarleaf Vineyards<\/a><\/div>\"]"};;
/* ]]> */
</script>

我还将 JS 切换为具有静态 zIndex 值（因为我认为它没有将 zIndex 作为整数传递）：

// initialize variables
var infowindow = null;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var gmarkers = [];

$(document).ready(function () { initialize(); });

function initialize() {


    alert(busipress_map_vars.locations);

    // directions
    directionsDisplay = new google.maps.DirectionsRenderer();

    var centerMap = new google.maps.LatLng(busipress_map_vars.center_lat , busipress_map_vars.center_long);

    var myOptions = {
        zoom: 4,
        center: centerMap,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    setMarkers(map, sites);
    infowindow = new google.maps.InfoWindow({
            content: "loading..."
        });

    var start = busipress_map_vars.path_start;
    var end = busipress_map_vars.path_end;
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });

    directionsDisplay.setMap(map);
}

/*var sites = [
    ['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
    ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
    ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
    ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
];*/
var sites = [ busipress_map_vars.locations ];

function setMarkers(map, markers) {

    var defaultIcon = new google.maps.MarkerImage(busipress_map_vars.default_map_icon,
        // This marker is 32 pixels wide by 32 pixels tall.
        new google.maps.Size(busipress_map_vars.default_map_icon_width, busipress_map_vars.default_map_icon_height),
        // The origin for this image is 0,0.
        new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 0,32.
        new google.maps.Point((busipress_map_vars.default_map_icon_width / 2), busipress_map_vars.default_map_icon_height));
    var defaultShadow = new google.maps.MarkerImage(busipress_map_vars.map_icon_shadow,
        // The shadow image is larger in the horizontal dimension
        // while the position and offset are the same as for the main image.
        new google.maps.Size(busipress_map_vars.map_icon_shadow_width, busipress_map_vars.map_icon_shadow_height),
        new google.maps.Point(0,0),
        new google.maps.Point((busipress_map_vars.default_map_icon_width / 2), busipress_map_vars.map_icon_shadow_height));

    var activeIcon = new google.maps.MarkerImage(busipress_map_vars.active_map_icon,
        // This marker is 20 pixels wide by 32 pixels tall.
        new google.maps.Size(busipress_map_vars.active_map_icon_width, busipress_map_vars.active_map_icon_height),
        // The origin for this image is 0,0.
        new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 0,32.
        new google.maps.Point((busipress_map_vars.active_map_icon_width / 2), busipress_map_vars.active_map_icon_height));
    /*var shadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
        // The shadow image is larger in the horizontal dimension
        // while the position and offset are the same as for the main image.
        new google.maps.Size(59, 32),
        new google.maps.Point(0,0),
        new google.maps.Point(16, 32));
        // Shapes define the clickable region of the icon.
        // The type defines an HTML &lt;area&gt; element 'poly' which
        // traces out a polygon as a series of X,Y points. The final
        // coordinate closes the poly by connecting to the first
        // coordinate.*/
    var shape = {
        coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
        type: 'poly'
    };

    var myContentDiv = document.getElementById('map-details');//Reference to you DOM elem

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            icon: defaultIcon,
            shadow: defaultShadow,
            zIndex: 1,
            html: sites[3]
        });

        var contentString = "Some content";

        google.maps.event.addListener(marker, "click", function () {
            //alert(this.html);
            for (var i=0; i<gmarkers.length; i++) {
               gmarkers[i].setIcon(defaultIcon);
            }
            this.setIcon(activeIcon);
            //var myTemplate = '<h1>'+this.title+'</h1><p>'+this.html+'</p>';
            var myTemplate = this.html;
            //alert(marker.title);
            myContentDiv.innerHTML = myTemplate;//Inset this html inside link
            //infowindow.setContent(this.html);
            //infowindow.open(map, this);
        });
        gmarkers.push(marker);
    }
}
4

1 回答 1

0

busipress_map_vars.locations当前是一个字符串。

固定的工作示例：http busipress_map_vars: //jsfiddle.net/doktormolle/p3bkU/

注意：您必须拖动地图，标记在路线上方。

标记循环中也有一些变化：

for (var i = 0; i < markers[0].length; i++) {
        var sites = markers[0][i];
        //more code
}

我建议使用 php-array 并使用 json_encode() 对其进行编码，而不是将 JSON 构建为字符串。

于 2012-10-07T10:26:02.303 回答