Question

我有一个谷歌地图有关某个位置的几个细节。我想要做的是当用户点击位置图钉时，我想在地图下方显示详细信息。

当前它在地图上显示信息框。

JS

angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(40.0000, -98.0000),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $scope.markers = [];

    var infoWindow = new google.maps.InfoWindow();

    var createMarker = function (info){

        var marker = new google.maps.Marker({
            map: $scope.map,
            position: new google.maps.LatLng(info.lat, info.long),
            title: info.city
        });
        marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';

        google.maps.event.addListener(marker, 'click', function(){
            infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
            infoWindow.open($scope.map, marker);
        });

        $scope.markers.push(marker);

    }  

    for (i = 0; i < cities.length; i++){
        createMarker(cities[i]);
    }

    $scope.openInfoWindow = function(e, selectedMarker){
        e.preventDefault();
        google.maps.event.trigger(selectedMarker, 'click');
    }

});

小提琴 http://jsfiddle.net/livewirerules/n4gyywdc/3/

任何帮助将不胜感激

Answer 1

嘿，我创建了新的jsfiddle here

在该代码中，我在城市详细信息 div下方放置了一个输入字段，该字段将显示标记的详细信息，仅供我仅放置标题的参考。

这里是html：

<div ng-app="mapsApp" ng-controller="MapCtrl">
 <div id="map"></div>
 <h2>
   City Details
 </h2>
 <input id="detail"> 
</div>

这是javascript代码：

//Data
var cities = [
    {
        city : 'Toronto',
        desc : 'This is the best city in the world!',
        lat : 43.7000,
        long : -79.4000
    },
    {
        city : 'New York',
        desc : 'This city is aiiiiite!',
        lat : 40.6700,
        long : -73.9400
    },
    {
        city : 'Chicago',
        desc : 'This is the second best city in the world!',
        lat : 41.8819,
        long : -87.6278
    },
    {
        city : 'Los Angeles',
        desc : 'This city is live!',
        lat : 34.0500,
        long : -118.2500
    },
    {
        city : 'Las Vegas',
        desc : 'Sin City...\'nuff said!',
        lat : 36.0800,
        long : -115.1522
    }
];

//Angular App Module and Controller
angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(40.0000, -98.0000),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $scope.markers = [];

    var infoWindow = new google.maps.InfoWindow();

    var createMarker = function (info){

        var marker = new google.maps.Marker({
            map: $scope.map,
            position: new google.maps.LatLng(info.lat, info.long),
            title: info.city
        });
        marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';

        google.maps.event.addListener(marker, 'click', function(){
            infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
            infoWindow.open($scope.map, marker);
            console.log(marker.title);
            /*
             *1. You can use the jquery selector as well, but for this example I used the pure javascript.
             *2. You can access other values of marker here based on the requirement.
             */
            document.getElementById("detail").value = marker.title;
        });

        $scope.markers.push(marker);

    }  

    for (i = 0; i < cities.length; i++){
        createMarker(cities[i]);
    }

    $scope.openInfoWindow = function(e, selectedMarker){
        e.preventDefault();
        google.maps.event.trigger(selectedMarker, 'click');
    }

});

此外，您可以从标记中的对象获取数据，但必须更改一点代码。希望这会对你有所帮助。

Answer 2

对于Angular版本：

将此添加到html：

 <div id="divId"></div> 

 //this line to on click function of marker.
 var myEl = angular.element( document.querySelector( '#divId' ) );
 myEl.append('<p>' + marker.title + '</p>' + marker.content');

如何在Google地图外部点击位置详细信息

2 个答案: