在地图上添加第一个标记并进行地理编码

时间:2013-11-20 15:22:18

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

应用程序,然后是我面临的问题。

应用程序:根据JSON查询读取JSON并将标记添加到地图中。< -Works OK。

然后,当用户点击地图时,添加一个标记并显示当前地址的infowindow。

第二步有效,仅当用户第二次点击地图时(并且从那时起每次都有效)。当用户在地图上点击第一时间时,标记会被添加到该位置,但反向地理编码不起作用,即infowindow不会显示。

从我的调试到目前为止,如果您在第一次点击时看到function dam(latLng)console.log("dam 1");console.log("dam 2");如果仅在第二次点击地图后调用,那么我的猜测是问题就在那里。

任何帮助?

我的代码:

<script type="text/javascript">
        $(function () {
            var map;
            var arrMarkers = [];
            var arrInfoWindows = [];
            var marker = null;
            var infowindow = new google.maps.InfoWindow({
                //size: new google.maps.Size(150,50)
            });

            var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(40.650906,22.88229),
      new google.maps.LatLng(40.601918,23.011723));

            var input = document.getElementById('searchTextField');
            var autocomplete = new google.maps.places.Autocomplete(input, {
                types: ["geocode"], bounds: defaultBounds
            });

            google.maps.event.addListener(autocomplete, 'place_changed', function (event) {
                infowindow.close();
                var place = autocomplete.getPlace();
                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(17);
                }

                //moveMarker(place.name, place.geometry.location);
                map.setCenter(place.geometry.location);
                $('.MapLat').val(place.geometry.location.lat());
                $('.MapLon').val(place.geometry.location.lng());
            });

            function moveMarker(placeName, latlng) {
                //marker.setIcon(image);
                marker.setPosition(latlng);
                infowindow.setContent(placeName);
                infowindow.open(map, marker);
            }

            function createMarker(latlng, name, html) {
                var contentString = html;

                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    zIndex: Math.round(latlng.lat() * -100000) << 5,
                    draggable: false
                });
                google.maps.event.addListener(marker, 'rightclick', function (event) {
                    marker.setMap(null);
                });

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

                google.maps.event.trigger(marker, 'click');
                return marker;
            }


            function mapInit() {

                var styles = [{
                    featureType: "poi.business",
                    stylers: [{
                        visibility: "off"
                    }]
                }]

                var styledMap = new google.maps.StyledMapType(styles, {
                    name: "Styled Map"
                });

                var centerCoord = new google.maps.LatLng(40.629956, 22.95413);
                var mapOptions = {
                    zoom: 14,
                    center: centerCoord,
                    disableDoubleClickZoom: true,
                    mapTypeControl: true,
                    mapTypeControlOptions: {
                        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                        position: google.maps.ControlPosition.BOTTOM_CENTER
                    },
                    panControl: false,
                    zoomControl: false,
                    streetViewControl: false,


                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map"), mapOptions);
                map.mapTypes.set('map', styledMap);
                map.setMapTypeId('map');

                $.getJSON("http://PATH_TO_JSON", {}, function (data) {
                    $.each(data.places, function (i, item) {
                        $("#markers").append('<li><a href="#" rel="' + i + '">' + item.title + '</a></li>');
                        var marker = new google.maps.Marker({
                            position: new google.maps.LatLng(item.lat, item.lng),
                            map: map,
                            title: item.title,
                            //animation:google.maps.Animation.DROP,

                        });
                        arrMarkers[i] = marker;
                        var infowindow = new google.maps.InfoWindow({
                            content: "<h3>" + item.title + "</h3>" + item.description + "<br><img class='img-rounded' src='alertimages/" + item.image + "'/>"
                        });
                        arrInfoWindows[i] = infowindow;
                        google.maps.event.addListener(marker, 'click', function () {
                                 map.setCenter(marker.getPosition());
                    //toggleBounce();
                            for (x = 0; x < arrInfoWindows.length; x++) {
                                arrInfoWindows[x].close();
                            }
                            infowindow.open(map, marker);
                        });
                        function toggleBounce() {

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


                function dam(latLng) {
                console.log("dam 1");
                    google.maps.event.addListener(map, 'click', function (event) {
        console.log("dam 2");

                        $('.MapLat').val(event.latLng.lat());
                        $('.MapLon').val(event.latLng.lng());
                        //infowindow.close();
                        var geocoder = new google.maps.Geocoder();
                        geocoder.geocode({
                            "latLng": event.latLng
                        }, function (results, status) {
                            console.log(results, status);
                            if (status == google.maps.GeocoderStatus.OK) {
                                console.log(results);
                                var lat = results[0].geometry.location.lat(),
                                    lng = results[0].geometry.location.lng(),
                                    addr_name = results[0].address_components[1].long_name,
                                    addr_num = results[0].address_components[0].long_name
                                    latlng = new google.maps.LatLng(lat, lng);


                                $("#searchTextField").val(results[0].formatted_address);
                                infowindow.setContent(addr_name + " " + addr_num + "<br><a href='marker.php?lat="+lat+"&lng="+lng+"&adr="+results[0].formatted_address+"'/>add marker</a>");
                                infowindow.open(map, marker);

                            } else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                                setTimeout(function () {
                                    dam(latLng);
                                }, 200);
                            }
                        });
                    });

                }

               // google.maps.event.addListener(map, 'click', function () {
                    //infowindow.close();
               // });

                google.maps.event.addListener(map, 'click', function (event) {
                infowindow.close();
                    if (marker) {
                        marker.setMap(null);
                        marker = null;

                    }
                    //marker = createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng,dam(event.latLng));
                    marker = createMarker(event.latLng, dam(event.latLng));
                });

            }

            $(function () {
                // initialize map (create markers, infowindows and list)
                mapInit();

                $("#markers").on("click", "a", function () {
                    var i = $(this).attr("rel");
                    // this next line closes all open infowindows before opening the selected one
                    for (x = 0; x < arrInfoWindows.length; x++) {
                        arrInfoWindows[x].close();
                    }
                    arrInfoWindows[i].open(map, arrMarkers[i]);
                });
            });
        });
    </script>

1 个答案:

答案 0 :(得分:1)

没关系,我找到了它。 我不得不删除

google.maps.event.addListener(map, 'click', function (event) { 来自dam功能并更改

"latLng": event.latLng"latLng": latLng。 谢谢你的阅读!