Question

我正在使用Google Maps Javascript API。示例代码;我认为让我接近，但没有达到我的期望。

我硬编码＆＃39; placeid＆＃39; 我希望能引进我现在的位置。我确实在示例代码中引入了当前位置，但Infowindow信息是硬编码的。

我希望了解如何引入“当前位置”＃39;标记和＆＃39; Infowindow＆＃39;动态放置信息而无需对其进行硬编码。

我的破碎脚本遵循＆gt;＆gt;

<script>
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: 42.0491125,
                lng: -92.91123340000001
            },
            zoom: 12
        });

        var infowindow = new google.maps.InfoWindow();
        //       var infoWindow = new google.maps.InfoWindow({map: map});
        var service = new google.maps.places.PlacesService(map);
        service.getDetails({
            // I would like to bring in the current position not a static place id
            placeId: 'EioxMDEgRSBNYWluIFN0LCBNYXJzaGFsbHRvd24sIElBIDUwMTU4LCBVU0E'
        }, function(place, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: place.geometry.location
                });
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
                        'lat lng: ' + place.geometry.location + '<br>' +
                        place.formatted_address + '</div>');
                    infowindow.open(map, this);
                });
            }
        });

        var infoWindow = new google.maps.InfoWindow({
            map: map
        });

        // 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('Home Point.');
                map.setCenter(pos);

                var marker = new google.maps.Marker({

                    title: 'Your current location',
                    map: map,
                    //  title: 'Your current location'
                });

            }, function() {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }
    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
            'Error: The Geolocation service failed.' :
            'Error: Your browser doesn\'t support geolocation.');
    }
</script>
</head>

<body>
    <div id="map"></div>
    <script async defer src="https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&libraries=places&callback=initMap">
    </script>
</body>

</html>

Answer 1

您可以合并Geolocation service来确定当前位置，然后Reverse Geocoding来解析地址信息（包括地点ID），如下所示

＆＃13;

function initMap() {
	var map = new google.maps.Map(document.getElementById('map'), {
		center: { lat: 42.0491125, lng: -92.91123340000001 },
		zoom: 12
	});



	var infoWindow = new google.maps.InfoWindow({ map: map });


	// Try HTML5 geolocation.
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(function (position) {
			var pos = {
				lat: position.coords.latitude,
				lng: position.coords.longitude
			};


			resolvePlace(pos,
				function (place) {

					var marker = new google.maps.Marker({
						title: place.formatted_address,
						map: map,
						position: pos
					});


					//infoWindow.setPosition(pos);
					infoWindow.setContent(place.formatted_address);
					map.setCenter(pos);
					infoWindow.open(map,marker);

				},
				function (status) {
					infoWindow.setPosition(pos);
					infoWindow.setContent('Geocoder failed due to: ' + status);
				});


		}, function () {
			handleLocationError(true, infoWindow, map.getCenter());
		});
	} else {
		// Browser doesn't support Geolocation
		handleLocationError(false, infoWindow, map.getCenter());
	}
}


function resolvePlace(pos, success, error) {

	var geocoder = new google.maps.Geocoder;
	geocoder.geocode({ 'location': pos }, function (results, status) {
		if (status === google.maps.GeocoderStatus.OK) {
			if (results[0]) {
				success(results[0]);
			} else {
				error('No results found');
			}
		} else {
			error(status);
		}
	});

}




function handleLocationError(browserHasGeolocation, infoWindow, pos) {
	infoWindow.setPosition(pos);
	infoWindow.setContent(browserHasGeolocation ?
		'Error: The Geolocation service failed.' :
		'Error: Your browser doesn\'t support geolocation.');
}

＆＃13;

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
}
#map {
        height: 100%;
}

＆＃13;

<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap">
</script>

＆＃13;

Plunker

带上谷歌地图＆＃39; infowindow＆＃39;当前位置的信息

1 个答案: