-1
在谷歌地图API为JavaScript V3，它可能显示对话框相同位置对话框 例子： 
显示对话框
当单击一些标记：
marker.addListener('click', function() {
// console.log(marcador['geo']);
mostrarInfoMarcas(marcador['user'], marcador['geo']);
});
Q
显示对话框
A
回答
1
这里是我的解决方案， 我通过OverlayView Object创建标记
因此，您可以将其视为DIV并输入HTML内容
function CustomMarker(latlng, map, args) {
\t this.latlng = latlng; \t
\t this.args = args; \t
\t this.setMap(map); \t
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
\t
\t var self = this;
\t var div = this.div;
\t if (!div) {
\t \t div = this.div = document.createElement('div');
\t \t var style = '';
\t \t var content = '';
\t \t if (typeof(self.args.marker_style) !== 'undefined') {
\t \t \t style = self.args.marker_style;
\t \t \t div.className = 'iot-node-'+style; \t
\t \t \t
\t \t }
\t \t
\t \t if (typeof(self.args.marker_content) !== 'undefined') {
\t \t \t content = self.args.marker_content;
\t \t \t var a = document.createElement('a');
\t \t \t var cur = this.getPosition();
\t \t \t a.style.backgroundColor='blue';
\t \t \t a.style.color = 'white';
\t \t \t a.style.fontSize = "3em";
\t \t \t a.style.textAlign= "center";
\t \t \t a.innerHTML = (content=="-1"?"-":content);
\t \t \t var sub_div = document.createElement('div');
\t \t \t
\t \t \t sub_div.style.paddingLeft = '2px';
\t \t \t var sub_info = self.args.marker_info;
\t \t \t sinfo = '<BR>'+sub_info.name+'<BR>'+
\t \t \t \t \t '<font size=2>'+sub_info.office+'</font>';
\t \t \t \t \t
\t \t \t sub_div.innerHTML = sinfo;
\t \t \t sub_div.className = 'showme';
\t \t \t sub_div.style.lineHeight= "16px";
\t \t \t sub_div.style.backgroundColor = 'blue';
\t \t \t sub_div.style.color = 'white';
\t \t \t a.appendChild(sub_div);
\t \t \t div.appendChild(a);
\t \t \t
\t \t \t
\t \t \t
\t \t \t if(style=='info') {
\t \t \t \t var span = document.createElement('span');
\t \t \t
\t \t \t \t span.innerHTML = 'x';
\t \t \t \t google.maps.event.addDomListener(span, "click", function(event) {
\t \t \t \t \t
\t \t \t \t });
\t \t \t \t
\t \t \t \t //a.appendChild(span);
\t \t \t }
\t \t \t
\t \t }
\t \t if (typeof(self.args.marker_style) !== 'undefined' && style!='') {
\t \t \t \t var cur = this.getPosition();
\t \t \t \t var me = this;
\t \t \t \t
\t \t \t \t var panes = this.getPanes();
\t \t \t \t panes.overlayImage.appendChild(div);
\t \t \t \t var point = this.getProjection().fromLatLngToDivPixel(this.getPosition());
\t \t \t \t if (point) {
\t \t \t \t \t if(style!='info') {
\t \t \t \t \t \t div.style.left = (point.x-20) + 'px';
\t \t \t \t \t \t div.style.top = (point.y-10) + 'px';
\t \t \t \t \t \t var my_info= null;
\t \t \t \t \t \t
\t \t \t \t \t \t var sub = {latLng: cur, style: 'info', content: root_content.replace('[type]', style.toUpperCase()).replace('[address]', addr)};
\t \t \t \t \t \t my_info= create_node(map, sub);
\t \t \t \t \t \t nd.push(my_info);
\t \t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t } else {
\t \t \t \t \t \t
\t \t \t \t \t \t div.style.left = (point.x - 35) + 'px';
\t \t \t \t \t \t div.style.top = (point.y - 60) + 'px';
\t \t \t \t \t \t
\t \t \t \t \t }
\t \t \t \t }
\t \t }
\t \t
\t }
};
CustomMarker.prototype.remove = function() {
\t
\t if (this.div) {
\t \t this.div.parentNode.removeChild(this.div);
\t \t this.div = null;
\t } \t
\t this.setMap(null);
\t
};
CustomMarker.prototype.getPosition = function() {
\t return this.latlng; \t
};
function create_node(map, node) {
\t return new CustomMarker(
\t \t node.latLng,
\t \t map,
\t \t {
\t \t \t marker_style: node.style,
\t \t \t marker_content: node.content,
\t \t \t marker_info: node.info
\t \t }
\t);
}
var map;
function initialize() {
\t \t \t var centerLat = 21.04731; \t \t \t \t \t //default lat
\t \t \t var centerLng = 105.792137; \t \t \t \t //default long
\t \t \t var cen = new google.maps.LatLng(centerLat, centerLng) ;
\t \t \t
\t \t \t \t map = new google.maps.Map(document.getElementById('map'), {
\t \t \t \t zoom: 17,
\t \t \t \t center: cen,
\t \t \t \t mapTypeId: google.maps.MapTypeId.ROADMAP
\t \t \t \t }); \t
Draw();
}
var nd = [];
function Draw() {
var lastest_json='{"markers":[{"markerId":"1","name":"Marker1","info":"INFO1","lat":"21.04731","lon":"105.792137"}]}'
\t \t var json_dev = JSON.parse(lastest_json);
\t \t var markers = json_dev.markers;
\t \t
\t \t for(var i=0; i<markers.length; i++)
\t \t {
\t \t \t var dev = markers[i];
\t \t \t var cen = new google.maps.LatLng(parseFloat(dev.lat), parseFloat(dev.lon));
\t \t
\t \t \t var sub = {latLng: cen, style: 'info', info: dev, content: dev.markerId};
\t \t \t nd.push(create_node(map, sub)); \t
\t \t }
\t \t \t \t
}
google.maps.event.addDomListener(window, 'load',initialize);.iot-node-ae, .iot-node-asn, .iot-node-adn, .iot-node-mn, .iot-node-in, .iot-node-info {
\t position: absolute;
\t list-style-type: none;
\t left: 20px;
\t top: 20px;
}
.iot-node-ae>a, .iot-node-asn>a, .iot-node-adn>a, .iot-node-mn>a, .iot-node-in>a, .iot-node-info>a {
position: relative;
z-index: 2;
display: block;
width: 20px;
height: 20px;
\t border-style: solid;
border-width: 2px;
\t border-color: #0079ff;
\t border-radius: 50%;
background: white;
\t text-align:left;
\t font-weight: bold;
\t padding-top:0px;
\t padding-left:0px;
\t padding-right:0px;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.iot-node-info>a {
width: 60px;
height: 35px;
position: relative;
border-radius: 0;
}
.iot-node-info>a>span {
position: absolute; top: 2px; right:2px;
cursor: pointer;
display:inline-block;
padding:2px 5px;
background:#ccc;
}
.iot-node-info>a>span::hover {
position: absolute; top: 2px; right:2px;
cursor: pointer;
display:inline-block;
padding:2px 5px;
background:#ccc;
}
.iot-node-info>a::before {
content:"";
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-right: 26px solid #0079ff;
border-bottom: 13px solid transparent;
}
.iot-node-info>a>div {
\t display:none;
}
.iot-node-info>a:hover > .showme{
\t width: 150px;
\t height: 70px;
\t background-color:white;
\t position:absolute;
\t top:-70px;
\t left:-45px;
\t border-width:2px;
\t border-color:#0079ff;
\t display:block;
}
.iot-node-ae::after, .iot-node-asn::after , .iot-node-adn::after , .iot-node-mn::after , .iot-node-in::after , .iot-node-info::after{
\t content: '';
\t position: absolute;
\t border-radius: 50%;
\t width: 100%;
\t height: 100%;
\t top: 0;
\t left: 0;
\t //animation: cd-pulse 2s infinite;
}
@keyframes cd-pulse
{
\t 0% {box-shadow:0 0 0 0 #0079ff}
\t 100%{box-shadow:0 0 0 20px rgba(255,150,44,0)}
}
/* AE */
.iot-node-ae{
\t
}
.iot-node-ae>a{
\t background: #ff3300;
\t font-size:14px;
}
.iot-node-ae::after{
\t //animation: cd-pulse 2s infinite;
}
/* asn */
.iot-node-asn{
\t
}
.iot-node-asn>a{
\t background: #cc9900;
}
.iot-node-asn::after{
\t //animation: cd-pulse 2s infinite;
}
/* adn */
.iot-node-adn{
\t
}
.iot-node-adn>a{
\t background: #330099;
}
.iot-node-adn::after{
\t //animation: cd-pulse 2s infinite;
}
/* mn */
.iot-node-mn{
\t
}
.iot-node-mn>a{
\t background: #669900;
}
.iot-node-mn::after{
\t //animation: cd-pulse 2s infinite;
}
/* IN */
.iot-node-in{
\t
}
.iot-node-in>a{
\t background: #ff9900;
\t font-size:14px;
}
.iot-node-in::after{
\t //animation: cd-pulse 2s infinite;
}<script src="http://maps.google.com/maps/api/js" type="text/javascript"></script>
<div id="map" style="width: 100%; height: 238px; "></div>相关问题
- 1. 显示对话框
- 2. 显示对话框不显示对话框
- 3. jQueryUI的对话框显示
- 4. onProviderDisabled对话框未显示
- 5. 显示对话框问题
- 6. 显示对话框startActivity
- 7. jquery对话框不显示
- 8. primefaces：对话框不显示
- 9. 对话框不显示android
- 10. 横向显示对话框
- 11. 显示UI对话框
- 12. p：对话框不显示
- 13. Bootbox对话框未显示
- 14. onKeyDown未显示对话框
- 15. 对话框不显示
- 16. 显示对话框片段
- 17. 显示空对话框
- 18. 显示弹出对话框
- 19. Android：显示对话框类
- 20. 显示QuickContact对话框
- 21. 显示错误对话框
- 22. 显示模式对话框
- 23. Primefaces对话框不显示
- 24. jQueryUI对话框不显示
- 25. RequestPermissions不显示对话框
- 26. 对话框不显示
- 27. ProgressBar对话框不显示
- 28. 对话框显示问题
- 29. 对话框显示两次
- 30. 对话框不会显示