Question

我希望用户点击地图上的标记，当他们点击标记时，他们会在同一页面的div中获取该地点的信息。我是JavaScript新手，所以我＆＃39;我发现很难将click事件放在代码中。

这是script.js类

 var map,service ;
    $(document).ready(function () {
        geoLocationInit();
        var myLatLng= new google.maps.LatLng(-33.8665433,151.1956316);



        function  geoLocationInit(){

            if(navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(success, fail);
            }else{
                alert("Browser not supported");
            }
        }
        function  success(position) {
            console.log(position);
            var latval=position.coords.latitude;
            var Ingval=position.coords.longitude;

            myLatLng = new google.maps.LatLng(latval,Ingval);
            createMap(myLatLng);

        }
        function fail(){
            alert("it fails");
        }



        function createMap(myLatLng,type){
            map = new google.maps.Map(document.getElementById('map'), {
                center: myLatLng,
                scrollwheel: false,
                zoom: 12
            });

            var marker= new google.maps.Marker({
                position: myLatLng,
                map: map
            })

            function createMarker(latlng,icn,name){

            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                icon:icn,
                title: name
            });
        }

        var request = {
            location: myLatLng,
            radius: '2500',
            types: ['cafe']
        };



        service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);



            function callback(results,status) {

            if (status == google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                    var place = results[i];
                    console.log(place);
                    latlng= place.geometry.location;
                    name= place.name;
                    icn ='https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';

                    createMarker(latlng,icn,name);


                    service.getDetails({placeId: place.place_id}, function(place, status) {
                        if (status == google.maps.places.PlacesServiceStatus.OK) {
                            let reviewEl = document.querySelector('.reviews');
                            for (let review of place.reviews){
                                let li = document.createElement('li');
                                li.innerHTML = `<div>Name of Place: ${name}</div>
                               <div>Author: ${review.author_name}</div>
                               <em>${review.text}</em>
                               <div>Rating: ${review.rating} star(s)</div>`;

                                reviewEl.appendChild(li);



                            }
                        }})


                }



            }}}});


* {
                                              box-sizing: border-box;
                                          }

这个main.css类

#map {
        width: 500px;
        height: 400px;
    }

    .reviews {
        padding:0;
        list-style:none;
    }

    .reviews li+li {
        margin-top: 1em;
        padding-top: 1em;
        border-top: 1px solid black;
    }
    .reviews em{display:block;margin:0.3em 0;}

Answer 1

尝试在标记声明后添加：

marker.addListener('click', function() {
       infowindow.open(map, marker);
  });

Answer 2

在创建Map方法中，您要在其中创建标记。在那里，你必须为标记点击事件添加事件监听器。

function createMap(myLatLng, type) {
  map = new google.maps.Map(document.getElementById('map'), {
    center: myLatLng,
    scrollwheel: false,
    zoom: 12
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map
  })

  function createMarker(latlng, icn, name) {

    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      icon: icn,
      title: name
    });

    // Listener of click on marker
    marker.addListener('click', function() {
      // Do your stuff.
    });
  }

如何将OnClick侦听器添加到标记，以便在单击时显示div

2 个答案: