google 地图，添加文本标注，可提交到数据库（更新，删除，修改）

来源：互联网发布：手机赌钱软件编辑：程序博客网时间：2024/06/05 00:17

这个代码着实解决了很久，参考了很多资料。Google没有提供文本标签的API，不像Mapabc，51ditu，baidu 地图..所以只能重写其中的方法，另外文本标签还涉及到的更新也纠结了很久，最终还是解决了。

先看源码：

     //初始化标记数据
     GMarkerInfo.prototype.InitLocation = function(ilng,ilat,addr,map)
    {
       this.addrilng=ilng;
       this.addrilat=ilat;
       this.addraddr=addr;
       this.mapgoogle=map;
       this.addrpoint=new GLatLng(ilat,ilng);

    };
    //所有的初始化完成时添加到地图
     GMarkerInfo.prototype.AddLocationToMap = function(gmap)
    {
        gmap.addOverlay(this.addrmarker);
        gmap.addOverlay(this.addrmarkertext);

    };
    //初始化标注，包括文本标注，图标标注
    GMarkerInfo.prototype.InitAddrMarkert = function()
    {

           this.addrmarker = new GMarker(this.addrpoint);
           this.addrmarkertext= new this.TextOverlay(this.addrpoint,"<span style='color:red; width:auto;'>"+this.addraddr+"</span>");

           var otherobj=this;
           GEvent.addListener(this.addrmarker, "click", function(latlng)
           {
              otherobj.parent.addraddr = otherobj.addraddr;
              otherobj.parent.addrilat = otherobj.addrilat;
              otherobj.parent.addrilng = otherobj.addrilng;
              otherobj.parent.addrmarker = otherobj.addrmarker;
              otherobj.parent.addrmarkertext = otherobj.addrmarkertext;
              otherobj.parent.addrmap = otherobj.mapgoogle;
              otherobj.parent.markertextarr=otherobj.markertextarr;
              otherobj.parent.markertextarr.push(otherobj.addrmarkertext);
              otherobj.AddrClick();
           });
    };
    //添加标注点击事件
     GMarkerInfo.prototype.AddrClick = function()
    {

    var DeleteUpdateDIV=document.getElementById("DeleteUpdate");
          DeleteUpdateDIV.style.display='block';
          DeleteUpdateDIV.style.zIndex='9999';

          var subUpdate=BGMGmap.$('updatesubmit');//获取更新提交按钮
          var updaterobj=BGMGmap.$('addridupdate'); //获取更新输入框
          var subDelete=BGMGmap.$('deletesubmit');
          var UDCancelbtn=BGMGmap.$('UDCancel');
          UDCancelbtn.onclick=function()
           {
                 DeleteUpdateDIV.style.display='none';
                 DeleteUpdateDIV.style.zIndex='1000';
           };

          var otherpara=this.parent;
          var otherobj=this;
          subUpdate.onclick=function()
          {
               var m_updateAddress=''; //更新地址
               m_updateAddress=updaterobj.value;
               window.external.UpdateMarkerToMap(otherpara.addrilat*100000,otherpara.addrilng*100000,m_updateAddress,2); //更新到服务端
               updaterobj.value='';
               DeleteUpdateDIV.style.display='none';
               DeleteUpdateDIV.style.zIndex='1000';


               otherpara.addrpoint=new GLatLng(otherpara.addrilat,otherpara.addrilng);
               otherpara.addrmarker=new GMarker(otherpara.addrpoint,{title:m_updateAddress});

               otherpara.addraddr=m_updateAddress;
               var len=otherpara.markertextarr.length;
               //alert(len);
               for(var index=0;index<len;index++)
               {
                    var predelobj=otherpara.markertextarr[index];
                    if(typeof(predelobj)!='undefined')
                    {
                       otherpara.addrmap.removeOverlay(predelobj);
                       delete predelobj;
                    }
               }
               otherpara.addrmarkertext=new otherobj.TextOverlay(otherpara.addrpoint,"<span style='color:red; width:auto;'>"+m_updateAddress+"</span>");
               otherpara.addrmap.addOverlay(otherpara.addrmarkertext);
               otherpara.markertextarr.push(otherpara.addrmarkertext); //添加一个
           };
           var otherpara1=this.parent;
           subDelete.onclick=function(){
               window.external.DeleteMarkerToMap(otherpara1.addrilat*100000, otherpara1.addrilng*100000,2); //删除提交到服务端
               updaterobj.value='';
               otherpara1.addrmap.removeOverlay(otherpara1.addrmarker);
               otherpara1.addrmap.removeOverlay(otherpara1.addrmarkertext);
               DeleteUpdateDIV.style.display='none';
               DeleteUpdateDIV.style.zIndex='1000';

             };
    };
    //创建文本标注，继承实现GOverlay 的方法
     GMarkerInfo.prototype.TextOverlay=function(latLng, html) {
             this.latLng = latLng;
              this.html = html;
         };
       GMarkerInfo.prototype.TextOverlay.prototype = new GOverlay();
       GMarkerInfo.prototype.TextOverlay.prototype.initialize = function(map) {
           var div = document.createElement("div");
            div.style.position = "absolute";
            div.style.width = "1000px";
            div.innerHTML = this.html;
            map.getPane(G_MAP_MAP_PANE).appendChild(div);
            this.map_ = map;
            this.div_ = div;
            this.redraw(true);
        }
        GMarkerInfo.prototype.TextOverlay.prototype.remove = function() {
            this.div_.parentNode.removeChild(this.div_);
        }
        GMarkerInfo.prototype.TextOverlay.prototype.copy = function() {
             return new TextOverlay(this.latLng, this.html);
        }
        GMarkerInfo.prototype.TextOverlay.prototype.redraw = function(force) {
           if (!force) {
                return;
           }
           var position = this.map_.fromLatLngToDivPixel(this.latLng);
           this.div_.style.left = position.x + "px";
           this.div_.style.top = position.y + "px";
        }
         GMarkerInfo.prototype.TextOverlay.prototype.setLatLng = function(latLng) {
           this.latLng = latLng;
           this.redraw(true);
        }
        GMarkerInfo.prototype.TextOverlay.prototype.getLatLng = function() {
             return this.latLng;
       };

效果如下【只展现更新功能，其余添加、删除代码未贴出】：

更新提交到数据库：

当然这还要添加一段HTML，用来呈现操作窗口。