怎样讲百度地图引用到jsp页面中
发布网友
发布时间:2022-04-25 14:24
我来回答
共1个回答
热心网友
时间:2023-10-09 00:20
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<% String operatorUserId = request.getParameter("operatorUserId");%>
<html>
<head>
<!--引用百度地图-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">
</script>
<title>如何调用API</title>
<!-- 设计样式container容器:占50%大小-->
<style type="text/css">
#container{width:100%;height:100%;}
</style>
</head>
<body style="margin-top:0; margin-left:0">
<div id="container" style="margin-top:0; margin-left:0"></div>
<script type="text/javascript">
var map = new BMap.Map("container");//在container容器中创建一个地图,参数container为div的id属性;
map.addControl(new BMap.NavigationControl()); //初始化地图控件
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
var point = new BMap.Point(114.704605,38.282669);//定位 ,实际应用时从配置参数中获取,这个怎么不显示红点呀?
map.centerAndZoom(point,20); //将point移到浏览器中心,并且地图大小调整为20街道级;
//其他坐标点
var points=new Array();
points.push(new BMap.Point(114.705027, 38.284326));//实际应用时从数据库中获取
points.push(new BMap.Point(114.701187, 38.284475));
points.push(new BMap.Point(114.700315, 38.285264));
points.push(new BMap.Point(114.706064, 38.284457));
points.push(new BMap.Point(114.706136, 38.284173));
var deps=["特种车辆","特种车辆","特种车辆","特种车辆","特种车辆","特种车辆"];
var personName=["王鹏","李大力","胡皓东","陈谦","大山","匿名用户"];
//alert(deps[0]+"/"+personName[0]);
for(var i=0;i<points.length;i++){
addMarker(i);
}
function addMarker(j){
marker = new BMap.Marker(points[j]); // 创建标注
map.addOverlay(marker);
var opts = {
width : 10, // 信息窗口宽度
height: 10, // 信息窗口高度
title : deps[j] // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow(personName[j], opts); // 创建信息窗口对象
marker.addEventListener("click", function(){ this.openInfoWindow(infoWindow); });
//marker.setLabel(new BMap.Label("我是百度,呵呵",{offset:new BMap.Size(10,-40)}));
}
//标注
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.addEventListener("click",function(){ //点击标注时出发事件
alert("您点击了标注");
});
marker.enableDragging(); //标注可拖拽
//创建信息窗口
var opts = {
width : 30, // 信息窗口宽度
height: 30, // 信息窗口高度
title : "警告" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("离开工作区", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
//折线
var polyline = new BMap.Polyline([
new BMap.Point(114.705027, 38.284326),//实际应用时从配置参数中获取
new BMap.Point(114.701187, 38.284475),
new BMap.Point(114.700315, 38.285264)
],
{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5} //蓝色、宽度为6
);
map.addOverlay(polyline);
</script>
</body>
</html>