Question

我想将动态数据与谷歌地图标记连接起来这是我的代码

这是我的mapdata和listdata都具有来自php的相同值

latitude: "19.1904917"
logitude: "72.8639419"
name: "Monkey d luffy"

使用此latitude和logitude我在地图上显示谷歌标记以显示标记数据我使用此代码

    var defaultLatlng = new google.maps.LatLng(19.0822508,72.8812041); 
    var myOptions = {
            zoom: 10,
            panControl:false,
            streetViewControl:false,
            center: defaultLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoomControl:true,
            zoomControlOptions: {
              style:google.maps.ZoomControlStyle.SMALL
            },
        };
loadMap();
function loadMap(){

   console.log('loadMap');

   // create new map make sure a DIV with id myMap exist on page
   map = new google.maps.Map(document.getElementById("myMap"), myOptions);
   geocoder = new google.maps.Geocoder();
   //oms = new OverlappingMarkerSpiderfier(map,{markersWontMove: true, markersWontHide: true});
   // create new info window for marker detail pop-up

        $.each(mapdata.locations,function(key,val){           
                loadMarker(val);
         }); 
        $.each(listdata.locations,function(key,val){    
                loaddata(val);
         });  
}

这是我的loadmarker功能，在Google地图上显示标记

function loadMarker(markerData)
{   

   var myLatlng = new google.maps.LatLng(markerData['latitude'],markerData['logitude']);
   console.log(myLatlng);
  // create new marker                
    var marker = new google.maps.Marker({
        map: map, 
        title: markerData['address'],
        position: myLatlng
        //animation:google.maps.Animation.BOUNCE
    });   
     marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png'); 

    gmarkers.push(marker);
    var marker_num = gmarkers.length-1;

    google.maps.event.addListener(marker, 'click', function() {
        showMarker(markerData,marker);
    });

}

这是我的loaddata函数showing my data on UI

function loaddata(markerData)
{     
    listitem += "<div class='expert_name'>"
                   +markerData['name']+
                 +"</div>"                            
    $('#_mymaplist').html(listitem);
}

这是我的html，我添加了所有这些东西

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Multiple Markers Google Maps</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript"></script>
</head>
    <body>
        <div id="mymap" style="width: 800px; height:500px;"></div>
        <div id="_mymaplist" style="width: 800px; height:500px;"></div>
    </body>
</html>

我希望当我悬停_mymaplist div的名称时，谷歌标记颜色必须更改为此示例我只提供一个数据，但会有多个

我查了许多像this 的例子，但我不会为我工作因为这个例子具有相同的加载数据的功能..但在我的情况下，我有2个加载数据的功能。我也可以使用1个功能，但问题是地图标记一次加载所有数据而列表数据是使用分页形式加载数据....所以yi不能使用相同的功能来加载数据请帮帮我< / p>

Answer 1

如果必须使用2个函数，由于分页问题，您可以在loaddata（）函数中使用Styled Marker来定义单个标记。为此，您需要使用set（property，value）方法。

this.styleIcon.set('color', '00fff0');

必须在loaddata（）函数中定义，其中列表项已初始化。

function createStyle() { return new StyledIcon(StyledIconTypes.BUBBLE,{color:"#95AA7B",text:"click me!",fore:"#ffffff"}); }

listitem += "<div class='expert_name'>"
               +markerData['name']+
             +"</div>"                            
$('#_mymaplist').html(listitem);

google.maps.event.addDomListener(marker4,"click", function(o){
    this.styleIcon.set("fore","#ffffff");//test color
    this.styleIcon.set("color","#C2554D");// background color
    this.styleIcon.set("text","color changed");
});

希望这会有所帮助!!

使用Google标记连接动态数据

1 个答案: