如何在Google地图中自动打开特定标记的信息框? [英] How can I open info box of specific marker automatically in Google Maps?
本文介绍了如何在Google地图中自动打开特定标记的信息框?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
//标记的数据来源于标记的数据JSON
var markers = new google.maps.Marker({
id:place.id,
map:map,
title:place.title,
icon: 'assets / frontend / images / marker.png'
});
infoWindow = new google.maps.InfoWindow();
infoWindow.open(map,markers);
例如,假设我想打开id = 243
var marker_id = 243;
解决方案
您可以使用 maps-utility-library-v3
为信息框,修改你的代码如下,如果你有多个标记并需要多个信息框根据标记,你可以重复代码信息框
,首先尝试一个标记,你可以有想法。
<脚本类型=text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js>< / script>
< script type =text / javascriptsrc =http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js >< /脚本>
< script type =text / javascriptsrc =// maps.googleapis.com/maps/api/js?sensor=true&libraries=places\"></script>
< script language =javascript>
//标记的数据来自JSON
$(document).ready(function(){
/ *您的地图代码需要在这里* /
/ * Marker在下面创建* /
var markers = new google.maps.Marker({
id:place.id,
map:map,
title:place.title,
图标:'assets / frontend / images / marker.png'
});
var boxText = document.createElement(div);
boxText.style.cssText =border:1px solid black; margin-top:8px; background:yellow; padding:5px;;
boxText.innerHTML =Your map info here;
var myOptions_txtbox = {
content:boxText
,disableAutoPan:false
,maxWidth:0
,pixelOffset:new google.maps.Size(-140,0)
,zIndex:null
,boxStyle:{
background:url('tipbox.gif')no-repeat
,opacity:0.75
,width:280px
}
,closeBoxMargin:10px 2px 2px 2px
,closeBoxURL:http://www.google.com/intl/en_us/mapfiles/close.gif
,infoBoxClearance:new google.maps.Size (1,1)
,isHidden:false
,窗格:floatPane
,enableEventPropagation:false
};
/ *为标记`markers`创建的文本框* /
var infobox_new = new InfoBox(myOptions_txtbox);
/ *创建的文本框被分配给标记标记。您可以分配任何事件。现在,我选择了`click` * /
google.maps.event.addListener(marker,click,function(e){
infobox_new.open(map,this);
});
});
< / script>
I want to open an info box of a marker automatically by given marker's id.
//Data of markers are from JSON
var markers = new google.maps.Marker({
id: place.id,
map: map,
title:place.title,
icon : 'assets/frontend/images/marker.png'
});
infoWindow = new google.maps.InfoWindow();
infoWindow.open(map, markers);
For example, Assuming that I want to open info box of marker that has id = 243
var marker_id = 243;
解决方案
You can use google-maps-utility-library-v3
for infobox, modify your code as following, if you have multiple markers and need multiple info box according to the markers, you can repeat the code for the infobox
, first try for a single marker and you can have idea.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js"></script>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<script language="javascript">
//Data of markers are from JSON
$(document).ready(function(){
/*Your map code needs to be here*/
/*Marker being created below*/
var markers = new google.maps.Marker({
id: place.id,
map: map,
title:place.title,
icon : 'assets/frontend/images/marker.png'
});
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = "Your map info here";
var myOptions_txtbox = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
/*Text box being created for marker `markers` */
var infobox_new = new InfoBox(myOptions_txtbox);
/*Created text box is assigned for marker `markers`. You can assign any event. For now, I have selected on `click` */
google.maps.event.addListener(markers, "click", function (e) {
infobox_new.open(map, this);
});
});
</script>
这篇关于如何在Google地图中自动打开特定标记的信息框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文