脚本宝典收集整理的这篇文章主要介绍了

angularjs 高德地图 选取坐标 bootstrap modal

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>index.html</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html><br /> <html><br /> <head><br /> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /><br /> <title></title><br /> <meta charset=&quot;utf-8&quot; /> <link href=&quot;http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; /> <script src=&quot;https://webapi.amap.com/maps?v=1.3&amp;key=76f167aa351abefe78920b55777f9be6&quot;></script><br /> </head><br /> <body></p> <div ng-app=&quot;app&quot; ng-controller=&quot;ctrl&quot;> <p>{{point|json}}</p> <p> <a class=&quot;btn btn-primary&quot; ng-click=&quot;show()&quot;>click show</a> </div> <p> <script src=&quot;http://cdn.bootcss.com/angular.js/1.5.6/angular.min.js&quot;></script><br /> <script src=&quot;http://cdn.bootcss.com/angular.js/1.4.9/angular-animate.min.js&quot;></script><br /> <script src=&quot;http://cdn.bootcss.com/angular-ui-bootstrap/1.2.1/ui-bootstrap.min.js&quot;></script><br /> <script src=&quot;http://cdn.bootcss.com/angular-ui-bootstrap/1.2.1/ui-bootstrap-tpls.min.js&quot;></script></p> <p> <script> 'use strict';</p> <p> var app = angular.module('app', ['ngAnimate', 'ui.bootstrap'])</p> <p> app.controller('ctrl', function ($scope, Gd<a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a>ModalService) { $scope.point = {}</p> <p> $scope.show = function () { Gd<a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a>ModalService.showModal($scope.point).result.then(function (point) { $scope.point = point }) } }) </script><br /> <script src=&quot;GdMapModal.js&quot;></script><br /> </body><br /> </html><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"Content-Type"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"text/html; charset=utf-8"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://webapi.amap.com/maps?v=1.3&amp;key=76f167aa351abefe78920b55777f9be6"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">ng-app</span>=<span class="hljs-string">"app"</span> <span class="hljs-attr">ng-controller</span>=<span class="hljs-string">"ctrl"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{point|json}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span> <span class="hljs-attr">ng-click</span>=<span class="hljs-string">"show()"</span>&gt;</span>click show<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://cdn.bootcss.com/angular.js/1.5.6/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://cdn.bootcss.com/angular.js/1.4.9/angular-animate.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://cdn.bootcss.com/angular-ui-bootstrap/1.2.1/ui-bootstrap.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://cdn.bootcss.com/angular-ui-bootstrap/1.2.1/ui-bootstrap-tpls.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"><span class="hljs-meta"> 'use strict'</span>; <span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'app'</span>, [<span class="hljs-string">'ngAnimate'</span>, <span class="hljs-string">'ui.bootstrap'</span>]) app.controller(<span class="hljs-string">'ctrl'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">$scope, Gd<a href="http://www.js-code.com/tag/map" title="浏览关于“Map”的文章" target="_blank" class="tag_link">Map</a>ModalService</span>) </span>{ $scope.point = {} $scope.show = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ GdMapModalService.showModal($scope.point).result.then(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">point</span>) </span>{ $scope.point = point }) } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"GdMapModal.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span> </code></pre> <hr> <p>GdMapModal.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="(function (angular) { function controller($scope, $uibModalInstance, point) { $scope.init = function () { $scope.point = point } $scope.$on('map-click', function (event, e) { $scope.point = { lat: e.lnglat.getLat(), lng: e.lnglat.getLng() } //$scope.$apply() }) $scope.search = function (q) { AMap.service([&quot;AMap.PlaceSearch&quot;], function () { var placeSearch = new AMap.PlaceSearch({ //构造地点查询类 pageSize: 1, pageIndex: 1, //city: &quot;010&quot;, //城市 //map: self.map, //panel: &quot;panel&quot; }) //关键字查询 placeSearch.search(q, function (status, result) { //TODO : 按照自己需求处理查询结果 var poiList = result.poiList if (poiList.count > 0) {<br /> var p = poiList.pois[0]<br /> $scope.$broadcast('setCenter', [p.location.lng, p.location.lat])<br /> }<br /> })<br /> })<br /> }</p> <p> $scope.ok = function () {<br /> $uibModalInstance.close($scope.point);<br /> }</p> <p> $scope.cancel = function () {<br /> $uibModalInstance.dismiss('cancel');<br /> }<br /> }</p> <p> var app = angular.module('app');</p> <p> app.factory('GdMapModalService', ['$uibModal', function ($uibModal) {<br /> var service = {};</p> <p> service.showModal = function (point) {</p> <p> var modalInstance = $uibModal.open({<br /> //animation: false,<br /> templateUrl: 'GdMapModal.html',<br /> controller: ['$scope', '$uibModalInstance', 'point', controller],<br /> size: 'lg',<br /> resolve: {<br /> point: function () {<br /> return point;<br /> },<br /> }<br /> });</p> <p> return modalInstance;<br /> }</p> <p> return service<br /> }]);</p> <p> app.directive('gdMap', function ($timeout) {<br /> return {<br /> restrict: 'EA',<br /> scope: {<br /> point: '=?',<br /> },<br /> template: '</p> <div></div> <p>',<br /> replace: true,<br /> link: function (scope, el, attr, ctrl) {</p> <p> scope.map = new AMap.Map(el[0], {<br /> resizeEnable: true,<br /> zoom: 12,<br /> })</p> <p> if (scope.point.lat &amp;&amp; scope.point.lng) {<br /> var center = [scope.point.lng, scope.point.lat]<br /> scope.map.setCenter(center)<br /> scope.marker = new AMap.Marker({ map: scope.map })<br /> scope.marker.setPosition(center)<br /> }</p> <p> scope.map.on('click', function (e) {<br /> scope.$emit('map-click', e)</p> <p> if (!scope.marker) {<br /> scope.marker = new AMap.Marker({ map: scope.map })<br /> }</p> <p> scope.marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()])<br /> })</p> <p> scope.$on('setCenter', function (event, center) {<br /> if (!scope.map) return<br /> scope.map.setCenter(center)<br /> })<br /> }<br /> }<br /> })</p> <p>})(window.angular)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs clojure"><code>(<span class="hljs-name">function</span> (<span class="hljs-name">angular</span>) { function controller($scope, $uibModalInstance, point) { $scope.init = function () { $scope.point = point } $scope.$on(<span class="hljs-name">'map-click'</span>, function (<span class="hljs-name">event</span>, e) { $scope.point = { lat: e.lnglat.getLat(), lng: e.lnglat.getLng() } //$scope.$apply() }) $scope.search = function (<span class="hljs-name">q</span>) { AMap.service([<span class="hljs-string">"AMap.PlaceSearch"</span>], function () { var placeSearch = new AMap.PlaceSearch({ //构造地点查询类 pageSize: <span class="hljs-number">1</span>, pageIndex: <span class="hljs-number">1</span>, //city: <span class="hljs-string">"010"</span>, //城市 //map: self.map, //panel: <span class="hljs-string">"panel"</span> }) //关键字查询 placeSearch.search(<span class="hljs-name">q</span>, function (<span class="hljs-name">status</span>, result) { //TODO : 按照自己需求处理查询结果 var poiList = result.poiList if (<span class="hljs-name">poiList.count</span> &gt; <span class="hljs-number">0</span>) { var p = poiList.pois[<span class="hljs-number">0</span>] $scope.$broadcast(<span class="hljs-name">'setCenter'</span>, [p.location.lng, p.location.lat]) } }) }) } $scope.ok = function () { $uibModalInstance.close($scope.point)<span class="hljs-comment">;</span> } $scope.cancel = function () { $uibModalInstance.dismiss(<span class="hljs-name">'cancel'</span>)<span class="hljs-comment">;</span> } } var app = angular.module(<span class="hljs-name">'app'</span>)<span class="hljs-comment">;</span> app.factory(<span class="hljs-name">'GdMapModalService'</span>, ['$uibModal', function ($uibModal) { var service = {}<span class="hljs-comment">;</span> service.showModal = function (<span class="hljs-name">point</span>) { var modalInstance = $uibModal.open({ //animation: <span class="hljs-literal">false</span>, templateUrl: 'GdMapModal.html', controller: ['$scope', '$uibModalInstance', 'point', controller], size: 'lg', resolve: { point: function () { return point; }, } })<span class="hljs-comment">;</span> return modalInstance; } return service }])<span class="hljs-comment">;</span> app.directive(<span class="hljs-name">'gdMap'</span>, function ($timeout) { return { restrict: 'EA', scope: { point: '=?', }, template: '&lt;div&gt;&lt;/div&gt;', replace: <span class="hljs-literal">true</span>, link: function (<span class="hljs-name">scope</span>, el, attr, ctrl) { scope.map = new AMap.Map(<span class="hljs-name">el</span>[<span class="hljs-number">0</span>], { resizeEnable: <span class="hljs-literal">true</span>, zoom: <span class="hljs-number">12</span>, }) if (<span class="hljs-name">scope.point.lat</span> &amp;&amp; scope.point.lng) { var center = [scope.point.lng, scope.point.lat] scope.map.setCenter(<span class="hljs-name">center</span>) scope.marker = new AMap.Marker({ map: scope.map }) scope.marker.setPosition(<span class="hljs-name">center</span>) } scope.map.on(<span class="hljs-name">'click'</span>, function (<span class="hljs-name">e</span>) { scope.$emit(<span class="hljs-name">'map-click'</span>, e) if (<span class="hljs-name">!scope.marker</span>) { scope.marker = new AMap.Marker({ map: scope.map }) } scope.marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()]) }) scope.$on(<span class="hljs-name">'setCenter'</span>, function (<span class="hljs-name">event</span>, center) { if (<span class="hljs-name">!scope.map</span>) return scope.map.setCenter(<span class="hljs-name">center</span>) }) } } }) })(<span class="hljs-name">window.angular</span>)</code></pre> <p>GdMapModal.html</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div class=&quot;modal-header&quot;> <h3 class=&quot;modal-title&quot;>选择坐标</h3> </div> <div class=&quot;modal-body&quot; ng-init=&quot;init()&quot;> <div class=&quot;input-group&quot;> <input type=&quot;text&quot; class=&quot;form-control&quot; ng-model=&quot;q&quot; ng-keyup=&quot;$event.keyCode == 13 &amp;&amp; search(q)&quot; placeholder=&quot;Search for...&quot;><br /> <span class=&quot;input-group-btn&quot;><br /> <a class=&quot;btn btn-default&quot; ng-click=&quot;search(q)&quot;>搜索</a><br /> </span> </div> <p><!-- /input-group --><br /> </p> <div gd-map point=&quot;point&quot; style=&quot;height:400px;&quot;></div> </div> <div class=&quot;modal-footer&quot;> <button class=&quot;btn btn-sm btn-default&quot; type=&quot;button&quot; ng-click=&quot;cancel()&quot;>取消</button><br /> <button class=&quot;btn btn-sm btn-primary&quot; type=&quot;button&quot; ng-click=&quot;ok()&quot;>确定</button> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-header"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-title"</span>&gt;</span>选择坐标<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-body"</span> <span class="hljs-attr">ng-init</span>=<span class="hljs-string">"init()"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-control"</span> <span class="hljs-attr">ng-model</span>=<span class="hljs-string">"q"</span> <span class="hljs-attr">ng-keyup</span>=<span class="hljs-string">"$event.keyCode == 13 &amp;&amp; search(q)"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Search for..."</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-btn"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-default"</span> <span class="hljs-attr">ng-click</span>=<span class="hljs-string">"search(q)"</span>&gt;</span>搜索<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-comment">&lt;!-- /input-group --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">gd-map</span> <span class="hljs-attr">point</span>=<span class="hljs-string">"point"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height:400px;"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-footer"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-sm btn-default"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">ng-click</span>=<span class="hljs-string">"cancel()"</span>&gt;</span>取消<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-sm btn-primary"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">ng-click</span>=<span class="hljs-string">"ok()"</span>&gt;</span>确定<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

angularjs 高德地图 选取坐标 bootstrap modal

全部内容,希望文章能够帮你解决

angularjs 高德地图 选取坐标 bootstrap modal

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过