这个代码着实解决了很久,参考了很多资料。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.οnclick=function()
{
DeleteUpdateDIV.style.display='none';
DeleteUpdateDIV.style.zIndex='1000';
};
var otherpara=this.parent;
var otherobj=this;
subUpdate.οnclick=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.οnclick=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,用来呈现操作窗口。
<body οnunlοad="GUnload()">
<div id="addMark" style="position: absolute; z-index: 2000; left: 50%; top: 250px;
display: none; height: 48px; border: solid 3px blue; background-color: #26e2e8;
text-align: center;">
地标:<input type='text' id='addrid' name='addrid' /><br />
<input type='button' value='提交' id='addsubmit' name='addsubmit' />
<input type='button' value='关闭' id='SubCancel' name='SubCancel' />
</div>
<div id="DeleteUpdate" style="position: absolute; z-index: 1000; left: 50%; top: 250px;
display: none; height: 48px; border: solid 3px blue; background-color: #26e2e8;
text-align: center;">
地标:<input type='text' id='addridupdate' name='addridupdate' /><br />
<input type='button' value='更新' id='updatesubmit' name='updatesubmit' /><input type='button'
value='删除' id='deletesubmit' name='deletesubmit' />
<input type='button' value='关闭' id='UDCancel' name='UDCancel' />
</div>
<div id="mapDiv" style="width: 100%; height: 850px;">
</div>
</body>
<script type="text/javascript">
var map = new BGMGmap("mapDiv");
</script>