AngularJS Google地图：点击添加/更新标记并更新中心点

发布时间：2020-12-17 17:15:13 所属栏目：安全来源：网络整理

导读：问题：我无法在Google地图上显示标记.我希望用户单击,要显示的标记以及标记中心的地图. 什么是破碎的：点击时没有标记显示.地图下方的纬度/经度div也不会显示. 有效：地图显示,并正确地以点击位置为中心.变量mapClicked更新为true. 自我诊断：我认为问题源于

问题：我无法在Google地图上显示标记.我希望用户单击,要显示的标记以及标记中心的地图.

什么是破碎的：点击时没有标记显示.地图下方的纬度/经度div也不会显示.

有效：地图显示,并正确地以点击位置为中心.变量mapClicked更新为true.

自我诊断：我认为问题源于vm.map的范围问题,或者在AngularJS生命周期中没有消化对vm.map的更改.

第三方套餐：我正在使用Angular Google Maps.

我的代码片段：

HTML：

<ui-gmap-google-map id="listingMap"
                        center='listingCtrl.map.center'
                        zoom='listingCtrl.map.zoom'
                        events='listingCtrl.map.events'
                        style="height: 250px; width: 100%">

        <ui-gmap-marker ng-if="listingCtrl.mapClicked"
                        coords="listingCtrl.map.marker"
                        idKey=" 'userClickLocation' ">

        </ui-gmap-marker>

</ui-gmap-google-map>

<div class="col-xs-12" ng-if="listingCtrl.map.marker.latitude">
        <span style="font-weight: bold">Latitude: </span>{{ listingCtrl.map.marker.latitude }}
        <span style="font-weight: bold">Longitude: </span>{{ listingCtrl.map.marker.longitude }}
</div>

控制器：

(function () {
    'use strict';
    angular.
        module('boat').
        controller('NewListingController',NewListingController);   

    function NewListingController() {
        var vm = this;

        vm.activePage = 1;
        vm.map = getMap();
        vm.mapClicked = false;

        ////////////////////

        function getMap() {
            var map = {
                center: {latitude: 20.9,longitude: -78.1},zoom: 5,marker: {},events: {
                    click: function (map,eventName,originalEventArgs) {
                        var e = originalEventArgs[0];
                        map.marker = {latitude: e.latLng.lat(),longitude: e.latLng.lng()};
                        map.panTo(new google.maps.LatLng(map.marker.latitude,map.marker.longitude));
                        vm.mapClicked = true;
                    }
                }
            };
            return map;
        }
    }
})();

回顾：期望的行为是用户单击地图以添加标记.坐标应在地图下方呈现.地图应以点击为中心.额外的点击更新单个标记和坐标.

你能帮我吗？

解决方法

问题是click事件处理程序上的map参数与getMap函数中名为map的现有局部变量冲突.

只需将click事件处理程序参数更改为mapObject并调用panTo就可以解决问题.

// ...
      click: function(mapObject,originalEventArgs) {
                      /*^^^^^*/
        var e = originalEventArgs[0];
        map.marker = {
          latitude: e.latLng.lat(),longitude: e.latLng.lng()
        };
        mapObject.panTo(new google.maps.LatLng(map.marker.latitude,map.marker.longitude));
        /*^^^^^*/
        vm.mapClicked = true;
      }
      // ...

JS Fiddle与修复.

或者查看以下代码段.

angular.module('boat',['nemLogging','uiGmapgoogle-maps']);


(function() {
  'use strict';
  angular.
  module('boat').
  controller('NewListingController',NewListingController);

  function NewListingController() {
    var vm = this;

    vm.activePage = 1;
    vm.map = getMap();
    vm.mapClicked = false;

    ////////////////////

    function getMap() {
      var map = {
        center: {
          latitude: 20.9,longitude: -78.1
        },events: {
          click: function(mapObject,originalEventArgs) {
            var e = originalEventArgs[0];
            map.marker = {
              latitude: e.latLng.lat(),longitude: e.latLng.lng()
            };
            mapObject.panTo(new google.maps.LatLng(map.marker.latitude,map.marker.longitude));
            vm.mapClicked = true;
          }
        }
      };
      return map;
    }
  }
})();

.angular-google-map-container {
  height: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.rawgit.com/nmccready/angular-simple-logger/master/dist/browser.js"></script>
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.2.1/angular-google-maps.min.js"></script>
<div ng-app="boat">
  <div ng-controller="NewListingController as listingCtrl">


    <!-- CODE IN QUESTION BEGINS -->


    <ui-gmap-google-map id="listingMap" center='listingCtrl.map.center' zoom='listingCtrl.map.zoom' events='listingCtrl.map.events' style="height: 250px; width: 100%">
      <ui-gmap-marker ng-if="listingCtrl.mapClicked" coords="listingCtrl.map.marker" idKey=" 'userClickLocation' "></ui-gmap-marker>
    </ui-gmap-google-map>
    <div class="col-xs-12" ng-if="listingCtrl.map.marker.latitude"> <span style="font-weight: bold">Latitude: </span>{{ listingCtrl.map.marker.latitude }} <span style="font-weight: bold">Longitude: </span>{{ listingCtrl.map.marker.longitude }}</div>


    <!-- CODE IN QUESTION ENDS -->


  </div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!