angularjs – 角谷地图搜索功能的工作示例
发布时间:2020-12-17 08:08:59 所属栏目:安全 来源:网络整理
导读:有没有人有一个像谷歌地图团队在这个网站的“搜索框”下显示的工作搜索框的例子: https://angular-ui.github.io/angular-google-maps/#!/api 如果你写的东西确实找到它在一个下拉列表中,但是当你按回车,地图没有回应。 – 当您输入时,如何使地图移动到正
有没有人有一个像谷歌地图团队在这个网站的“搜索框”下显示的工作搜索框的例子:
https://angular-ui.github.io/angular-google-maps/#!/api
如果你写的东西确实找到它在一个下拉列表中,但是当你按回车,地图没有回应。 – 当您输入时,如何使地图移动到正确的位置?
HTML:
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true"> <ui-gmap-search-box template="searchbox.template" events="searchbox.events" position="BOTTOM_RIGHT"></ui-gmap-search-box> <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id"> </ui-gmap-google-map> js控制器: $scope.map = { "center": { "latitude": 52.47491894326404,"longitude": -1.8684210293371217 },"zoom": 15 }; //TODO: set location based on users current gps location $scope.marker = { id: 0,coords: { latitude: 52.47491894326404,longitude: -1.8684210293371217 },options: { draggable: true },events: { dragend: function (marker,eventName,args) { $scope.marker.options = { draggable: true,labelContent: "lat: " + $scope.marker.coords.latitude + ' ' + 'lon: ' + $scope.marker.coords.longitude,labelAnchor: "100 0",labelClass: "marker-labels" }; } } }; var events = { places_changed: function (searchBox) { var place = searchBox.getPlaces(); if (!place || place == 'undefined' || place.length == 0) { console.log('no place data :('); return; } $scope.map = { "center": { "latitude": place[0].geometry.location.lat(),"longitude": place[0].geometry.location.lng() },"zoom": 18 }; $scope.marker = { id: 0,coords: { latitude: place[0].geometry.location.lat(),longitude: place[0].geometry.location.lng() } }; } }; $scope.searchbox = { template: 'searchbox.tpl.html',events: events }; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |