首先创建一个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了,效果如下图:
- 大小: 64.3 KB
分享到:
相关推荐
js调用java代码查询数据库中的数据,通过json传递数据列表
echarts map 地图完整json数据 包含中国json数据,各省数据,各市数据
Datasnap 使用JSON 传递数据的简易方法.mht
SpringMVC中使用JSON传递数据时用的jar包
Qt WebEngine json 数据相互传递 ,QT WebEngine 服务端传送JSON字符串到 网页端,网页端进行解析,网页端生成json字符串,QT 服务端进行解析。 编译环境vs2013 qt5.7
json.js and json.jar 博文链接:https://terran-li2008.iteye.com/blog/199088
服务端使用json 传递 给客户端的一些例子 有的用到了mysql数据库和一些简单的json存储操作 是csdn上例子的总和
本文将快速讲解 JSON 格式,并通过代码示例演示如何分别在客户端和服务器端进行 JSON 格式数据的处理。 尽管有许多宣传关于 XML 如何拥有跨平台,跨语言的优势,然而,除非应用于 Web Services,否则,在普通的 Web...
Gson解析(List和Map)格式json数据 - CSDN博客原创2013年11月23日 21:54:46Gson解析(List和Map)格式json数据天
echarts map 省级js 省市级json数据.................................................
掌握Ajax使用 JSON 进行数据传输 掌握Ajax使用 JSON 进行数据传输 掌握Ajax使用 JSON 进行数据传输
google浏览器插件,json格式化显示工具及安装方法
NULL 博文链接:https://wuniu2010.iteye.com/blog/1771934
使用@RequestBody标签接收json数据,参数类型不能用Sting 看这两个注解的作用 @RequestParam 是作用在形参列表上,RequestParam可以接受简单类型的属性,也可以接受对象类型。在前端传入的是json字符串,后台按字符...
省份数据 provinces.json 城市数据 cities.json 区县数据 areas.json 乡镇(街道)数据 streets.json “省份、城市” 二级联动数据 pc.json “省份、城市” 二级联动数据(带编码) pc-code.json “省份、城市、区县...
json的简单应用 使用json封装数据 html源代码 一个增加删除数据的例子
jquery与java交互通过json传递数据的经典实例,必备,不可多得
河南省18个地市的行政区化图mapJSON数据,可直接用于echarts 地图中
Mvc传递Json数据 Json传输规范。绝对值得
后端使用struts2框架,前端使用ajax两者相互交互,传递json格式数据