Java-JSP页面嵌入高德地图

最新推荐文章于 2023-11-15 10:33:29 发布

坦GA

最新推荐文章于 2023-11-15 10:33:29 发布

阅读量5.1k

点赞数 3

分类专栏： Java高级/网络基础和缓存分析 JSP/FreeMarker/Velocity/html 文章标签： Java JSP 高德地图

Java高级/网络基础和缓存分析同时被 2 个专栏收录

254 篇文章 6 订阅

订阅专栏

JSP/FreeMarker/Velocity/html

48 篇文章 1 订阅

订阅专栏

原文地址：http://blog.csdn.net/u012440687/article/details/51908619

目标

在Java web应用中的JSP页面嵌入高德地图。

方法

进入高德开发者官网，注册，成为开发者，获取应用的key。
官网：http://lbs.amap.com/api/javascript-api/summary/
在“我的应用中”添加新key(选择JavaScript API平台).

这里写图片描述

我获取的key为：9b2c5c13a6501227c97613b559324a12

样例JSP

见官网开发文档：http://lbs.amap.com/api/javascript-api/summary/

<!doctype html>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

    <title>高德地图展示</title>

    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <!-- 这里要配置参数key,将其值设置为高德官网开发者获取的key -->
    <script src="http://webapi.amap.com/maps?v=1.3&key=9b2c5c13a6501227c97613b559324a12"></script> 
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

    <style type="text/css">
       #container{
          margin-left:500px;
          margin-top:50px;
          width:800px;
          height:500px;
       }
    </style>
</head>
<body>
<div><h2>欢迎进入高德地图</h2></div>
<div id="container"></div>

<script>
    //创建地图,设定地图的中心点和级别
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom:11,
        center: [120.2, 30.3]

    });

   /*  AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){
        //TODO  创建控件并添加
        alert("dddd");
    }) */
    //信息窗体的创建与设定
    var infowindow = new AMap.InfoWindow({
        content: '<h3>高德地图</h1><div>高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。</div>',
        offset: new AMap.Pixel(0, -30),
        size:new AMap.Size(230,0)
   });
   //点标记的创建与添加
    var marker = new AMap.Marker({
        position: [120.2, 30.3],
        map:map
    });

</script>
</body>
</html>
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

效果图

这里写图片描述

坦GA

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Java-JSP页面嵌入高德地图

原文地址：http://blog.csdn.net/u012440687/article/details/51908619目标在Java web应用中的JSP页面嵌入高德地图。方法进入高德开发者官网，注册，成为开发者，获取应用的key。官网：http://lbs.amap.com/api/javascript-api/summary/ 在“我的应用中”
复制链接

扫一扫