当点击外部链接时更改Google地图标记图标？ [英] Change google maps marker icon when external link is clicked?

问题描述

我有一个谷歌地图上有很多标记（从MySQL数据库收集）。点击该标记时，我正在使用以下代码更改标记图标：

  var redbikeicon =images / bike_red巴纽; 
 
<？php 
 $ result = mysql_query（select * from sites）或者die（mysql_error（））; 
 while（$ row = mysql_fetch_assoc（$ result））{
？> 
 marker = new google.maps.Marker（{
 position：new google.maps.LatLng（<？php echo $ row ['Latitude'];？> ;,<？php echo $ row ['Longitude'];？>），
 map：map，icon：bikeicon}）; 
 
 //将事件添加到每个标记
 google.maps.event.addListener（marker，'click'，function（）{
 //更改图标颜色
 this.setIcon（redbikeicon）; //用红色版本替换默认图标（颜色标记所有选定的标记）
 
}）
 <？php 
} 
 ？> 
  

此代码正常工作，但我现在需要在页面上的链接时发生同样的事情点击 - 地图旁边的页面上有一个链接列表，每个链接对应地图上的一个标记。点击链接时，相应的标记应该像点击标记时一样改变颜色。我怎么做到这一点？

解决方案

我做了类似的事情，除了我使用悬停。我在下面将它更改为点击。我也使用jQuery。无论如何，你在链接上设置了点击事件。该链接有一个名为record_id的属性，它对应于您为标记设置的属性，也称为record_id。

单击链接时， id，然后遍历所有标记，直到找到匹配的标记，然后使用googlemaps API中提供的setIcon方法更改图标。

hope

设置id：

  marker = new google .maps.Marker（{
 record_id：record_id，
位置：点，
地图：地图，
标题：名称，
图标：'http：//图表.apis.google.com / chart？chst = d_map_pin_letter& chld = whatever | BDD73C | 000000'
}）; 
  

在锚点上设置您的操作：

<$点击（功能（）{
var id = $（this）.attr（'id'）;
changeMarker（$（$'code> $（a.whatever）） id）;
}）;

使用setIcon交换不同颜色的图标：

  function changeMarker（record_id）{
 for（i in Markers）{
 if（Markers [i] .record_id == record_id） {
 Markers [i] .setIcon（'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=title|EC2A8C|000000'）; 
} 
} 
} 
  

I have a google map with lots of markers on it (gathered from MySQL database). I'm currently using the following code to change a marker's icon when that marker is clicked:

var redbikeicon = "images/bike_red.png";

<?php
    $result=mysql_query("select * from sites") or die(mysql_error());
    while($row=mysql_fetch_assoc($result)){
        ?>
        marker = new google.maps.Marker({
        position: new google.maps.LatLng(<?php echo $row['Latitude']; ?>, <?php echo $row['Longitude']; ?>),
        map: map, icon: bikeicon});

        //add event to every marker
        google.maps.event.addListener(marker, 'click', function(){
            //change icon color
            this.setIcon(redbikeicon);      //replace default icon with red version (color-marking all chosen markers)

        })
        <?php
    }
    ?>

This code works fine, but I now need to make the same thing happen when a link on the page is clicked - there is a list of links on the page next to the map, and each one corresponds to one of the markers on the map. When a link is clicked, the corresponding marker should change colors just like it does when the marker itself is clicked. How do I accomplish this?

解决方案

I do something similar, except I use a hover. I changed it to a click for you below. I am using jQuery for this as well. Anyway, you set up you click event on the link. The link has an attribute called "record_id" which corresponds to a property you set for your marker, also called "record_id".

When the link is clicked, you grab the id, and then iterate through all of your markers until you find the one that matches, and then you change the icon using the setIcon method provided in the googlemaps api.

hope that helps.

setting the id:

marker = new google.maps.Marker({
    record_id: record_id,
    position: point,
    map: map,
    title: name,
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=whatever|BDD73C|000000'
});

setting your action on the anchor:

$("a.whatever").click(function(){
    var id = $(this).attr('id');
    changeMarker(id);                             
});

using setIcon to swap ut the icon for one of a different color:

function changeMarker(record_id){
    for (i in Markers){
        if(Markers[i].record_id == record_id){
            Markers[i].setIcon('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=title|EC2A8C|000000');
        }
    }
}

这篇关于当点击外部链接时更改Google地图标记图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！