Google Maps API -- 点击时每个标记的唯一活动图标 [英] Google Maps API -- Unique Active Icon per marker on click

问题描述

我有以下使用 Google Maps API 的 JS:

//初始化变量var infowindow = null;var 方向显示；var directionService = new google.maps.DirectionsService();var gmarkers = [];$(document).ready(function () { initialize(); });函数初始化(){//方向方向显示 = 新 google.maps.DirectionsRenderer();var centerMap = new google.maps.LatLng(busipress_map_vars.center_lat, busipress_map_vars.center_long);var myOptions = {缩放:4，中心:中心地图，mapTypeId: google.maps.MapTypeId.TERRAIN}var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);setMarkers(地图，站点)；信息窗口 = 新的 google.maps.InfoWindow({内容:加载中……"});var start = busipress_map_vars.path_start;var end = busipress_map_vars.path_end;无功请求 = {起源:开始，目的地:结束，旅行模式:google.maps.DirectionsTravelMode.DRIVING};路线Service.route(请求，功能(响应，状态){如果(状态 == google.maps.DirectionsStatus.OK){DirectionsDisplay.setDirections(响应)；}});DirectionsDisplay.setMap(地图);}/*** 显示位置*/var 站点 = busipress_map_vars.locations;/*** 在地图上设置标记*/函数 setMarkers(地图，标记){//默认图标var defaultIcon = new google.maps.MarkerImage(busipress_map_vars.default_map_icon,//此标记宽 32 像素，高 32 像素.新的 google.maps.Size(busipress_map_vars.default_map_icon_width, busipress_map_vars.default_map_icon_height)，//此图像的原点是 0,0.新的 google.maps.Point(0,0),//此图像的锚点是 0,32 处的旗杆底部.新 google.maps.Point((busipress_map_vars.default_map_icon_width/2), busipress_map_vars.default_map_icon_height));//默认阴影var shadow = new google.maps.MarkerImage(busipress_map_vars.map_icon_shadow,//阴影图像在水平维度上更大//而位置和偏移量与主图像相同.新的 google.maps.Size(busipress_map_vars.map_icon_shadow_width，busipress_map_vars.map_icon_shadow_height)，新的 google.maps.Point(0,0),新的 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,//此标记宽 20 像素，高 32 像素.新的 google.maps.Size(busipress_map_vars.active_map_icon_width, busipress_map_vars.active_map_icon_height)，//此图像的原点是 0,0.新的 google.maps.Point(0,0),//此图像的锚点是 0,32 处的旗杆底部.新 google.maps.Point((busipress_map_vars.active_map_icon_width/2), busipress_map_vars.active_map_icon_height));变量形状 = {坐标:[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],类型:'聚'};for (var i = 0; i 

我试图做的是为每个标记的每个站点(因为它是唯一的)映射一个图标，然后单击，将其更改为该站点的活动状态.因此，将其更改为活动图标似乎可行，但使用该重置功能(将所有其他图标更改回默认图标)会将其转换回站点图标之一，而不是每个图标.有人对为什么会发生这种情况有任何想法吗?

此外，当我第一次深入研究时，我使用了 defaultIcon 例如(您可以在点击操作中看到它被注释掉.因为我现在传入图标的 URL通过本地化 Javascript，有什么我可以传递到 new google.maps.Marker 就大小、原点和点而言的，就像在原始 var defaultIcon 声明中所做的那样.例如，sites[4][0] 将有一个图像 URL，但 sites[4][1] 将有宽度，而 sites[4][2] 有高度.如果我没有任何东西，我实际上不确定它会发生什么，所以在这里有点困惑.谢谢！

更新

我想问题可能出在我声明变量的地方，所以我将它们添加到 for 循环 并调整地图标记以使用这些:

//初始化变量var infowindow = null;var 方向显示；var directionService = new google.maps.DirectionsService();var gmarkers = [];$(document).ready(function () { initialize(); });函数初始化(){//方向方向显示 = 新 google.maps.DirectionsRenderer();var centerMap = new google.maps.LatLng(busipress_map_vars.center_lat, busipress_map_vars.center_long);var myOptions = {缩放:4，中心:中心地图，mapTypeId: google.maps.MapTypeId.TERRAIN}var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);setMarkers(地图，站点)；信息窗口 = 新的 google.maps.InfoWindow({内容:加载中……"});var start = busipress_map_vars.path_start;var end = busipress_map_vars.path_end;无功请求 = {起源:开始，目的地:结束，旅行模式:google.maps.DirectionsTravelMode.DRIVING};路线Service.route(请求，功能(响应，状态){如果(状态 == google.maps.DirectionsStatus.OK){DirectionsDisplay.setDirections(响应)；}});DirectionsDisplay.setMap(地图);}/*** 显示位置*/var 站点 = busipress_map_vars.locations;/*** 在地图上设置标记*/函数 setMarkers(地图，标记){for (var i = 0; i 

但它仍然将 defaultIcon 更改为一个，而不是单个的 defaultIcon 图像.这可能与另一个 for 循环内的 for 循环有关，但我不太确定.

解决方案

需要更改点击监听功能:

 google.maps.event.addListener(marker, "click", function () {for (var i = 0; i < gmarkers.length; i++) {gmarkers[i].setIcon(defaultIcon);}this.setIcon(activeIcon);infowindow.setContent(this.html);infowindow.open(map, this);});

您需要为每个标记保存唯一"图标并将其改回那个图标，而不是默认图标.最简单的可能是将其保存为标记的属性(即marker.myDefaultIcon)，然后您可以执行以下操作:

gmarkers[i].setIcon(gmarkers[i].myDefaultIcon);

jsfiddle(再次从您的 上一个问题)

更新:我在您提供的链接上收到一个 javascript 错误:

错误:标记[i]未定义源文件:http://zslabs.com/jhtwp/wp-content/plugins/busipress/js/map.1349993292.js线路:105

105 是这一行:this.setIcon(marker[i].myActiveIcon);

这里:

 google.maps.event.addListener(marker, "click", function () {for (var i = 0; i < gmarkers.length; i++) {gmarkers[i].setIcon(gmarkers[i].myDefaultIcon);}this.setIcon(marker[i].myActiveIcon);infowindow.setContent(this.html);infowindow.open(map, this);});

我想你想要 this.myActiveIcon.

jsfiddle 说明概念(点"是活动的，没有点是默认的)

I have the following JS using the Google Maps API:

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

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

function initialize() {

    // 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);
}

/**
 * show locations
 */
var sites = busipress_map_vars.locations;

/**
 * set markers on map
 */
function setMarkers(map, markers) {

    // default icon
    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));

    // default shadow
    var shadow = 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));

    // active icion
    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 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'
    };

    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: sites[4][0],
            shadow: sites[6][0],
            zIndex: 1,
            html: sites[3]
        });

        google.maps.event.addListener(marker, "click", function () {
            for (var i = 0; i < gmarkers.length; i++) {
               //gmarkers[i].setIcon(defaultIcon);
               gmarkers[i].setIcon(sites[4][0]);
            }
            //this.setIcon(activeIcon);
            this.setIcon(sites[5][0]);

            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
        gmarkers.push(marker);
    }
}

What I'm attempting to do is map an icon for each site (as it is unique) for each marker and then on-click, change it to the active-state of that site. So, changing it to the active icon seems to work, but using that reset function (to change all of the others back to the default icon) it converts it back to one of the site's icons, not each individual one. Anyone have any thoughts on why this may be happening?

Also, when I first dug into this, I was using defaultIcon for example (you can see it commented out in the click-action. Since I'm now passing in the URL of the icon via localizing the Javascript, is there anything I can pass into new google.maps.Marker as far as the size, origin and point as done in the original var defaultIcon declaration. For example, sites[4][0] is just going to have an image URL, but sites[4][1] is going to have the width, and sites[4][2] has the height. I'm not actually sure what it'd be going off of without me having anything there, so a little confused here. Thanks!

Update

I was thinking the issue might be where I'm declaring the variables, so I added them into the for loop and adjusted the map markers to use these:

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

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

function initialize() {

    // 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);
}

/**
 * show locations
 */
var sites = busipress_map_vars.locations;

/**
 * set markers on map
 */
function setMarkers(map, markers) {

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

        // default icon
        var defaultIcon = new google.maps.MarkerImage(sites[4][0],
            // This marker is 32 pixels wide by 32 pixels tall.
            new google.maps.Size(sites[4][1], sites[4][2]),
            // 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((sites[4][1] / 2), sites[4][2]));

        // default shadow
        var shadow = new google.maps.MarkerImage(sites[6][0],
            // 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(sites[6][1], sites[6][2]),
            new google.maps.Point(0,0),
            new google.maps.Point((sites[6][1] / 2), sites[6][2]));

        // active icion
        var activeIcon = new google.maps.MarkerImage(sites[5][0],
            // This marker is 20 pixels wide by 32 pixels tall.
            new google.maps.Size(sites[5][1], sites[5][2]),
            // 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((sites[5][1] / 2), sites[5][2]));
        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 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: shadow,
            zIndex: 1,
            html: sites[3]
        });

        google.maps.event.addListener(marker, "click", function () {
            for (var i = 0; i < gmarkers.length; i++) {
               gmarkers[i].setIcon(defaultIcon);
            }
            this.setIcon(activeIcon);

            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
        gmarkers.push(marker);
    }
}

but it stil changes the defaultIcon to one for all, instead of the individual defaultIcon images. This may have something to do with the for loop inside of the other for loop, but I'm not quite sure.

解决方案

You need to change the click listener function:

    google.maps.event.addListener(marker, "click", function () {
        for (var i = 0; i < gmarkers.length; i++) {
           gmarkers[i].setIcon(defaultIcon);
        }
        this.setIcon(activeIcon);

        infowindow.setContent(this.html);
        infowindow.open(map, this);
    });

You need to save the "unique" icon for each marker and change it back to that one, rather than the defaultIcon. Simplest would probably be to save it as a property of the marker (i.e. marker.myDefaultIcon), then you can do something like this:

gmarkers[i].setIcon(gmarkers[i].myDefaultIcon);

jsfiddle (again modified from your previous question)

UPDATE: I get a javascript error on the link you provided:

Error: marker[i] is undefined
Source File: http://zslabs.com/jhtwp/wp-content/plugins/busipress/js/map.1349993292.js
Line: 105

105 is this line: this.setIcon(marker[i].myActiveIcon);

here:

    google.maps.event.addListener(marker, "click", function () {
        for (var i = 0; i < gmarkers.length; i++) {
           gmarkers[i].setIcon(gmarkers[i].myDefaultIcon);
        }
        this.setIcon(marker[i].myActiveIcon);

        infowindow.setContent(this.html);
        infowindow.open(map, this);
    });

I think you want this.myActiveIcon.

jsfiddle illustrating the concept ("dots" are active, no dot is default)

这篇关于Google Maps API -- 点击时每个标记的唯一活动图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！