Question

我已成功实施代码，动态地在谷歌地图上绘制多个位置。

解决方案：(link)

我正在尝试创建自定义标签，如下所示：

http://www.codeproject.com/KB/scripting/Use_of_Google_Map/ex7.JPG

使用Tom Morgan的标记：

http://abhi2434.googlepages.com/tlabel.2.05.js

根据以下代码进行调整。（！我的目标是保留我已经使用的第一个代码，但允许第二个代码中的自定义标记！每次我尝试调整第二个代码时，都会失败......）

谷歌地图

<div id="map" style="width: 550px; height: 450px"></div>

<script type="text/javascript">
//<![CDATA[

if (GBrowserIsCompatible()) {
    var openbubble=true;
    var agent = navigator.userAgent.toLowerCase();
// For IE We need to Do this
    if ((agent.indexOf("msie") > -1) && (agent.indexOf("opera") < 1)){
    var loader = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='gmarker.png', sizingMethod='crop');";
    icon = '<div  style="height:34px; width:20px; ' +loader+ '" ></div>'
  }  

  var n=0;
    function createTLabel(point,html) {
    var label = new TLabel();
     label.id = 'Label '+n;
     label.anchorLatLng = point;
     label.anchorPoint = 'bottomCenter';
     label.content = html;
     label.markerOffset = new GSize(-1,-5);
     map.addTLabel(label);
     var obj=document.getElementById(label.id);
     GEvent.addDomListener(obj, "click", function() {
            //map.openInfoWindowHtml(point, html, {pixelOffset: new GSize(0,-34)} );
     });         

     n++;
  }

  var map = new GMap2(document.getElementById("map"));
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng(43.907787,-79.359741),8);
  // Creating the HTML to show markers
  var hContent = '<div style="padding: 0px 0px 13px 0px; background: url(
      images/pt_bot_ctr_ora.png) no-repeat bottom center;">
      <div style="text-align: center; background-color: #f2c30c; padding: 2px;
       font-size: 0.75em; font-weight: bold;" onclick="openInfo(\'hInfo\')">MyInfo
       </div>';
  hContent+='<div id="hInfo" style="position: absolute; display: none;">';
  hContent+='<div style="width: 81px; background-color: #000; padding: 3px;
       font-size: 0.75em; color: #fff; text-align: left; border: 1px solid #f2c30c;">
       This is my content</div>';
  hContent+='</div></div>';
  createTLabel(new GLatLng(43.65654,-79.90138),hContent);

}

else {
  alert("Sorry, the Google Maps API is not compatible with this browser");
}
function openInfo(d)
{
    var obj = document.getElementById(d);
    if(openbubble==true)
    {
        obj.style.display="block";
        openbubble=false;
    }
    else
    {
        obj.style.display="none";
        openbubble=true;
    }
}
//]]>
</script>

Answer 1

标签已过时。我用迈克威廉姆斯的解决方案解决了这个问题：

http://econym.org.uk/gmap/elabel.htm

Google maps API（动态）：通过网址绘制多个位置，显示自定义标记

1 个答案: