我如何将Infowindow和工具提示添加到多个标记 [英] How can i add Infowindow and tooltip to multiple marker
问题描述
我试图将infowindow和工具提示添加到我的谷歌地图中的标记中。我有tooltip.js和recipient_country.js文件。在firebug中没有错误，但是没有内容显示在浏览器中。它应该用标记显示地图，并且每个标记都有工具提示和infowindow。但它说ReferenceError：key是没有在createInfoWindow（marker，key）中定义;
函数createInfoWindow（marker，key）{
//创建一个infowindow这个标记。
var infowindow = new google.maps.InfoWindow（{
content：recipient_country [key] .Country_Name，
maxwidth：250
}）;
//在标记点击事件时打开infowindow。
google.maps.event.addListener（marker，'click'，function（）{
if（lastOpenInfoWin）lastOpenInfoWin.close（）;
lastOpenInfoWin = infowindow;
infowindow。 open（marker.get（'map'），marker）;
}）;
}
//这里是我们为每个标记创建工具提示的地方，
//将内容设置为recipient_country [placeindex] .value
函数createTooltip（marker ，key）{
//创建工具提示
var tooltipOptions = {
marker：marker，
content：recipient_country [key] .Country_Name，
cssClass：'tooltip '//应用于tooltip
的css类名称;
var tooltip = new Tooltip（tooltipOptions）;
}
//用于保存开放的Infowindow的轨迹，因此当
//新的将要打开时，我们关闭旧的。
//在DOM上创建映射
//我使用一个recipient_country（recipient_counrty.js）数组来填充标记
函数createMap（） {
var geocoder = new google.maps.Geocoder（）;
var map = new google.maps.Map（document.getElementById（'map_canvas'），{
center：new google.maps.LatLng（33.93911,67.709953），
mapTypeId：google。 maps.MapTypeId.ROADMAP，
zoom：2，
disableDefaultUI：true，
zoomControl：true，
zoomControlOptions：{
style：google.maps.ZoomControlStyle.SMALL
}，
mapTypeControl：true，
mapTypeControlOptions：{
style：google.maps.MapTypeControlStyle.DROPDOWN_MENU，
position：google.maps.ControlPosition.TOP_CENTER
}
}）; （var j = 0; j
var building = recipient_country [i]; $ b $（
） b
geocoder.geocode（{'address'：building.Country_Name}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
var marker = new MarkerWithLabel（{
position：new google.maps.LatLng（results [0] .geometry.location.lat（），results [0] .geometry.location.lng（）），
title：building.Country_Name，
map：map，
labelContent：building.value，
labelAnchor：新的google.maps.Point（6,22），
labelClass ：labels，
labelInBackground：false，
icon：pics / circle2.png
}）;
createInfoWindow（marker，key）;
createTooltip（标记，键）;
}
else {
console.log（Geocode由于以下原因不成功：+状态;
}
}）;
}）（j）;
$ b 示例JSON数据（来自注释） ：
var recipient_country = [{Country_Name：MYANMAR，value：143}，{Country_Name： 蒙古，值：46}，{Country_Name：ZIMBABWE，value：1}，{Country_Name：Bahrain，value：1}];
这适用于我（使用key作为索引该循环以及作为变量名称的匿名函数在变量上进行地理编码操作）： = key; key< recipient_country.length; key ++）{
（function（key）{
var building = recipient_country [key];
geocoder.geocode（{
'address'：building.Country_Name
}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
var marker = new MarkerWithLabel（{
position：new google.maps.LatLng（results [0] .geometry.location.lat（），results [0] .geometry.location.lng（）），
title ：building.Country_Name，
map：map，
labelContent：building.value，
labelAnchor：new g oogle.maps.Point（6，22），
labelClass：labels，
labelInBackground：false，
图标：pics / circle2.png
}）;
createInfoWindow（marker，key）;
createTooltip（marker，key）;
} else {
console.log（由于以下原因，Geocode不成功：+ status）;
}
}）;
}）（key）;
}
I am trying to add the infowindow and tooltip to the marker in my google map. I have tooltip.js and recipient_country.js file.There are no errors in firebug,but but no content is display in the browser.It should display the map with marker and each marker having tooltip and infowindow.But it says ReferenceError: key is not defined in createInfoWindow(marker,key);
function createInfoWindow(marker,key){
//create an infowindow for this marker.
var infowindow = new google.maps.InfoWindow({
content:recipient_country[key].Country_Name,
maxwidth:250
});
//open infowindow on click event on marker.
google.maps.event.addListener(marker,'click',function(){
if(lastOpenInfoWin) lastOpenInfoWin.close();
lastOpenInfoWin = infowindow;
infowindow.open(marker.get('map'),marker);
});
}
// Here is where we create a tooltip for each marker,
//with content set to recipient_country[placeindex].value
function createTooltip(marker,key){
//create a tooltip
var tooltipOptions = {
marker:marker,
content:recipient_country[key].Country_Name,
cssClass:'tooltip' //name of a css class to apply to tooltip
};
var tooltip = new Tooltip(tooltipOptions);
}
// used to keep trackk of the open Infowindow,so when
// new one is about to be open, we close the old one.
// Create map on DOM load
// I'm using an array of recipient_country(recipient_counrty.js) to populate the markers
function createMap(){
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById('map_canvas'),{
center:new google.maps.LatLng(33.93911,67.709953),
mapTypeId:google.maps.MapTypeId.ROADMAP,
zoom:2,
disableDefaultUI:true,
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
},
mapTypeControl:true,
mapTypeControlOptions:{
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
}
});
for(var j= 0; j < recipient_country.length; j++) {
(function(i) {
var building = recipient_country[i];
geocoder.geocode({'address':building.Country_Name}, function(results,status){
if(status == google.maps.GeocoderStatus.OK){
var marker = new MarkerWithLabel({
position:new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng()),
title:building.Country_Name,
map:map,
labelContent:building.value,
labelAnchor:new google.maps.Point(6,22),
labelClass:"labels",
labelInBackground:false,
icon:"pics/circle2.png"
});
createInfoWindow(marker,key);
createTooltip(marker,key);
}
else{
console.log("Geocode was not succcessful for the following reason:" + status);
}
});
})(j);
}
}
sample JSON data (from comments):
var recipient_country = [{"Country_Name": "MYANMAR", "value": 143}, {"Country_Name": "MONGOLIA", "value": 46}, {"Country_Name": "ZIMBABWE", "value": 1}, {"Country_Name": "Bahrain", "value": 1}];
This works for me (using key as the index in the loop and as the variable name inside the anonymous function holding closure on the variable for the geocode operation):
for (var key = 0; key < recipient_country.length; key++) {
(function (key) {
var building = recipient_country[key];
geocoder.geocode({
'address': building.Country_Name
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
title: building.Country_Name,
map: map,
labelContent: building.value,
labelAnchor: new google.maps.Point(6, 22),
labelClass: "labels",
labelInBackground: false,
icon: "pics/circle2.png"
});
createInfoWindow(marker, key);
createTooltip(marker, key);
} else {
console.log("Geocode was not succcessful for the following reason:" + status);
}
});
})(key);
}
这篇关于我如何将Infowindow和工具提示添加到多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
