javascript - 将自定义图标添加到谷歌地图附近的地方第 2 部分

Question

获取我当前的位置和附近的地方，例如(杂货店或超市)及其图标。

但我想做的是为每个商店提供自己的 Logo 作为图标。

我是 JS 新手，请帮忙!

如果需要，我可以分享代码。

 <script>
    var infowindow,
     placemarkers = [];
    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
    var icons = {
        parking: {
            icon: iconBase + 'parking_lot_maps.png'
        },
        library: {
            icon: iconBase + 'library_maps.png'
        },
        info: {
            icon: iconBase + 'info-i_maps.png'
        },
        grocery_or_supermarket: {
            icon: iconBase + 'convenience.png'
        }
    };

    function placeSearch(map, request) {
        var map = map;
        var service = new google.maps.places.PlacesService(map);
        service.search(request,

        function (results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                var bounds = new google.maps.LatLngBounds();
                for (var i = 0; i < results.length; ++i) {
                    bounds.extend(results[i].geometry.location);
                    placemarkers.push(createMarker(results[i].geometry.location,
                    map,
                    icons['grocery_or_supermarket'].icon,
                    results[i].name,
                    false, {
                        fnc: function () {
                            infowindow.open();
                        }

                    }));
                }
                map.fitBounds(bounds);
            }
        });

    }

    function createMarker(latlng, map, icon, content, center, action) {

        var marker = new google.maps.Marker({
            map: map,
            animation: google.maps.Animation.DROP,
            position: latlng,
            content: content
        });
        ////////toggle bounce////
        google.maps.event.addListener(marker, 'click', toggleBounce);

        function toggleBounce() {

            if (marker.getAnimation() != null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);   } } ///////bounce end////

        if (icon) {
            marker.setIcon(icon);
        }

        if (center) {
            map.setCenter(latlng);
        }

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(this.content);
            infowindow.open(map, this);
        });

        if (action) {
            action.fnc(map, action.args);
        }
        return marker;
    }

    function initialize() {

        var location = new google.maps.LatLng(-33.8665433, 151.1956316),
            map = new google.maps.Map(document.getElementById('map'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: location,
                zoom: 15,
            });


        infowindow = new google.maps.InfoWindow();
        navigator.geolocation.getCurrentPosition(function (place) {
            createMarker(
            new google.maps.LatLng(place.coords.latitude,
            place.coords.longitude),
            map,
            null,
                'your current position',
            true, {
                fnc: placeSearch,
                args: {
                    radius: 5000,
                    types: ['grocery_or_supermarket'],
                    location: new google.maps.LatLng(place.coords.latitude,
                    place.coords.longitude)
                }
            });
        });
    }

    </script>

Answer 1

您可以轻松地使用不多的代码来完成:

var iconBase = 'http://www.yourwebsite.com/';
var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: iconBase + 'myMarker.png' // Set yourt marker here
});

这里有更多关于谷歌地图和图标的信息。 https://developers.google.com/maps/tutorials/customizing/custom-markers

几乎同样的问题，也许可以帮助你: How to change icon on Google map marker