【问题标题】:Google map Blue-Dot for current location in reactjs谷歌地图蓝点在reactjs中的当前位置
【发布时间】:2018-07-22 09:55:42
【问题描述】:

我正在实施谷歌地图。我想要当前位置的默认谷歌蓝点。任何人都可以告诉,如何做到这一点,在 reactjs 或简单的 javascript..

【问题讨论】:

    标签: javascript reactjs google-maps


    【解决方案1】:

    首先,您必须允许浏览器将您的地理位置发送到 Google API,然后将此代码连接到窗口/文档加载事件:

    var map, infoWindow;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 6
        });
        infoWindow = new google.maps.InfoWindow;
    
        // Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
    
                infoWindow.setPosition(pos);
                infoWindow.setContent('Location found.');
                infoWindow.open(map);
    
                var marker = new google.maps.Marker({
                    position: pos,
                    map: map,
                    title: 'Hello World!',
                    icon: 'https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png',
                });
    
                map.setCenter(pos);
            }, function () {
                //handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
            // Browser doesn't support Geolocation
            //handleLocationError(false, infoWindow, map.getCenter());
        }
    }
    

    【讨论】:

    • 我指的是 gsm 标记。任何想法。
    • 如果您的意思是要更改标记的形状,那么您可以使用“icon”属性将其分配给内置的谷歌标记图像,或者您可以使用自己的。我已经更新了发布的代码。
    猜你喜欢
    • 2013-08-22
    • 1970-01-01
    • 2013-12-10
    • 2014-06-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-03-06
    相关资源
    最近更新 更多