如何使用 html 和 angularjs 放置地图信息窗口
How to put a map infowindow using html and angularjs
你好，我是 html 和 angularjs 的新手，我在 google 地图标记上制作了一个 dmeo，我成功地在地图上找到了标记，但现在我想把该标记上的信息窗口，我已经搜索了很多东西但不适合我的场景，所以任何人都可以帮助我如何在地图标记上放置信息窗口，我的代码如下。
html
<div class="mapclass">
<ons-row class="app-map">
<ons-col>
<map center="[{{lat}}, {{lng}}]">
<marker ng-model
position="[{{lat}}, {{lng}}]"
title= "{{tittle}}"
animation="Animation.BOUNCE"
visible="true" ></marker>
</map>
</ons-col>
</ons-row>
</div>
js
app.controller('listingdetailController', function ($http, $scope, $compile, $filter, $sce,$timeout) {
var SearchTxt = 'cay';
var url = encodeURI("http://www.yahoo.com");
var page = gallery.getCurrentPage();
var FkCategory = page.options.params;
var lat='';
var lng = '';
var img = '';
var share = '';
var title = '';
var phone = '';
var web = '';
var email = '';
var about='';
var help='';
var Info='';
var Service='';
$timeout(callAtTimeout, 1000);
function callAtTimeout() {
console.log("Timeout occurred");
share = $scope.share;
// console.log("===iside details======"+FkCategory);
$scope.img = "http://caymanafterwork.netcluesdemo.com/cache/business/images/337_224/papagallo1438959641.jpg";
$http({
method: 'POST',
url: API_HOST+'/webservice/listingdetail',
headers:
{
'Content-Type': 'application/x-www-form-urlencoded',
'caymanauth': caymanauth
},
data: "&Catid=" + FkCategory + "&SearchTxt=" + SearchTxt,
contentType: 'application/x-www-form-urlencoded'
}).success(function (data)
{
var i;
var Content = ' ';
for (i = 0; i<data['Details'].length; i++)
{
lat = + data['Details'][i]['varLatitude'];
lng = + data['Details'][i]['varLongitude'];
img = data['Details'][i]['varCompanyLogo'];
title = data['Details'][i]['varTitle'];
about= data['Details'][i]['varDescBusiness'];
help= data['Details'][i]['varMetaDescription'];
Info= data['Details'][i]['varSpecials'];
Service= data['Details'][i]['varDescBusiness'];
share = data['Details'][i]['varFacebookLink'];
$scope.about = about;
$scope.help = help;
$scope.Info = Info;
$scope.Service = Service;
$scope.title = title;
$scope.photo = ("http://caymanafterwork.netcluesdemo.com/cache/business/images/337_224/"+img);
$scope.lat = lat;
$scope.lng= lng;
$scope.geo = { lat: lat, lng: lng };
$scope.phone= data['Details'][i]['varPhone'];
$scope.web= data['Details'][i]['varWebsiteLink'];
$scope.email= data['Details'][i]['varBusinessEmail'];
phone = $scope.phone;
web = $scope.web;
email = $scope.email;
share = $scope.share;
if (Content === ' ')
{
Content =
'<ons-list class="list ons-list-inner" style="border-top: none;">' +
'<ons-list-item class="list__item ons-list-item-inner">'+
'<ons-row class="detail-row row ons-row-inner">'+
'<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+
'<ons-icon fixed-width="true" icon="fa-map-marker" class="ons-icon fa-map-marker fa fa-lg">'+'</ons-icon>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner">'+
'<div class="desc">'+ data['Details'][i]['varCityName']+'</div>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-item>'+
'<ons-list-item class="list__item ons-list-item-inner">'+
'<ons-row class="detail-row row ons-row-inner">'+
'<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+
'<ons-icon fixed-width="true" icon="ion-home" class="ons-icon ons-icon--ion ion-home fa-lg"></ons-icon>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner">'+
'<div class="desc">'+ data['Details'][i]['varPhysicalAddress'] + '</div>'+
'</ons-col> '+
'</ons-row>'+
'</ons-list-item>'+
'<ons-list-item class="list__item ons-list-item-inner">'+
'<ons-row class="detail-row row ons-row-inner">'+
'<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+
'<ons-icon fixed-width="true" icon="ion-soup-can" class="ons-icon ons-icon--ion ion-soup-can fa-lg">'+
'</ons-icon>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner">'+
'<div class="desc">' + data['Details'][i]['varPOBOXAddress']+'</div>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-item>'+
'</ons-list>'+
'<div class=caw-botton>'+
'<ons-row class="row ons-row-inner">'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
'<div style="border-right: 1px solid rgba(221,221,221,0.6); padding: 12px 0; background: #0ad046; color: #FFF;">'+
'<i class="ion-compose">'+'</i>Book Now</div>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("review.html");>'+
'<div style="padding: 12px 0; background: #cccccc; color: #FFF;">'+
'<i class="ion-edit">'+
'</i>Write a Review</div>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("email-friend.html");>'+
'<div style="padding: 12px 0; background: #0ad046; color: #FFF;">'+
'<i class="ion-ios-email">'+
'</i>Email-friend</div>'+
'</ons-col>'+
'</ons-row>'+
' </div>';
}
else
{
'<ons-list class="list ons-list-inner" style="border-top: none;">' +
'<ons-list-item class="list__item ons-list-item-inner">'+
'<ons-row class="detail-row row ons-row-inner">'+
'<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+
'<ons-icon fixed-width="true" icon="fa-map-marker" class="ons-icon fa-map-marker fa fa-lg">'+'</ons-icon>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner">'+
'<div class="desc">'+ data['Details'][i]['varCityName']+'</div>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-item>'+
'<ons-list-item class="list__item ons-list-item-inner">'+
'<ons-row class="detail-row row ons-row-inner">'+
'<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+
'<ons-icon fixed-width="true" icon="ion-home" class="ons-icon ons-icon--ion ion-home fa-lg"></ons-icon>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner">'+
'<div class="desc">'+ data['Details'][i]['varPhysicalAddress'] + '</div>'+
'</ons-col> '+
'</ons-row>'+
'</ons-list-item>'+
'<ons-list-item class="list__item ons-list-item-inner">'+
'<ons-row class="detail-row row ons-row-inner">'+
'<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+
'<ons-icon fixed-width="true" icon="ion-soup-can" class="ons-icon ons-icon--ion ion-soup-can fa-lg">'+
'</ons-icon>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner">'+
'<div class="desc">' + data['Details'][i]['varPOBOXAddress']+'</div>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-item>'+
'</ons-list>'+
'<div class=caw-botton>'+
'<ons-row class="row ons-row-inner">'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
'<div style="border-right: 1px solid rgba(221,221,221,0.6); padding: 12px 0; background: #0ad046; color: #FFF;">'+
'<i class="ion-compose">'+'</i>Book Now</div>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("review.html");>'+
'<div style="padding: 12px 0; background: #cccccc; color: #FFF;">'+
'<i class="ion-edit">'+
'</i>Write a Review</div>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("email-friend.html");>'+
'<div style="padding: 12px 0; background: #0ad046; color: #FFF;">'+
'<i class="ion-ios-email">'+
'</i>Email-friend</div>'+
'</ons-col>'+
'</ons-row>'+
' </div>';
}
}
$scope.show1 = true;
$scope.show1 = function(){
$scope.show2 = false;
$scope.show3 = false;
$scope.show4 = false;
};
$scope.show2 = true;
$scope.show2 = function(){
$scope.show1 = false;
$scope.show3 = false;
$scope.show4 = false;
};
$scope.show3 = true;
$scope.show3 = function(){
$scope.show1 = false;
$scope.show2 = false;
$scope.show4 = false;
};
$scope.show4 = true;
$scope.show4 = function(){
$scope.show1 = false;
$scope.show2 = false;
$scope.show3 = false;
};
$scope.openChildWindow = function () {
window.open( web, '_blank', 'location=yes');
};
$scope.snippet = Content;
}).error(function ()
{
alert("error");
});
$scope.sendEmail = function(subject, body){
var link = "mailto:"+ email
+ "&subject=New email " + escape(subject);
+ "&body=" + escape(body);
window.location.href = link;
};
$scope.call = function ()
{
parent.location.href = "tel:"+phone;
};
$scope.openWebsite = function ()
{
window.open( web, '_blank', 'location=yes');
};
$scope.openSocialSharing = function ()
{
window.plugins.socialsharing.share('Message,image and link', null, 'https://www.google.com/images/srpr/logo4w.png', 'http://www.google.com');
};
$scope.deliberatelyTrustDangerousSnippet = function ()
{
return $sce.trustAsHtml($scope.snippet);
};
}
});
jsfiddle 显示 google 地图和标记，点击标记后它会显示信息窗口：
<div ng-app="mapsApp" ng-controller="MapCtrl">
<div id="map"></div>
<div id="class" ng-repeat="marker in markers | orderBy : 'title'">
<a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
</div>
</div>
<div id="main-content">
<div ng-controller="EventSimpleCtrl">
<map zoom="4" center="-25.363882, 131.044922">
<marker position="-25.363882, 131.044922" on-click="click()" title="Click to zoom"></marker>
</map>
</div>
</div>
<script>
var app = angular.module('myapp', ['ngMap']);
app.controller('EventSimpleCtrl', ['$scope', '$timeout', function($scope, $timeout) {
var marker, map;
$scope.$on('mapInitialized', function(evt, evtMap) {
map = evtMap;
marker = map.markers[0];
// this one is if you want to keep an hardcoded <info-window>
// var infoWindow = map.infoWindows[0];
});
$scope.click = function(event) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent('Testing');
infoWindow.open(map, marker);
}
}]);
</script>
注意：
我猜你正在以两种方式使用这个库 http://ngmap.github.io, so, from the DOCs it say you can have info-windows，一种是将标签直接放入 <map> 标签中，如下所示：
<info-window id="foo" position="current-location" visible="true"> Some Text Here </info-window>
并像这样访问它
...
function($scope, $timeout) {
var marker, map, infoWindow;
$scope.$on('mapInitialized', function(evt, evtMap) {
map = evtMap;
marker = map.markers[0];
// get the info-window by it's id foo
infoWindow = map.infoWindows['foo'];
});
...
获得它后，您可以像使用普通 GMAP API V3
一样使用它
你好，我是 html 和 angularjs 的新手，我在 google 地图标记上制作了一个 dmeo，我成功地在地图上找到了标记，但现在我想把该标记上的信息窗口，我已经搜索了很多东西但不适合我的场景，所以任何人都可以帮助我如何在地图标记上放置信息窗口，我的代码如下。 html
<div class="mapclass">
<ons-row class="app-map">
<ons-col>
<map center="[{{lat}}, {{lng}}]">
<marker ng-model
position="[{{lat}}, {{lng}}]"
title= "{{tittle}}"
animation="Animation.BOUNCE"
visible="true" ></marker>
</map>
</ons-col>
</ons-row>
</div>
js
app.controller('listingdetailController', function ($http, $scope, $compile, $filter, $sce,$timeout) {
var SearchTxt = 'cay';
var url = encodeURI("http://www.yahoo.com");
var page = gallery.getCurrentPage();
var FkCategory = page.options.params;
var lat='';
var lng = '';
var img = '';
var share = '';
var title = '';
var phone = '';
var web = '';
var email = '';
var about='';
var help='';
var Info='';
var Service='';
$timeout(callAtTimeout, 1000);
function callAtTimeout() {
console.log("Timeout occurred");
share = $scope.share;
// console.log("===iside details======"+FkCategory);
$scope.img = "http://caymanafterwork.netcluesdemo.com/cache/business/images/337_224/papagallo1438959641.jpg";
$http({
method: 'POST',
url: API_HOST+'/webservice/listingdetail',
headers:
{
'Content-Type': 'application/x-www-form-urlencoded',
'caymanauth': caymanauth
},
data: "&Catid=" + FkCategory + "&SearchTxt=" + SearchTxt,
contentType: 'application/x-www-form-urlencoded'
}).success(function (data)
{
var i;
var Content = ' ';
for (i = 0; i<data['Details'].length; i++)
{
lat = + data['Details'][i]['varLatitude'];
lng = + data['Details'][i]['varLongitude'];
img = data['Details'][i]['varCompanyLogo'];
title = data['Details'][i]['varTitle'];
about= data['Details'][i]['varDescBusiness'];
help= data['Details'][i]['varMetaDescription'];
Info= data['Details'][i]['varSpecials'];
Service= data['Details'][i]['varDescBusiness'];
share = data['Details'][i]['varFacebookLink'];
$scope.about = about;
$scope.help = help;
$scope.Info = Info;
$scope.Service = Service;
$scope.title = title;
$scope.photo = ("http://caymanafterwork.netcluesdemo.com/cache/business/images/337_224/"+img);
$scope.lat = lat;
$scope.lng= lng;
$scope.geo = { lat: lat, lng: lng };
$scope.phone= data['Details'][i]['varPhone'];
$scope.web= data['Details'][i]['varWebsiteLink'];
$scope.email= data['Details'][i]['varBusinessEmail'];
phone = $scope.phone;
web = $scope.web;
email = $scope.email;
share = $scope.share;
if (Content === ' ')
{
Content =
'<ons-list class="list ons-list-inner" style="border-top: none;">' +
'<ons-list-item class="list__item ons-list-item-inner">'+
'<ons-row class="detail-row row ons-row-inner">'+
'<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+
'<ons-icon fixed-width="true" icon="fa-map-marker" class="ons-icon fa-map-marker fa fa-lg">'+'</ons-icon>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner">'+
'<div class="desc">'+ data['Details'][i]['varCityName']+'</div>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-item>'+
'<ons-list-item class="list__item ons-list-item-inner">'+
'<ons-row class="detail-row row ons-row-inner">'+
'<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+
'<ons-icon fixed-width="true" icon="ion-home" class="ons-icon ons-icon--ion ion-home fa-lg"></ons-icon>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner">'+
'<div class="desc">'+ data['Details'][i]['varPhysicalAddress'] + '</div>'+
'</ons-col> '+
'</ons-row>'+
'</ons-list-item>'+
'<ons-list-item class="list__item ons-list-item-inner">'+
'<ons-row class="detail-row row ons-row-inner">'+
'<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+
'<ons-icon fixed-width="true" icon="ion-soup-can" class="ons-icon ons-icon--ion ion-soup-can fa-lg">'+
'</ons-icon>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner">'+
'<div class="desc">' + data['Details'][i]['varPOBOXAddress']+'</div>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-item>'+
'</ons-list>'+
'<div class=caw-botton>'+
'<ons-row class="row ons-row-inner">'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
'<div style="border-right: 1px solid rgba(221,221,221,0.6); padding: 12px 0; background: #0ad046; color: #FFF;">'+
'<i class="ion-compose">'+'</i>Book Now</div>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("review.html");>'+
'<div style="padding: 12px 0; background: #cccccc; color: #FFF;">'+
'<i class="ion-edit">'+
'</i>Write a Review</div>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("email-friend.html");>'+
'<div style="padding: 12px 0; background: #0ad046; color: #FFF;">'+
'<i class="ion-ios-email">'+
'</i>Email-friend</div>'+
'</ons-col>'+
'</ons-row>'+
' </div>';
}
else
{
'<ons-list class="list ons-list-inner" style="border-top: none;">' +
'<ons-list-item class="list__item ons-list-item-inner">'+
'<ons-row class="detail-row row ons-row-inner">'+
'<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+
'<ons-icon fixed-width="true" icon="fa-map-marker" class="ons-icon fa-map-marker fa fa-lg">'+'</ons-icon>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner">'+
'<div class="desc">'+ data['Details'][i]['varCityName']+'</div>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-item>'+
'<ons-list-item class="list__item ons-list-item-inner">'+
'<ons-row class="detail-row row ons-row-inner">'+
'<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+
'<ons-icon fixed-width="true" icon="ion-home" class="ons-icon ons-icon--ion ion-home fa-lg"></ons-icon>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner">'+
'<div class="desc">'+ data['Details'][i]['varPhysicalAddress'] + '</div>'+
'</ons-col> '+
'</ons-row>'+
'</ons-list-item>'+
'<ons-list-item class="list__item ons-list-item-inner">'+
'<ons-row class="detail-row row ons-row-inner">'+
'<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+
'<ons-icon fixed-width="true" icon="ion-soup-can" class="ons-icon ons-icon--ion ion-soup-can fa-lg">'+
'</ons-icon>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner">'+
'<div class="desc">' + data['Details'][i]['varPOBOXAddress']+'</div>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-item>'+
'</ons-list>'+
'<div class=caw-botton>'+
'<ons-row class="row ons-row-inner">'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
'<div style="border-right: 1px solid rgba(221,221,221,0.6); padding: 12px 0; background: #0ad046; color: #FFF;">'+
'<i class="ion-compose">'+'</i>Book Now</div>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("review.html");>'+
'<div style="padding: 12px 0; background: #cccccc; color: #FFF;">'+
'<i class="ion-edit">'+
'</i>Write a Review</div>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("email-friend.html");>'+
'<div style="padding: 12px 0; background: #0ad046; color: #FFF;">'+
'<i class="ion-ios-email">'+
'</i>Email-friend</div>'+
'</ons-col>'+
'</ons-row>'+
' </div>';
}
}
$scope.show1 = true;
$scope.show1 = function(){
$scope.show2 = false;
$scope.show3 = false;
$scope.show4 = false;
};
$scope.show2 = true;
$scope.show2 = function(){
$scope.show1 = false;
$scope.show3 = false;
$scope.show4 = false;
};
$scope.show3 = true;
$scope.show3 = function(){
$scope.show1 = false;
$scope.show2 = false;
$scope.show4 = false;
};
$scope.show4 = true;
$scope.show4 = function(){
$scope.show1 = false;
$scope.show2 = false;
$scope.show3 = false;
};
$scope.openChildWindow = function () {
window.open( web, '_blank', 'location=yes');
};
$scope.snippet = Content;
}).error(function ()
{
alert("error");
});
$scope.sendEmail = function(subject, body){
var link = "mailto:"+ email
+ "&subject=New email " + escape(subject);
+ "&body=" + escape(body);
window.location.href = link;
};
$scope.call = function ()
{
parent.location.href = "tel:"+phone;
};
$scope.openWebsite = function ()
{
window.open( web, '_blank', 'location=yes');
};
$scope.openSocialSharing = function ()
{
window.plugins.socialsharing.share('Message,image and link', null, 'https://www.google.com/images/srpr/logo4w.png', 'http://www.google.com');
};
$scope.deliberatelyTrustDangerousSnippet = function ()
{
return $sce.trustAsHtml($scope.snippet);
};
}
});
jsfiddle 显示 google 地图和标记，点击标记后它会显示信息窗口：
<div ng-app="mapsApp" ng-controller="MapCtrl">
<div id="map"></div>
<div id="class" ng-repeat="marker in markers | orderBy : 'title'">
<a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
</div>
</div>
<div id="main-content">
<div ng-controller="EventSimpleCtrl">
<map zoom="4" center="-25.363882, 131.044922">
<marker position="-25.363882, 131.044922" on-click="click()" title="Click to zoom"></marker>
</map>
</div>
</div>
<script>
var app = angular.module('myapp', ['ngMap']);
app.controller('EventSimpleCtrl', ['$scope', '$timeout', function($scope, $timeout) {
var marker, map;
$scope.$on('mapInitialized', function(evt, evtMap) {
map = evtMap;
marker = map.markers[0];
// this one is if you want to keep an hardcoded <info-window>
// var infoWindow = map.infoWindows[0];
});
$scope.click = function(event) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent('Testing');
infoWindow.open(map, marker);
}
}]);
</script>
注意：
我猜你正在以两种方式使用这个库 http://ngmap.github.io, so, from the DOCs it say you can have info-windows，一种是将标签直接放入 <map> 标签中，如下所示：
<info-window id="foo" position="current-location" visible="true"> Some Text Here </info-window>
并像这样访问它
...
function($scope, $timeout) {
var marker, map, infoWindow;
$scope.$on('mapInitialized', function(evt, evtMap) {
map = evtMap;
marker = map.markers[0];
// get the info-window by it's id foo
infoWindow = map.infoWindows['foo'];
});
...
获得它后，您可以像使用普通 GMAP API V3
一样使用它