谷歌地图罚我不工作？ [英] Google map fine me is not working?

查看：130 发布时间：2016/5/10 20:08:18 javascript jquery angularjs google-maps

本文介绍了谷歌地图罚我不工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经做了谷歌地图与类别筛选它的正常工作。在这里我想介绍fineme（用户当前的位置）。当我点击fineme按钮，它应该带我去的当前位置。我已经把一些code这不是为我工作请有人帮助我移动forward.i增加了我的jsfiddel还

的window.onload =函数（$范围）{\r
变种gmarkers1 = [];\r
变种markers1 = [];\r
VAR信息窗口=新google.maps.InfoWindow（{\r
    内容：''\r
}）;\r
\r
//我们的标志\r
markers1 = [\r
    ['0'，'标题'，52.4357808，4.991315699999973，'车']，\r
    ['1'，'标题'，52.4357808，4.981315699999973，'第三']，\r
    ['2'，'标题'，52.4555687，5.039231599999994，'车']，\r
    ['3'，'标题'，52.4555687，5.029231599999994，'第二']\r
];\r
\r
/ **\r
 *函数来初始化地图\r
 * /\r
\r
函数初始化（）{\r
\r
    VAR中心=新google.maps.LatLng（52.4357808，4.991315699999973）;\r
    VAR的MapOptions = {\r
        变焦：12，\r
        中心：中心，\r
        mapTypeId设为：google.maps.MapTypeId.TERRAIN\r
    };\r
\r
    地图=新google.maps.Map（的document.getElementById（'地图画布'）的MapOptions）;\r
    对于（i = 0; I＆LT; markers1.length;我++）{\r
        addMarker（markers1 [I]）;\r
    }\r
}\r
\r
/ **\r
 *功能添加标记映射\r
 * /\r
\r
功能addMarker（标记）{\r
    变种类别=标记[4];\r
    VAR标题=标记[1];\r
    VAR POS =新google.maps.LatLng（标记[2]，标志[3]）;\r
    变种含量=标记[1];\r
\r
    MARKER1 =新google.maps.Marker（{\r
        标题：标题，\r
        位置：POS机，\r
        类别：类别，\r
        地图：地图\r
    }）;\r
\r
    gmarkers1.push（MARKER1）;\r
\r
    //标记点击监听器\r
    google.maps.event.addListener（MARKER1，'点击'，（功能（MARKER1，内容）{\r
        返回功能（）{\r
            的console.log（'的GMarker 1被推'）;\r
            infowindow.setContent（内容）;\r
            infowindow.open（地图，MARKER1）;\r
            map.panTo（this.getPosition（））;\r
            map.setZoom（15）;\r
        }\r
    }）（MARKER1，内容））;\r
}\r
/ **\r
 *功能当前的当前位置\r
 \r
 * /\r
 $ scope.centerOnMe =功能（）{\r
        如果（！$ scope.map）{\r
          返回;\r
        }\r
\r
        $ scope.loading = $ ionicLoading.show（{\r
          内容：获取当前位置......，\r
          showBackdrop：假的\r
        }）;\r
\r
        navigator.geolocation.getCurrentPosition（功能（POS）{\r
          $ scope.map.setCenter（新google.maps.LatLng（pos.coords.latitude，pos.coords.longitude））;\r
          $ scope.loading.hide（）;\r
        }，功能（错误）{\r
          警报（'无法获取位置：'+返回Error.message）;\r
        }）;\r
      };\r
\r
/ **\r
 *功能来过滤按类别标记\r
 * /\r
\r
filterMarkers =功能（类）{\r
    对于（i = 0; I＆LT; markers1.length;我++）{\r
        标记= gmarkers1 [I]\r
        //如果是同一类或类别不挑\r
        如果（marker.category ==类别|| category.length === 0）{\r
            marker.setVisible（真）;\r
        }\r
        //类别不匹配\r
        其他{\r
            marker.setVisible（假）;\r
        }\r
    }\r
}\r
\r
//初始化地图\r
初始化（）;\r
} //]]＆GT;

＃地图帆布{\r
    宽度：500像素;\r
    高度：500像素;\r
}

＆LT;链接HREF =https://cdnjs.cloudflare.com/ajax /libs/angular.js/1.0.3/angular.min.js的rel =stylesheet属性＆GT;\r
    ＆LT;链接HREF =HTTP：//$c$c.ionicframework.com/nightly/css/ionic.css的rel =stylesheet属性＆GT;\r
    ＆所述; SCRIPT SRC =HTTP：//$c$c.ionicframework.com/nightly/js/ionic.bundle.js＆GT;＆下; /脚本＆GT;\r
\r
      ＆LT;脚本类型=文/ JavaScript的 src=\"https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true&language=ee\"></script>\r
＆LT;一个NG点击=centerOnMe（）级=按钮按钮图标图标离子导航＆GT;查找ME＆LT; / A＆GT;＆LT; BR＆GT;＆LT; BR＆GT;\r
  \r
＆LT;选择一个id =类型的onchange =filterMarkers（THIS.VALUE）;＆GT;\r
    ＆LT;期权价值=＆gt;请选择类别＆LT; /选项＆GT;\r
    ＆LT;期权价值=第二＆gt;第二个＆LT; /选项＆GT;\r
    ＆LT;期权价值=车＆GT;汽车＆LT; /选项＆GT;\r
    ＆LT;期权价值=第三＆GT;三＆LT; /选项＆GT;\r
＆LT; /选择＆GT;\r
  ＆LT; DIV ID =地图画布＆GT;＆LT; / DIV＆GT;

http://jsfiddle.net/cLADs/192/

解决方案

在谷歌地图离子例子展示如何确定当前位置通过地理位置API ：

\r
angular.module（'mapsApp'，['离子']）\r
.controller（'MapCtrl'，函数（$范围，$ ionicLoading）{\r
\r
\r
函数初始化（）{\r
    VAR中心=新google.maps.LatLng（59.341126，18.068565）;\r
    VAR的MapOptions = {\r
        变焦：4，\r
        中心：中心，\r
        mapTypeId设为：google.maps.MapTypeId.TERRAIN\r
    };\r
\r
    $ scope.map =新google.maps.Map（的document.getElementById（'地图画布'）的MapOptions）;\r
}\r
\r
\r
$ scope.centerOnMe =功能（）{\r
        如果（！$ scope.map）{\r
          返回;\r
        }\r
\r
        $ scope.loading = $ ionicLoading.show（{\r
          内容：获取当前位置......，\r
          showBackdrop：假的\r
        }）;\r
\r
        navigator.geolocation.getCurrentPosition（功能（POS）{\r
          $ scope.map.setCenter（新google.maps.LatLng（pos.coords.latitude，pos.coords.longitude））;\r
          $ scope.loading.hide（）;\r
        }，功能（错误）{\r
          警报（'无法获取位置：'+返回Error.message）;\r
        }）;\r
};\r
\r
\r
//初始化地图\r
google.maps.event.addDomListener（窗口'负荷'，初始化）;\r
\r
}）;

＃地图帆布{\r
    宽度：500像素;\r
    高度：500像素;\r
}

＆LT;链接HREF =HTTP：//$c$c.ionicframework。 COM /夜间/ CSS / ionic.css的rel =stylesheet属性＆GT;\r
＆所述; SCRIPT SRC =HTTP：//$c$c.ionicframework.com/nightly/js/ionic.bundle.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本src=\"https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true&language=ee\"></script>\r
＆LT; DIV NG-应用=mapsAppNG控制器=MapCtrl＆GT;\r
   ＆LT;一个NG点击=centerOnMe（）级=按钮按钮图标图标离子导航＆GT;查找ME＆LT; / A＆GT;＆LT; BR＆GT;＆LT; BR＆GT;\r
   ＆LT; DIV ID =地图画布＆GT;＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

Plunker - 谷歌地图的工作例如（类似问题提供）说明如何显示标记，并确定了利用离子框架当前位置。

i have done google map with category filter it's working fine .here i want to introduce fineme(user current location).when i click fineme button it should take me to current location .i have put some code it's not working for me pls some one help me out to move forward.i have added my jsfiddel also

window.onload=function( $scope){
var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
    content: ''
});

// Our markers
markers1 = [
    ['0', 'Title', 52.4357808, 4.991315699999973, 'car'],
    ['1', 'Title', 52.4357808, 4.981315699999973, 'third'],
    ['2', 'Title', 52.4555687, 5.039231599999994, 'car'],
    ['3', 'Title', 52.4555687, 5.029231599999994, 'second']
];

/**
 * Function to init map
 */

function initialize() {

    var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
    var mapOptions = {
        zoom: 12,
        center: center,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    for (i = 0; i < markers1.length; i++) {
        addMarker(markers1[i]);
    }
}

/**
 * Function to add marker to map
 */

function addMarker(marker) {
    var category = marker[4];
    var title = marker[1];
    var pos = new google.maps.LatLng(marker[2], marker[3]);
    var content = marker[1];

    marker1 = new google.maps.Marker({
        title: title,
        position: pos,
        category: category,
        map: map
    });

    gmarkers1.push(marker1);

    // Marker click listener
    google.maps.event.addListener(marker1, 'click', (function (marker1, content) {
        return function () {
            console.log('Gmarker 1 gets pushed');
            infowindow.setContent(content);
            infowindow.open(map, marker1);
            map.panTo(this.getPosition());
            map.setZoom(15);
        }
    })(marker1, content));
}
/**
 * Function to current Postion
 
 */
 $scope.centerOnMe = function() {
        if(!$scope.map) {
          return;
        }

        $scope.loading = $ionicLoading.show({
          content: 'Getting current location...',
          showBackdrop: false
        });

        navigator.geolocation.getCurrentPosition(function(pos) {
          $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
          $scope.loading.hide();
        }, function(error) {
          alert('Unable to get location: ' + error.message);
        });
      };

/**
 * Function to filter markers by category
 */

filterMarkers = function (category) {
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        // If is same category or category not picked
        if (marker.category == category || category.length === 0) {
            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }
    }
}

// Init map
initialize();
}//]]>

#map-canvas {
    width: 500px;
    height: 500px;
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js" rel="stylesheet">
    <link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

      <script type='text/javascript' src="https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true&language=ee"></script>
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a><br><br>
  
<select id="type" onchange="filterMarkers(this.value);">
    <option value="">Please select category</option>
    <option value="second">second</option>
    <option value="car">car</option>
    <option value="third">third</option>
</select>
  <div id="map-canvas"></div>

http://jsfiddle.net/cLADs/192/

解决方案

The Google Maps Ionic example shows how to determine current position via Geolocation API:

 
angular.module('mapsApp', ['ionic'])
.controller('MapCtrl', function ($scope,$ionicLoading) {


function initialize() {
    var center = new google.maps.LatLng(59.341126, 18.068565);
    var mapOptions = {
        zoom: 4,
        center: center,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    $scope.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}


$scope.centerOnMe = function() {
        if(!$scope.map) {
          return;
        }

        $scope.loading = $ionicLoading.show({
          content: 'Getting current location...',
          showBackdrop: false
        });

        navigator.geolocation.getCurrentPosition(function(pos) {
          $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
          $scope.loading.hide();
        }, function(error) {
          alert('Unable to get location: ' + error.message);
        });
};


// Init map
google.maps.event.addDomListener(window, 'load', initialize);

});

#map-canvas {
    width: 500px;
    height: 500px;
}

<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true&language=ee"></script>
<div ng-app="mapsApp" ng-controller="MapCtrl">
   <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a><br><br>
   <div id="map-canvas"></div>
</div>

Plunker - a Google Maps working example (similar to provided in question) that shows how to display markers and determine current position that utilizes Ionic framework.

这篇关于谷歌地图罚我不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

谷歌地图罚我不工作？ [英] Google map fine me is not working?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

谷歌地图罚我不工作？ [英] Google map fine me is not working?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭