使用Google Map进行地点标注
程序员文章站
2022-06-09 19:57:45
...
[b]把此jsp代码直接复制到文件中，即可看到效果，如附件图片一样。[/b]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<%@ page contentType="text/html; charset=UTF-8" language="java"
errorPage=""%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<html>
<head>
<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(79.26, 155.25);
var myOptions = {
zoom : 4,
center : myLatlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
// Add 5 markers to the map at random locations
var southWest = new google.maps.LatLng(39.26, 115.25);
var northEast = new google.maps.LatLng(21.363882, 130.044922);
var bounds = new google.maps.LatLngBounds(southWest, northEast);
map.fitBounds(bounds);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for ( var i = 0; i < 5; i++) {
//伊塞克湖
var location = new google.maps.LatLng(42.40, 77.29);
//博斯腾湖
var location2 = new google.maps.LatLng(42.00, 87.02);
//色林错湖
var location3 = new google.maps.LatLng(31.75, 89.00);
//纳木错湖
var location4 = new google.maps.LatLng(30.65, 90.57);
//达里诺尔
var location5 = new google.maps.LatLng(43.33, 116.62);
//武威
var location6 = new google.maps.LatLng(38.10, 102.97);
//榆林石窟
var location7 = new google.maps.LatLng(40.23, 95.50);
//米兰
var location8 = new google.maps.LatLng(39.12, 88.73);
//策勒
var location9 = new google.maps.LatLng(36.83, 80.83);
//图木舒克
var location10 = new google.maps.LatLng(39.77, 80.02);
//二连浩特
var location11 = new google.maps.LatLng(43.60, 112.13);
//茶卡盐湖
var location12 = new google.maps.LatLng(36.70, 99.10);
//柴达木盐碱
var location13 = new google.maps.LatLng(38.58, 93.12);
//鄂陵湖
var location14 = new google.maps.LatLng(34.90, 97.58);
//格尔木
var location15 = new google.maps.LatLng(36.33, 94.68);
//洱海
var location16 = new google.maps.LatLng(25.78, 100.18);
//呼伦贝尔湖
var location17 = new google.maps.LatLng(48.93, 117.60);
//塔克拉玛干沙漠
var location18 = new google.maps.LatLng(39.83, 80.17);
var marker = new google.maps.Marker( {
position : location,
map : map,
title : "伊塞克湖"
});
var marker2 = new google.maps.Marker( {
position : location2,
map : map,
title : "博斯腾湖"
});
var marker3 = new google.maps.Marker( {
position : location3,
map : map,
title : "色林错湖"
});
var marker4 = new google.maps.Marker( {
position : location4,
map : map,
title : "纳木错湖"
});
var marker5 = new google.maps.Marker( {
position : location5,
map : map,
title : "达里诺尔"
});
var marker6 = new google.maps.Marker( {
position : location6,
map : map,
title : "武威"
});
var marker7 = new google.maps.Marker( {
position : location7,
map : map,
title : "榆林石窟"
});
var marker8 = new google.maps.Marker( {
position : location8,
map : map,
title : "米兰"
});
var marker9 = new google.maps.Marker( {
position : location9,
map : map,
title : "策勒"
});
var marker10 = new google.maps.Marker( {
position : location10,
map : map,
title : "图木舒克"
});
var marker11 = new google.maps.Marker( {
position : location11,
map : map,
title : "二连浩特"
});
var marker12 = new google.maps.Marker( {
position : location12,
map : map,
title : "茶卡盐湖"
});
var marker13 = new google.maps.Marker( {
position : location13,
map : map,
title : "柴达木盐碱"
});
var marker14 = new google.maps.Marker( {
position : location14,
map : map,
title : "鄂陵湖"
});
var marker15 = new google.maps.Marker( {
position : location15,
map : map,
title : "格尔木"
});
var marker16 = new google.maps.Marker( {
position : location16,
map : map,
title : "洱海"
});
var marker17 = new google.maps.Marker( {
position : location17,
map : map,
title : "呼伦贝尔湖"
});
var marker18 = new google.maps.Marker( {
position : location18,
map : map,
title : "塔克拉玛干沙漠"
});
}
}
</script>
</head>
<body onload="initialize()">
<div style="width: auto; height: 500px;">
<!--google地图-->
<div id="map_canvas" style="width: 100%; height: 100%;">
</div>
</div>
</body>
</html>
推荐阅读
-
使用中国邮政储蓄进行Google Adsense西联汇款取款详细步骤
-
CDR怎么使用度量工具对图纸进行标注?
-
使用Java8 Stream API对Map按键或值进行排序
-
java8的新特性，Collections.sort(排序的List集合)的使用，对list封装Map里面的某个值进行排序
-
使用Google Map进行地点标注
-
使用Google Map进行地点标注
-
天猫精灵业务如何使用机器学习PAI进行模型推理优化 阿里巴巴算法google框架
-
Google Earth Engine（GEE）对指定地点Sentinel-2 Level1C数据进行NDVI指数的计算
-
JavaScript中进行数组处理的map()方法的使用方法分析
-
利用apache Collections和google guava对list和map进行过滤和排序