Question

我在我的应用中添加了谷歌地图，并创建了一个标记，但是当我打开视图时，我在屏幕上显示当前位置。

我想要的是谷歌地图打开时，标记位置。
我使用的是cordova-plugin-geolocation。

更新代码

.controller('mapCtrl', function($scope, $state, $http, $cordovaGeolocation) {
    /// Main map
    this.Tool = function() {
            var markers = [];
    $scope.id= sessionStorage.getItem('product_info_id');
    var str="http://www.manaspp.hol.es/markers.php?product_id="+$scope.id;
        $http.get(str).then(function (response){
          markers = response;
          console.log(markers);
        var records = markers.data.markers;
        for (var i = 0; i < records.length; i++) 
        {
          var record = records[i];   
    var myCenter = new google.maps.LatLng(record.lat, record.lng);
    var mapOptions = {
      center: myCenter,
      zoom: 15,
      disableDefaultUI: true
    };
           $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
     google.maps.event.addListenerOnce($scope.map, 'idle', function(){  
            loadMarkers();
         });
        }
     }); 


  // Marker loading use php script
    function loadMarkers(){  
    var markers = [];
    $scope.id= sessionStorage.getItem('product_info_id');
    var str="http://www.manaspp.hol.es/markers.php?product_id="+$scope.id;
        $http.get(str).then(function (response){
          markers = response;
          console.log(markers);
        var records = markers.data.markers;
        for (var i = 0; i < records.length; i++) 
        {
          var record = records[i];   
          var markerPos = new google.maps.LatLng(record.lat, record.lng);

          // Add the markerto the map
          var marker = new google.maps.Marker({
              map: $scope.map,
              animation: google.maps.Animation.DROP,
              position: markerPos
          });
          var infoWindowContent = "<h4>" + record.name + "</h4>";          
          addInfoWindow(marker, infoWindowContent, record);
        }
     });     

     }

     function addInfoWindow(marker, message, record) {

      var infoWindow = new google.maps.InfoWindow({
          content: message
      });

      google.maps.event.addListener(marker, 'click', function () {
          infoWindow.open($scope.map, marker);
      });
    }
    window.location.href = "#/page10";
    }
    })

Answer 1

试试这个，

地图将以您应用的标记为中心。即 myCenter

    var myCenter = new google.maps.LatLng(latitude, longitude);
    var mapCanvas = document.getElementById("googleMap");
    var mapOptions = {
      center: myCenter,
      zoom: 8,
      disableDefaultUI: true
    };
    var map = new google.maps.Map(mapCanvas, mapOptions);
    var marker = new google.maps.Marker({position:myCenter});
    marker = new MarkerWithLabel({
     zoom: 8,
     position: new google.maps.LatLng(latitude, longitude),
     animation: google.maps.Animation.DROP,
     labelAnchor: new google.maps.Point(10, 38),
     labelClass: "markLabelsJob",
     labelInBackground: false,
     icon: 'img/rsz_active-job-pin.png',
     map: map
   });

Answer 2

这是因为您将位置用作地图中心，也创建了多个标记。
创建一个具有您希望地图居中的纬度和经度的变量，并使用它：

var mapCenter = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
  center: mapCenter,
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

离子谷歌地图，如何设置标记的位置？

2 个答案: