文章/答案/技术大牛

发布

社区首页 >问答首页 >Grails google地图可视化

问Grails google地图可视化
EN

Stack Overflow用户

提问于 2015-10-16 22:26:56

回答 1查看 184关注 0票数 0

我使用Grails将数据从数据库推送到Google可视化。

有人知道足够多的地图包，使onClick框描述框时，单击，显示一个链接？我在这里把它发布给OpenShift：

http://map-whcw.rhcloud.com/address/map

普惠制代码：

<html>
<head>
<title>Map using address data from database</title>
<meta name="layout" content="main" />


 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script>


 google.load('visualization', '1', { 'packages': ['map'] });
 google.setOnLoadCallback(drawMap);

 function drawMap() {
 var data = google.visualization.arrayToDataTable([
   ['Address', 'Name'],
   <g:each in="${places}" var="place" status="i">["${place.fullAddress}", "${place.longDescription }"],</g:each>

   ]);

   var options = {useMapTypeControl:true, showTip: true };

  var map = new google.visualization.Map(document.getElementById('chart_div'));

map.draw(data, options);
};
 </script>

  </head>
 <body>
    <a href="#show-address" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>
    <div class="nav" role="navigation">
        <ul>
            <li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></li>
                <li><g:link class="list" action="index"> Address List </g:link>       </li>
                <li><g:link class="create" action="create"> New Address     </g:link></li>
        </ul>
        </div>
    <div id="chart_div"></div>
    <br><br>

     <a href="http://developers.google.com/chart/interactive/docs/gallery/map">Map Visualization Information</a>
<br>
<br>

 </body>
</html>

javascript

google-maps

grails

google-visualization

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-10-17 05:19:50

来自google地图示例页面。

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33180468

复制

相似问题

问Grails google地图可视化
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Grails google地图可视化EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Grails google地图可视化
EN