ホームページ > ウェブフロントエンド > jsチュートリアル > JSで現在の地理的位置を取得するケースの詳細な説明

JSで現在の地理的位置を取得するケースの詳細な説明

php中世界最好的语言
リリース: 2018-04-17 09:31:22
オリジナル
1880 人が閲覧しました

今回はJSで現在地を取得する場合について詳しく解説していきます。 JSで現在地を取得する際の注意点を実際に見てみましょう。

1. 携帯電話の位置確認

そうです

前提条件は、Baidu API を導入することです:

2. クライアント IP の取得方法

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

var getLocation = function (successFunc, errorFunc) { 

  //successFunc获取定位成功回调函数,errorFunc获取定位失败回调

  //首先设置默认城市

  var defCity = {

    id: '000001',

    name: '北京市',

    date: curDateTime()//获取当前时间方法

  };

  //默认城市

  $.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(defCity), { expires: 1, path: '/' });

  if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(function (position) {

      var lat = position.coords.latitude;

      var lon = position.coords.longitude;

      //var map = new BMap.Map("container");  // 创建Map实例

      var point = new BMap.Point(lon, lat); // 创建点坐标

      var gc = new BMap.Geocoder();

      gc.getLocation(point, function (rs) {

        var addComp = rs.addressComponents;

        var curCity = {

          id: '',

          name: addComp.province,

          date: curDateTime()

        };

        //当前定位城市

        $.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' });

        //alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);

        if (successFunc != undefined)

          successFunc(addComp);

      });

    },

    function (error) {

      switch (error.code) {

        case 1:

          alert("位置服务被拒绝。");

          break;

        case 2:

          alert("暂时获取不到位置信息。");

          break;

        case 3:

          alert("获取位置信息超时。");

          break;

        default:

          alert("未知错误。");

          break;

      }

      var curCity = {

        id: '000001',

        name: '北京市',

        date: curDateTime()

      };

      //默认城市

      $.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' });

      if (errorFunc != undefined)

        errorFunc(error);

    }, { timeout: 5000, enableHighAccuracy: true });

  else {

    alert("你的浏览器不支持获取地理位置信息。");

    if (errorFunc != undefined)

      errorFunc("你的浏览器不支持获取地理位置信息。");

  }

};

var showPosition = function (position) {

  var lat = position.coords.latitude;

  var lon = position.coords.longitude;

  //var map = new BMap.Map("container");  // 创建Map实例

  var point = new BMap.Point(lon, lat); // 创建点坐标

  var gc = new BMap.Geocoder();

  gc.getLocation(point, function (rs) {

    var addComp = rs.addressComponents;

    var curCity = {

      id: '',

      name: addComp.province,

      date: curDateTime()

    };

    //当前定位城市

    $.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' });

    //alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);

  });

};

var showPositionError = function (error) {

  switch (error.code) {

    case 1:

      alert("位置服务被拒绝。");

      break;

    case 2:

      alert("暂时获取不到位置信息。");

      break;

    case 3:

      alert("获取位置信息超时。");

      break;

    default:

      alert("未知错误。");

      break;

  }

  var curCity = {

    id: '000001',

    name: '北京市',

    date: curDateTime()

  };

  //默认城市

  $.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' });

};

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

イベントバスブラザーコンポーネント通信の詳細な説明

Vueコンポーネント

以上がJSで現在の地理的位置を取得するケースの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート