google 地图信息 window 显示在左上角
google map info window shows in top left corner
当我点击 marker
时,info window
显示在左上角,但它应该显示在标记的顶部。
这是情况图:http://i.stack.imgur.com/GHHDE.png
对于每个标记的信息窗口,此元素样式应设置为 css 属性 动态。但是如果你查看生成的元素,你会发现没有 left 或 top css 属性...
<div class="ng-map-info-window"
style="cursor: default;
position:absolute;
width: 110px;
height: 84px;>
有什么想法吗?
------更新(插入代码)
这是我的 angularjs 控制器,用于显示和隐藏信息 window
vm.showDetail = function (e, p) {
vm.p = p;
vm.map.showInfoWindow('foo-iw', p.locationId);
};
vm.hideDetail = function () {
vm.map.hideInfoWindow('foo-iw');
};
这是我的 ui
<marker id='{{p.locationId}}'
ng-repeat="p in locations track by $index"
position="[{{p.locationX}},{{p.locationY}}]"
on-click="vm.showDetail(p)">
<marker>
<info-window id="foo-iw">
<div ng-non-bindable="">
id: {{vm.p.locationId}}<br/>
name: {{vm.p.locationName}}<br/>
<a href="#" ng-click="vm.clicked()">Click Here</a>
</div>
</info-window>
由于 showInfoWindow
函数接受 标记对象 作为第二个参数,因此信息 window 的位置不正确,因此替换行:
vm.map.showInfoWindow('foo-iw', p.locationId);
与:
vm.map.showInfoWindow('foo-iw', this);
我还修复了您发布的示例中的几个拼写错误,这是修复后的版本:
angular.module('mapApp', ['ngMap'])
.controller('mapController', function(NgMap) {
var vm = this;
NgMap.getMap().then(function(map) {
vm.map = map;
});
vm.locations = [
{ locationId: 1, locationName: 'Oslo', locationX: 59.923043, locationY: 10.752839 },
{ locationId: 2, locationName: 'Stockholm', locationX: 59.339025, locationY: 18.065818 },
{ locationId: 3, locationName: 'Copenhagen', locationX: 55.675507, locationY: 12.574227 },
{ locationId: 4, locationName: 'Berlin', locationX: 52.521248, locationY: 13.399038 },
{ locationId: 5, locationName: 'Paris', locationX: 48.856127, locationY: 2.346525 }
];
/*$scope.showCity = function(event, city) {
$scope.selectedCity = city;
$scope.map.showInfoWindow('myInfoWindow', this);
};*/
vm.showDetail = function (e, p) {
vm.p = p;
//vm.map.showInfoWindow('foo-iw', p.locationId);
vm.map.showInfoWindow('foo-iw', this);
};
vm.hideDetail = function () {
vm.map.hideInfoWindow('foo-iw');
};
});
<link href="style.css" rel="stylesheet">
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapController as vm">
<ng-map default-style="true" zoom="5" center="59.339025, 18.065818">
<marker id='{{p.locationId}}'
ng-repeat="p in vm.locations track by $index"
position="[{{p.locationX}},{{p.locationY}}]"
on-click="vm.showDetail(p)">
</marker>
<info-window id="foo-iw">
<div ng-non-bindable="">
id: {{vm.p.locationId}}<br/>
name: {{vm.p.locationName}}<br/>
<a href="#" ng-click="vm.clicked()">Click Here</a>
</div>
</info-window>
</ng-map>
</div>
当我点击 marker
时,info window
显示在左上角,但它应该显示在标记的顶部。
这是情况图:http://i.stack.imgur.com/GHHDE.png
对于每个标记的信息窗口,此元素样式应设置为 css 属性 动态。但是如果你查看生成的元素,你会发现没有 left 或 top css 属性...
<div class="ng-map-info-window"
style="cursor: default;
position:absolute;
width: 110px;
height: 84px;>
有什么想法吗?
------更新(插入代码)
这是我的 angularjs 控制器,用于显示和隐藏信息 window
vm.showDetail = function (e, p) {
vm.p = p;
vm.map.showInfoWindow('foo-iw', p.locationId);
};
vm.hideDetail = function () {
vm.map.hideInfoWindow('foo-iw');
};
这是我的 ui
<marker id='{{p.locationId}}'
ng-repeat="p in locations track by $index"
position="[{{p.locationX}},{{p.locationY}}]"
on-click="vm.showDetail(p)">
<marker>
<info-window id="foo-iw">
<div ng-non-bindable="">
id: {{vm.p.locationId}}<br/>
name: {{vm.p.locationName}}<br/>
<a href="#" ng-click="vm.clicked()">Click Here</a>
</div>
</info-window>
由于 showInfoWindow
函数接受 标记对象 作为第二个参数,因此信息 window 的位置不正确,因此替换行:
vm.map.showInfoWindow('foo-iw', p.locationId);
与:
vm.map.showInfoWindow('foo-iw', this);
我还修复了您发布的示例中的几个拼写错误,这是修复后的版本:
angular.module('mapApp', ['ngMap'])
.controller('mapController', function(NgMap) {
var vm = this;
NgMap.getMap().then(function(map) {
vm.map = map;
});
vm.locations = [
{ locationId: 1, locationName: 'Oslo', locationX: 59.923043, locationY: 10.752839 },
{ locationId: 2, locationName: 'Stockholm', locationX: 59.339025, locationY: 18.065818 },
{ locationId: 3, locationName: 'Copenhagen', locationX: 55.675507, locationY: 12.574227 },
{ locationId: 4, locationName: 'Berlin', locationX: 52.521248, locationY: 13.399038 },
{ locationId: 5, locationName: 'Paris', locationX: 48.856127, locationY: 2.346525 }
];
/*$scope.showCity = function(event, city) {
$scope.selectedCity = city;
$scope.map.showInfoWindow('myInfoWindow', this);
};*/
vm.showDetail = function (e, p) {
vm.p = p;
//vm.map.showInfoWindow('foo-iw', p.locationId);
vm.map.showInfoWindow('foo-iw', this);
};
vm.hideDetail = function () {
vm.map.hideInfoWindow('foo-iw');
};
});
<link href="style.css" rel="stylesheet">
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapController as vm">
<ng-map default-style="true" zoom="5" center="59.339025, 18.065818">
<marker id='{{p.locationId}}'
ng-repeat="p in vm.locations track by $index"
position="[{{p.locationX}},{{p.locationY}}]"
on-click="vm.showDetail(p)">
</marker>
<info-window id="foo-iw">
<div ng-non-bindable="">
id: {{vm.p.locationId}}<br/>
name: {{vm.p.locationName}}<br/>
<a href="#" ng-click="vm.clicked()">Click Here</a>
</div>
</info-window>
</ng-map>
</div>