谷歌定位 geolocation Google map 定位

最近有个需求，关于国外（主要是美国）的当前位置定位和指定地址并且显示地图。故采用了google map 的 api完成（肯定需要科学上网）。

(写在前面。。。下面的demo google文档也有，但是不好找，特别对于英语不好的人(捂脸))

1.获得当前位置定位，并且返回州和市名称
主要用到两个api，一个是geolocation对象的getCurrentPosition()方法获取位置（目前找到的比较准确的定位，国内外都能用，通过硬件ip或者wifi或者gps），再将经纬度传入google.maps.Geocoder类下面的geocode方法，返回相应信息。

**首先需要一个Google的key，可以去谷歌免费申请**	
引入googel服务,jsonp那种传入一个回调，我是在这里运行初始化函数，在页面渲染的时候就进行定位

    <script
        src="https://maps.google.cn/maps/api/js?key=yourkey&libraries=places&callback=init"
        async defer></script>
    <script>

现在接口，key都有了就可以愉快的开始码代码了
先获取经纬度

 navigator.geolocation.getCurrentPosition(function (position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                console.log(pos);//获取的位置
                if (pos == undefined) {
                    throw "值为空";
                }
                getPosition(pos)//调用包含谷歌接口的api
            },
            function (err) {
                console.warn('ERROR(' + err.code + '): ' + err.message);
            })

将位置传入谷歌接口 navigator.geolocation.getCurrentPosition(fn,fn)有两个回调，一个用于成功的回调，一个失败的回掉(这里考虑了失败的情况，用了try cach)

 function getPosition(latlng) {
            geocoder = new google.maps.Geocoder;
            geocoder.geocode({
                'location': latlng
            }, function (results, status) {
                console.log('進入定位', results, status);
                if (status === 'OK') {
                    try {
                        var firstResult = results[0];
                        var city = firstResult.address_components[2].long_name//城市名
                        var state = firstResult.address_components[5].long_name//州名
                        console.log(firstResult);
                        console.log(city);
                        console.log(state);
                        console.log(city == '' || state == '');
                        if (city == '' || state == '') {
                          doSomething...
                            return 0
                        } else {
 						doSomething...
                                } else {
                                    console.log('fail');
                                     doSomething...
                                }
                            })
                        }
                    } catch (e) {
                        console.log(e);
                        doSomething...
                    }
                } else {
                    doSomething...
                }
            });

        }

2.传入地址，生成地图

这个谷歌文档给了api，我自己删减些（有些用不到），感兴趣的可以直接去文档看看，我这里加了个箭头

     function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: -34.397, lng: 150.644}                                            //这里需要传一个默认的，后面会覆盖
        });
        var geocoder = new google.maps.Geocoder();
        //拼接地址
    var address = 地址//传入地址
        
        geocodeAddress(address,geocoder, map);
      }
        //渲染地图
      function geocodeAddress(address,geocoder, resultsMap) {
       
        geocoder.geocode({'address': address}, function(results, status) {
          if (status === 'OK') {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({                                //加入箭头
              map: resultsMap,
              position: results[0].geometry.location
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }

写在后面，前端弱鸡，大佬轻喷，大家有什么想交流的可以联系我也可以评论。