ReactJS中的Google地图蓝点标记用于显示当前位置

Question

我正在实现谷歌地图..我想要当前位置的默认谷歌蓝点。请问有人知道如何在Reactjs或简单的JavaScript中实现吗？

- tushar

Answer 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());
    }
}

- Voice Of The Rain

---

我在提到GSM标记。你有什么想法吗？ - tushar

如果您想改变标记的形状，那么您可以使用“icon”属性将其分配给内置的谷歌标记图像，或者您可以使用自己的图像。我已经更新了发布的代码。 - Voice Of The Rain