标签: angular-google-maps
angular-google-maps现在可以在开始时隐藏时正确显示
当使用ng-show/ng-hide隐藏地图时,一旦可见,它就无法正确显示.标准地图也有同样的问题,因为我们可以访问地图对象,所以我们可以向它发送调整大小.
这是一个以隐藏地图开头的示例.该按钮可切换地图的可见性.
<!doctype html>
<html>
<head>
<style>
.angular-google-map-container {
width: 100%;
height: 100px;
}
.mymap {
width: 100%;
height: 100px;
}
</style>
</head>
<body ng-app="app" ng-controller="myCtrl">
<button ng-click="visible = !visible">ToogleMap</button>
<div ng-show="visible">
<google-map center="map.center" zoom="map.zoom"></google-map>
<div class="mymap"></div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js'></script>
<script src='http://maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src='http://underscorejs.org/underscore-min.js'></script>
<script src='https://rawgithub.com/nlaplante/angular-google-maps/master/dist/angular-google-maps.min.js'></script>
<script>
var app = angular.module("app", ["google-maps"]);
app.controller("myCtrl", function($scope, $timeout) {
$scope.map = {
center: {
latitude: 45.4,
longitude: -71.9
},
zoom: 11
};
$scope.visible = false;
});
</script>
</body>
</html>
使用js中的google-maps,我会向地图对象发送一个调整大小,但我无法在angular-google-maps中访问它.
5
推荐指数
推荐指数
2
解决办法
解决办法
5265
查看次数
查看次数
使用angular-google-maps刷新地图和标记
嗨,我正在为我的项目使用angular-google-maps.html和js代码如下
HTML:
<ui-gmap-markers models="apartments" coords="'loc'" icon="'assets/images/map_icon_normal.png'" idkey="'_id'"
fit="'false'" click="click">
<ui-gmap-windows show="'show'" >
<div ng-non-bindable>{{streetAddress}}</div>
</ui-gmap-windows>
</ui-gmap-markers>
</ui-gmap-google-map>
脚本:angular.module('myApp')
.controller('MapCtrl',
function ($scope, $routeParams, Map, uiGmapGoogleMapApi) {
$scope.apartments = [];
$scope.customIcon = "../../assets/images/map_icon_normal.png"
$scope.map = {
center: {
latitude: $routeParams.lat,
longitude: $routeParams.lon
},
zoom: 5,
bounds: {},
events: {
tilesloaded: function (map) {
//console.log('tiles loaded');
$scope.$apply(function () {
$scope.mapInstance = map;
//console.log(map.getBounds().getNorthEast());
$scope.searchbox.options.bounds = new google.maps.LatLngBounds($scope.mapInstance.getBounds().getNorthEast(),
$scope.mapInstance.getBounds().getSouthWest());
});
},
idle: function(map) {
$scope.map.refresh = false;
},
resize: function(map) {
console.log('resize');
},
dragend: …5
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
使用angular-google-maps设置Google地图边界
我正在尝试将界限设置为Google Maps实例,但没有成功.我正在使用AngularJS和angular-google-maps模块.我的最后一次尝试是:
<div id="map_canvas">
<ui-gmap-google-map
center="map.center"
zoom="map.zoom"
bounds="map.bounds"
options="options">
<div ng-repeat="d in devicesMarkers track by d.id">
<ui-gmap-marker
idkey="d.id"
coords="d.center"
options="d.options">
</ui-gmap-marker>
<ui-gmap-circle
center="d.center"
stroke="d.circle.stroke"
fill="d.circle.fill"
radius="d.circle.radius"
visible="d.options.visible">
</ui-gmap-circle>
</div>
</ui-gmap-google-map>
</div>
在我app.js写的:
(...)
.controller('TaihMapController', ['$scope', '$log', 'uiGmapGoogleMapApi', function($scope, $log, GoogleMapApi) {
$scope.devicesMarkers = devices;
$scope.map = {
center: { latitude: devices[0].center.latitude, longitude: devices[0].center.longitude },
zoom: 12,
bounds: {}
// fit: true,
};
GoogleMapApi.then(function(maps) {
$log.debug(maps);
var myBounds = new maps.LatLngBounds();
for (var k = 0; k …5
推荐指数
推荐指数
2
解决办法
解决办法
9202
查看次数
查看次数
Angular-google-maps:如何在标记上动态显示标题和描述
我正在使用Angular-google-maps,HTML代码如下
<ui-gmap-google-map center='mapData.map.center' zoom='mapData.map.zoom'
events="mapEvents">
<ui-gmap-markers models="mapData.map.markers" coords="'self'">
</ui-gmap-markers>
</ui-gmap-google-map>
在JS打电话
angular.extend(this, $controller('MapsMixinController',
{$scope:$scope, map:mapData.data[0].map}));
MapsMixinController如下.从js代码调用此控制器.标记显示和点击能够标记.
MapsMixinController.js
/**
* Controller providing common behaviour for the other map controllers
*/
angular
.module('app')
.controller('MapsMixinController', ['$scope', 'GeolocationService', 'uiGmapGoogleMapApi', 'map',
function($scope, GeolocationService, GoogleMapApi, map) {
var _this = this;
$scope.mapEvents = {
click: function(mapModel, eventName, originalEventArgs) {
var e = originalEventArgs[0];
if (e.latLng) {
$scope.mapData.map.markers.push({
id: new Date().getTime(),
latitude: e.latLng.lat(),
longitude: e.latLng.lng()
});
// This event is outside angular …5
推荐指数
推荐指数
1
解决办法
解决办法
2298
查看次数
查看次数
Angular JS错误:达到10 $ digest()迭代.中止
我正在使用angularjs-google-maps,并且在尝试将我的客户作为地图上的标记循环时收到错误.
<map>
<custom-marker ng-repeat="cust in customers" position="[ {{ cust.lat }}, {{ cust.lon }} ]">
<div class="{{ cust.category }}">{{ cust.name }}</div>
</custom-marker>
</map>
该错误似乎有事情做与cust.category和cust.name,当我删除这些,他们工作得很好.
这是我得到的错误消息的前几行:
Watchers fired in the last 5 iterations: [["[ cust.category , cust.name ]; newVal:
[\"pro\",\"Fred\"]; oldVal: [\"pro\",\"Fred\"]","fn: function (context) {\n
try {\n for(var i = 0, ii = length, part; i<ii; i++) {\n
完整的错误消息在这里.
对此有任何帮助表示赞赏.提前致谢!
UPDATE
代号为定制标记指令,是角谷歌,地图的一部分,是在这里.
5
推荐指数
推荐指数
1
解决办法
解决办法
1580
查看次数
查看次数
Angular - 是否可以销毁组件(不是动态创建的)？
我正在使用Angular 2谷歌地图我们的应用程序之一.我们使用套接字每5秒加载一次标记.当新标记从套接字接收时,需要删除先前的标记.Angular地图官方网站上没有适当的文件.所以想到从我们的app组件中销毁组件.我们让所有子组件找到以下代码.
import { Component, OnInit, ViewChild, ViewChildren, QueryList } from '@angular/core';
import { Socket } from 'ng2-socket-io';
import { Marker } from './google-map';
import { SebmGoogleMapMarker } from 'angular2-google-maps/core';
@Component({
selector: 'app-google-map',
templateUrl: './google-map.component.html',
styleUrls: ['./google-map.component.scss'],
providers: [SebmGoogleMapMarker]
})
export class GoogleMapComponent implements OnInit {
public lat: number = 51.678418;
public lng: number = 7.809007;
public markers: Marker[] = [];
@ViewChildren(SebmGoogleMapMarker) SebmGoogleMapMarkers: QueryList<SebmGoogleMapMarker>;
constructor(private socket: Socket) { }
ngOnInit() {
this.socket.on('markers', this.setMarkers);
}
setMarkers = (data: Marker[]) …5
推荐指数
推荐指数
1
解决办法
解决办法
1952
查看次数
查看次数
旋转angular-google-maps中的标记
我正在尝试使绘图成为车辆移动的路径。我在angular中使用@ agm / core angular-google-maps。我在文档中找不到任何有助于旋转标记的内容。
iconUrl属性没有提供足够的支持。我试过了 ： -
this.iconUrl = {
path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
scale: 6,
fillColor: "red",
fillOpacity: 0.8,
strokeWeight: 2,
rotation: 150 //this is how to rotate the pointer
};
上面的代码在地图上没有显示任何标记。
this.iconUrl = {
url: 'images/car.svg',
scale: 6,
rotation: 150
};
上面的代码显示了标记，但没有缩放或旋转它。
我想旋转标记。有什么可能的方法来实现这一目标？有没有人使用@agm实现此目的。
5
推荐指数
推荐指数
1
解决办法
解决办法
759
查看次数
查看次数
如何初步在谷歌角度地图中缩放地图
我agm/core在显示地图坐标时使用。我有下面的代码
<agm-map [latitude]="10.3207886" [longitude]="123.90250049999997">
<agm-marker [latitude]="10.3207886 [longitude]="123.90250049999997"></agm-marker>
</agm-map>
视图是这样的：
但是我想首先展示这样的街道：
怎么做？
google-maps geolocation typescript angular-google-maps angular
5
推荐指数
推荐指数
2
解决办法
解决办法
8949
查看次数
查看次数
使用Angular为Google地方信息自动填充指定起始位置
我正在使用AGM提供的带有Angular的Google Places Autocomplete API .它运行良好,但我无法手动设置我的起始位置.这意味着,如果我坐在洛杉矶的电脑前,我希望能够告诉API返回结果,就像我在波士顿一样.我相信这可以在谷歌的基础上根据他们的文档,但我还没有弄清楚如何在我正在使用的Angular组件中做到这一点.
任何人都有一个提示如何让这个工作？以下是我的组件的相关部分.谢谢!
setGoogleMapsAutocomplete() {
this.mapsAPILoader.load().then(() => {
let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
types: ["address"]
});
autocomplete.addListener("place_changed", () => {
this.ngZone.run(() => {
let place = autocomplete.getPlace();
this.address = '';
for (var i = 0; i < place.address_components.length; i++)
{
var addressType = place.address_components[i].types[0];
if (this.hasOwnProperty(addressType)) {
let nameLength = addressType == 'administrative_area_level_1' ? 'short_name' : 'long_name';
this[addressType] = place.address_components[i][nameLength];
}
}
this.error = false;
});
});
});
}
5
推荐指数
推荐指数
1
解决办法
解决办法
596
查看次数
查看次数
angular-google-maps中心缩放多个标记
我正在将AngularJS用于Google地图,并希望根据动态加载的多个标记动态居中和缩放地图.这适用于使用Ionic Framework的Cordova应用程序.
这是我的观点:
<ion-view title="" ng-controller="MapCtrl as vm">
<ion-content class="padding">
<google-map id="mainMap" control="vm.googleMap" draggable="true" center="vm.map.center" zoom="vm.map.zoom" mark-click="false">
<markers idKey="mainMap" fit="vm.map.fit">
<marker idKey="marker.id" ng-repeat="marker in vm.map.markers" coords="marker.coords" options="marker.options">
<marker-label content="marker.name" anchor="2 0" class="marker-labels"/>
</marker>
</markers>
</google-map>
</ion-content>
</ion-view>
这是我的控制器:
angular.module('myApp.controllers', [])
.controller('MapCtrl', function($scope, $ionicPlatform) {
var vm = this;
vm.googleMap = {}; // this is filled when google map is initialized, but it's too late
vm.mapMarkers = [];
vm.arrMarkers = [
{
id: "home",
name: …google-maps-api-3 angularjs cordova-3 ionic-framework angular-google-maps
4
推荐指数
推荐指数
2
解决办法
解决办法
1万
查看次数
查看次数
标签 统计
angularjs ×6
angular ×4
google-maps ×3
javascript ×3
cordova-3 ×1
geolocation ×1
html ×1
typescript ×1