Question

您好我打算制作一个谷歌地图，其中包含代表某些特定地点的标记，其值以条形图的形式显示....

这是我的索引页

- 的index.html -

    <!DOCTYPE html>
<html>
<head>
 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Google Maps with AngularJS - jsFiddle demo</title>


  <script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js"></script>


  <style type='text/css'>
    #map {
    height:420px;
    width:600px;
}
.infoWindowContent {
    font-size:  14px !important;
    border-top: 1px solid #ccc;
    padding-top: 10px;
}
h2 {
    margin-bottom:0;
    margin-top: 0;
}
  </style>
<body ng-app="mainctlr" ng-controller="MainCtrl">

<div id="map1" google-chart chart="chart" style="{{chart.cssStyle}}"></div>

<div id="map"></div>

  <script type='text/javascript'>

angular.module('mainctlr', ['googlechart']).controller("MainCtrl", function ($scope) {


   var cities = [
    {
        city : 'Toronto',
        desc : 'HTML for marker one',
        lat : 43.7000,
        long : -79.4000,

    },
    {
        city : 'New York',
        desc : 'HTML for marker two',
        lat : 40.6700,
        long : -73.9400
    },
    {
        city : 'Chicago',
        desc : 'HTML for marker three',
        lat : 41.8819,
        long : -87.6278
    },
    {
        city : 'Los Angeles&nbsp;&nbsp;<img src=3333.png />',
        desc : 'HTML for marker four',
        lat : 34.0500,
        long : -118.2500
    },
    {
        city : 'Las Vegas',
        desc : 'HTML for marker five',
        lat : 36.0800,
        long : -115.1522
    }
];


    var chart1 = {};
    chart1.type = "ColumnChart";
    chart1.cssStyle = "height:200px; width:300px;";
    chart1.data = {"cols": [
        {id: "month", label: "Month", type: "string"},
        {id: "laptop-id", label: "Laptop", type: "number"},
        {id: "desktop-id", label: "Desktop", type: "number"},
        {id: "server-id", label: "Server", type: "number"},
        {id: "cost-id", label: "Shipping", type: "number"}
    ], "rows": [
        {c: [
            {v: "1"},
            {v: 19, f: "42 items"},
            {v: 12, f: "Ony 12 items"},
            {v: 7, f: "7 servers"},
            {v: 4}
        ]},
        {c: [
            {v: "2"},
            {v: 13},
            {v: 1, f: "1 unit (Out of stock this month)"},
            {v: 12},
            {v: 2}
        ]},
        {c: [
            {v: "1"},
            {v: 24},
            {v: 0},
            {v: 11},
            {v: 6}

        ]},

       {c: [
            {v: "2"},
            {v: 19},
            {v: 1, f: "1 unit (Out of stock this month)"},
            {v: 12},
            {v: 2}
        ]},
        {c: [
            {v: "1"},
            {v: 13},
            {v: 1, f: "1 unit (Out of stock this month)"},
            {v: 12},
            {v: 2}
        ]},
         {c: [
            {v: "2"},
            {v: 24},
            {v: 1, f: "1 unit (Out of stock this month)"},
            {v: 12},
            {v: 2}
        ]},
        {c: [
            {v: "1"},
            {v: 19},
            {v: 1, f: "1 unit (Out of stock this month)"},
            {v: 12},
            {v: 2}
        ]},
        {c: [
            {v: "2"},
            {v: 13},
            {v: 1, f: "1 unit (Out of stock this month)"},
            {v: 12},
            {v: 2}
        ]}
    ]};

    chart1.options = {
        "isStacked": "true",
        "fill": 20,
        "displayExactValues": true
    };

    chart1.formatters = {};

    $scope.chart = chart1;


    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,info.chart),
            title: info.city,
            icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
        });
        marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';

        google.maps.event.addListener(marker, 'click', function(){
            infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content + marker.chart);
            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');
    } 


});





   </script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
</body>


</html>

这是我现在的产出。

enter image description here

当您点击地图上显示的标记时，它会显示一些文字信息

但我的计划是只在我点击弹出窗口内显示的特定标记时才显示条形图。

以下是我正在寻找的示例图片： -

enter image description here

这是我的傻瓜： - http://plnkr.co/edit/YNkmSXLmQt0c7eqKhpi8?p=preview

这些是我实现的目标，并被条形图困住了。所以请帮助我。并提前感谢

Answer 1

为每个标记准备HTML并将相应的HTML添加到

中每个标记的

desc键。

喜欢：

var cities = [
    {
        city : 'Toronto',
        desc : 'HTML for marker one',
        lat : 43.7000,
        long : -79.4000
    },
    {
        city : 'New York',
        desc : 'HTML for marker two',
        lat : 40.6700,
        long : -73.9400
    },
    {
        city : 'Chicago',
        desc : 'HTML for marker three',
        lat : 41.8819,
        long : -87.6278
    },
    {
        city : 'Los Angeles&nbsp;&nbsp;<img src=3333.png />',
        desc : 'HTML for marker four',
        lat : 34.0500,
        long : -118.2500
    },
    {
        city : 'Las Vegas',
        desc : 'HTML for marker five',
        lat : 36.0800,
        long : -115.1522
    }
];

如何在谷歌地图中使用以条形图形式表示地点价值的标记？

1 个答案: