用json传递数据在google map上进行标识

fengzhizi715

浏览: 161695 次
性别:
来自: 上海苏州

最近访客更多访客>>

wu_jiaxiang

yamazakei

nego2009

jklwan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Groovy on Grails

Google json Grails .net HTML

首先创建一个domain:Mall,用于表示商场信息

package net.zhele.domain

class Mall {

    String mallName
    String city
    String province
    String address
    String latitude  //纬度
    String longitude //经度

    static constraints = {
    }
}

创建一个Controller：MapController

package net.zhele.controller

import grails.converters.JSON
import net.zhele.domain.Mall

class MapController {
    
    def json = {
        def resultList = Mall.findAll()
        render resultList as JSON
    }

    def showMap = {
    }
}

showMap.gsp页面

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <g:javascript src="jquery-1.2.4a.js" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
    var map;
    function initialize() {
      var myLatlng = new google.maps.LatLng(31.3114, 120.6134);
      var myOptions = {
        zoom: 15,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      init();
    }
    function init() {
       $.getJSON("/ZheLe/map/json",null,function call(data){
         addSites(data);
       });
    }
    function addSites(data) {
      for(var one in data){
        var mallName = data[one].mallName;
        var latitude = data[one].latitude;
        var longitude = data[one].longitude;
        var address = data[one].address;
        addSite(map,mallName,latitude,longitude,address)
      }
    }
    function addSite(map, siteDesc, lat, lng,address) {
         var location = new google.maps.LatLng(lat,lng)
         var marker = new google.maps.Marker({
         position: location,
         map: map
      });
      attachSecretMessage(marker, siteDesc,address);
    }
    function attachSecretMessage(marker, siteDesc,address) {
      var infowindow = new google.maps.InfoWindow(
          { content: '<b>商场名称: </b>' + siteDesc + '</br>'+'<b>商场地址：</b>'+ address +'</br>'
             ,
            size: new google.maps.Size(50,50)
          });
        google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
      });
    }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

OK了，效果如下图：