Javascript 在Google Maps V3 Java脚本API上显示对话框

在google maps Api for javaScript V3中，可以显示与位置对话框相同的对话框 例子：

单击某些标记时：

 marker.addListener('click', function () {
        //  console.log(marcador['geo']);
        mostrarInfoMarcas(marcador['user'], marcador['geo']);
    });

这是我的解决方案， 我通过覆盖视图对象创建标记
因此，您可以将其视为DIV并输入HTML内容

功能自定义标记（latlng、map、args）{
this.latlng=latlng；
this.args=args；
这个.setMap（map）；
}
CustomMarker.prototype=new google.maps.overlyview（）；
CustomMarker.prototype.draw=函数（）{
var self=这个；
var div=this.div；
如果（！div）{
div=this.div=document.createElement（'div'）；
var样式=“”；
var内容=“”；
if（typeof（self.args.marker_style）！=‘未定义’）{
style=self.args.marker\u style；
div.className='iot node-'+样式；
}
if（typeof（self.args.marker_content）！=‘未定义’）{
内容=self.args.marker\u内容；
var a=document.createElement（'a'）；
var cur=this.getPosition（）；
a、 风格：背景颜色为“蓝色”；
a、 style.color='白色'；
a、 style.fontSize=“3em”；
a、 style.textAlign=“中心”；
a、 innerHTML=（内容=“-1”？“-”：内容）；
var sub_div=document.createElement（'div'）；
sub_div.style.paddingLeft='2px'；
var sub_info=self.args.marker_info；
sinfo='
'+sub_info.name+'
'+
''+附属信息办公室+''；
sub_div.innerHTML=sinfo；
sub_div.className='showme'；
sub_div.style.lineHeight=“16px”；
sub_div.style.backgroundColor='蓝色'；
sub_div.style.color='白色'；
a、 儿童（小班）；
儿童（a）分部；
如果（样式=='info'）{
var span=document.createElement（'span'）；
span.innerHTML='x'；
google.maps.event.addDomListener（span，“单击”，函数（事件）{
});
//a、 儿童（span）；
}
}
if（typeof（self.args.marker_style）！='undefined'&&style！=''）{
var cur=this.getPosition（）；
var me=这个；
var panes=this.getPanes（）；
窗格。覆盖图像。追加子对象（div）；
var point=this.getProjection（）.fromLatLngToDivPixel（this.getPosition（））；
如果（点）{
如果（样式！=“信息”）{
div.style.left=（point.x-20）+“px”；
div.style.top=（点y-10）+“px”；
var my_info=null；
var sub={latLng:cur，style:'info'，content:root_content.replace（'[type]'，style.toUpperCase（））.replace（'[address]'，addr）}；
my_info=创建_节点（映射、子节点）；
推送（我的信息）；
}否则{
div.style.left=（点x-35）+“px”；
div.style.top=（点y-60）+“px”；
}
}
}
}
};
CustomMarker.prototype.remove=函数（）{
if（this.div）{
this.div.parentNode.removeChild（this.div）；
this.div=null；
}	
此.setMap（null）；
};
CustomMarker.prototype.getPosition=函数（）{
把这个还给我；
};
函数创建_节点（映射，节点）{
返回新的自定义标记(
node.latLng，
地图，
{
标记样式：node.style，
标记内容：node.content，
标记信息：node.info
}
);
}
var映射；
函数初始化（）{
var centerLat=21.04731；//默认lat
var centerLng=105.792137；//默认长度
var cen=new google.maps.LatLng（centerLat，centerLng）；
map=new google.maps.map（document.getElementById（'map'）{
缩放：17，
中心：cen，
mapTypeId:google.maps.mapTypeId.ROADMAP
});	
Draw（）；
}
var nd=[]；
函数绘图（）{
var lastest_json='{“markers”：[{“markerId”：“1”，“name”：“Marker1”，“info”：“INFO1”，“lat”：“21.04731”，“lon”：“105.792137”}]'
var json_dev=json.parse（最新的json）；
var markers=json_dev.markers；
对于（var i=0；ia，.iot节点asn>a，.iot节点adn>a，.iot节点mn>a，.iot节点in>a，.iot节点信息>a{
位置：相对位置；
z指数：2；
显示：块；
宽度：20px；
高度：20px；
边框样式：实心；
边框宽度：2倍；
边框颜色：#0079ff；
边界半径：50%；
背景：白色；
文本对齐：左对齐；
字体大小：粗体；
填充顶部：0px；
左侧填充：0px；
右边填充：0px；
-webkit过渡：背景色0.2s；
-moz过渡：背景色0.2s；
-o过渡：背景色0.2s；
过渡：背景色0.2s；
}
.iot节点信息>a{
宽度：60px；
高度：35px；
位置：相对位置；
边界半径：0；
}
.iot节点信息>a>范围{
位置：绝对；顶部：2px；右侧：2px；
光标：指针；
显示：内联块；
填充物：2px 5px；
背景：#ccc；
}
.iot节点信息>a>跨度：：悬停{
位置：绝对；顶部：2px；右侧：2px；
光标：指针；
显示：内联块；
填充物：2px 5px；
背景：#ccc；
}
.iot节点信息>a:：之前{
内容：“；
位置：绝对位置；
最高：100%；
左：0；
宽度：0；
身高：0；
左边框：13px实心透明；
右边框：26px实心#0079ff；
边框底部：13px实心透明；
}
.iot节点信息>a>分区{
显示：无；
}
.iot节点信息>a:悬停>.showme{
宽度：150px；
高度：70像素；
背景色：白色；
位置：绝对位置；
顶部：-70px；
左：-45px；
边框宽度：2倍；
边框颜色：#0079ff；
显示：块；
}
.iot节点ae:：after、.iot节点asn:：after、.iot节点adn:：after、.iot节点mn:：after、.iot节点in:：after、.iot节点信息：：after{
内容：''；
位置：绝对位置；
边界半径：50%；
宽度：100%；
身高：100%；
排名：0；
左：0；
//动画：cd脉冲2s无限；
}
@关键帧cd脉冲
{
0%{box shadow:0#0079ff}
100%{box shadow:020px rgba（255150,44,0）}
}
/*AE*/
.iot节点ae{
}
.iot节点ae>a{
背景：#ff3300；
字体大小：14px；
}
.iot节点ae:：之后{
//动画：cd脉冲2s无限；
}
/*asn*/
.iot节点asn{
}
.iot节点asn>a{
背景：#cc9900；
}
.iot节点asn:：之后{
//动画：cd脉冲2s无限；
}
/*adn*/
.iot节点adn{
}
.iot节点adn>a{
背景：#330099；
}
.iot节点adn:：之后{
//动画：cd脉冲2s无限；
}
/*锰*/
.iot节点mn{
}
.iot节点mn>a{
背景