怎样讲百度地图引用到jsp页面中_IT百科

<%@ page contentType="text/htmlcharset=gb2312" language="java" import="java.sql.*" errorPage="" %>

<% String operatorUserId = request.getParameter("operatorUserId")%>

<html>

<head>

</script>

<title>如何调用API</title>

#container{width:100%height:100%}

</style>

</head>

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=0i<points.lengthi++){

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>

可以使用在线地图API，例如百度地图、谷歌地图、搜狗地图等。相对来说比较简单。

如果是企业应用，可以选择使用开源的GeoServer或者超图、ArcGis 等商用引擎。

超图是国产的，价格便宜一些，ArcGis是目前商用引擎中的No.1 功能强大，价格昂贵。

你需要搭建一个Server服务器，以超图为例，你先到超图官网上下载 IServer的安装包，下载你需要

的客户端的API（ Javascript API 、Ajax API 、 Flex Api ）根据实际需要任选其一。然后安装

IServer （安装过程比较简单，如果不明白可以搜索相关资料网上资料很多）。安装完成之后，可以

进入到IServer的管理界面，默认会提供几个测试地图，如果可以通过浏览器访问到默认地图无错

误，即完成服务器端的安装。之后你可以按照你下载的 API 中的示例程序，修改里面的地图服务

器地址为你自己服务器地址。添加自定义标注可以使用超图API中的 Marker 图层来添加，具体代码

可以在示例中找到。

祝您顺利！

如果只是静态的地图图片的话，使用js 就可以做到。

添加这个图片的点击事件。

当点击的时候，获得点击事件，鼠标相对于图片的相对位置。

d出对话框，显示业务数据

点击确定后，在这个图片的相对位置，添加一个小的span 作为标记。然后数据连同这个位置的相对位置入库。

显示也简单，在文档载入的时候，读取数据库的记录，然后循环，根据数据库的相对位置，js动态生成小标记span，设置基于图片的相对位置。点击标记时，根据数据唯一标识。查询数据，并显示在d出框里面。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/bake/11915429.html

怎样讲百度地图引用到jsp页面中

发表评论

评论列表（0条）