标记与谷歌地图API中的图像和数字 [英] Marker with image and number in google maps api

问题描述

我正在使用gmap ..我想在地图上放置一些标记，标记图标是动态的，我还希望使用图标显示Number，这是否可能..
我的代码是

 函数putMaker（position，title，title_dis，number，icon_img）
 {
 if（！isNaN （number））
 var icon =https：//chart.googleapis.com/chart？chst = d_bubble_icon_text_small& chld = ski | bb | +数字+| FFFFFF | 000000; 
 else 
 var icon = null; 
 var marker = new google.maps.Marker（{
 position：position，
 map：map，
 icon：icon_img，
 shadow：icon，
}）; 
 google.maps.event.addListener（marker，'mouseover'，function（）{
 infowindow.setContent（title_dis）; 
 infowindow.open（map，this）; 
 }）; 
} 
  

并且图标是

  var icon_img = new google.maps.MarkerImage（
<？php echo base_url（）。'timthumb.php？src ='。$ url。'& h = 32& w = 50';？>，// url 
 new google.maps.Size（50,32），// size 
 new google.maps.Point（0，0 ），// origin 
 new google.maps.Point（0，32）// anchor 
）; 
  

解决方案

完全可以使用

I am using gmap .. I want to put some marker on the map the marker icon is dynamic, I also want a "Number" to be display with the Icon , Is this possible.. My Code is

function putMaker(position, title, title_dis, number, icon_img)
{
    if (!isNaN(number))
        var icon = "https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|" + number + "|FFFFFF|000000";
    else
        var icon = null;
    var marker = new google.maps.Marker({
        position: position,
        map: map,
        icon: icon_img,
        shadow: icon,
    });
    google.maps.event.addListener(marker, 'mouseover', function() {
        infowindow.setContent(title_dis);
        infowindow.open(map, this);
    });
}

And Icon is

var icon_img = new google.maps.MarkerImage(
        "<?php echo  base_url().'timthumb.php?src='.$url.'&h=32&w=50'; ?>", //url
        new google.maps.Size(50, 32), //size
        new google.maps.Point(0, 0), //origin
        new google.maps.Point(0, 32) //anchor 
        );

解决方案

It is perfectly possible using the markerwithlabel library. You can modify one of the basic examples by adding the iconparameter (you can add there any of the standard google.maps.Marker options):

var marker = new MarkerWithLabel({
   position: homeLatLng,
   map: map,
   draggable: true,
   raiseOnDrag: true,
   labelContent: "2", // your number
   icon: "img/your_icon.png",
   labelAnchor: new google.maps.Point(3, 30),
   labelClass: "labels", // the CSS class for the label
   labelInBackground: false
 });

http://jsfiddle.net/Vug7W/

这篇关于标记与谷歌地图API中的图像和数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！