Question

在此代码中，我希望用户点击地图上的标记，当他们点击标记时，他们会返回该特定地点的评论。当时我的工作就是附近的咖啡馆。您所在的位置，在每个咖啡馆放置标记，它只从一个咖啡馆检索回来的评论，而无需选择您想要的咖啡馆。我知道您必须使用onClickEventListener，但我发现很难理解它是如何工作的我在网上搜索了一个解决方案，并在开发者网站上搜索，但我不能像我想做的那样相似。

这是我的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);
                            }
                        }})
                }



            }}}});

这是我的front.blade.php类：

@extends('layouts.master')

    @section('content')

        <div class="container">

          <div id="map">
          </div>
            <ul class="reviews"></ul>

        </div>

    @endsection

这是我的main.css文件：

* {
    box-sizing: border-box;
}

#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;}

下面是我所拥有的截图。只是提醒一下发生了什么，基本上就是让你所在地附近的当地咖啡馆，在每个咖啡馆放一个标记，它只回馈一个没有你的咖啡馆的评论选择你想要的咖啡馆评论。我希望用户点击咖啡馆的标记并回复所选咖啡馆的评论。

如何在单击标记并在地图外部的div中显示时获取数据

0 个答案: