Google Maps API:如何创建持久标记?

时间:2017-11-24 21:11:29

标签: javascript google-maps google-maps-api-3

我正在尝试在HTML中创建一个文本字段,当您提交它时,我想运行一个Javascript函数,将文本字段(县或城市名称)转换为坐标并在地图上标记这些坐标。我的问题是,每次提交表单时,地图都会加载我开始使用的SAME坐标。它将遍历所有功能,甚至使用新坐标打印出警报(因此地理编码代码没有任何问题),但永远不会放下任何新标记。除非我对它们进行硬编码,否则我无法显示标记。这就是我到目前为止所做的:

如果有人能就如何解决这个问题给我一些建议,我真的很感激。谢谢!

    <script>
        // create the global map, count, geocoder and marker objects.
        var map;
        var count = 0;
        var geocoder = new google.maps.Geocoder();
        var markers = []; // Create a marker array to hold your markers

        function setMarkers(locations) {
            //locations = localStorage.getItem('places');
            alert(locations + "   _SETTTT");
            for (var i = 0; i < locations.length; i++) {
                var place = locations[i];
                var myLatLng = new google.maps.LatLng(place[1], place[2]);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    animation: google.maps.Animation.DROP,
                    title: place[0],
                    zIndex: place[3]
                });
                //window.alert(places + " WE ARE IN SETM");
                // Push marker to markers array
                markers.push(marker);
            }
        }

        function reloadMarkers() {
            // Reload the places.
            //places = localStorage.getItem('places');

            alert(places + "   _RELOAD.");
            // Loop through markers and set map to null for each
            for (var i=0; i<markers.length; i++) {

                markers[i].setMap(null);
            }

            // Reset the markers array
            markers = [];

            // Call set markers to re-add markers
            setMarkers(places);
        }

        function addGeoMarkerCount() {
            var newPlace;
            var lat, lon;
            var address = document.getElementById('County').value + ", NJ";
            geocoder = new google.maps.Geocoder();

            window.alert(address);

            geocoder.geocode( { 'address': address}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK)
              {
                count++;
                lat = results[0].geometry.location.lat();
                lon = results[0].geometry.location.lng();
                newPlace = [address, lat, lon, count];

                places.push(newPlace);
                localStorage.setItem('places', places);
                window.alert(places);

                reloadMarkers();
              }
            });

            window.alert("TEST");
        }

        function addGeoMarkerCit(){
            var newPlace;
            var lat, lon;
            var address = document.getElementById('City').value + ", NJ";
            geocoder = new google.maps.Geocoder()

            geocoder.geocode( { 'address': address}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK)
              {
                count++;
                lat = results[0].geometry.location.lat();
                lon = results[0].geometry.location.lng();
                newPlace = [address, lat, lon, count];

                places.push(newPlace);
              }
            });

            reloadMarkers();
        }

        function initialize() {

            // Creates the map options
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(40.0583, -74.4057),
                mapTypeId: google.maps.MapTypeId.TERRAIN
            }

            // Create the initial map
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            // Bind event listener on button to reload markers
            document.getElementById('Search').addEventListener('click', reloadMarkers);
            document.getElementById('CountyName').addEventListener('submit', addGeoMarkerCount);
            document.getElementById('CityName').addEventListener('submit', addGeoMarkerCit);
            reloadMarkers();
        }

        initialize();
    </script>

0 个答案:

没有答案