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

最新推荐文章于 2020-03-01 20:58:30 发布

最新推荐文章于 2020-03-01 20:58:30 发布 · 209 阅读

文章标签：

#Google #json #Grails #.net #HTML

Groovy on Grails 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用Grails框架创建一个展示商城地理位置的应用，通过定义Mall领域模型并实现MapController控制器来获取所有商城的位置信息，最后利用Google Maps API在Web页面上显示这些位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先创建一个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>