当前位置:首页 » 网页前端 » web初始地图
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web初始地图

发布时间: 2022-05-27 07:37:28

㈠ google地图(web版)是怎么实现的

主要技术是javascript,和服务器交互的javascript编程,即Ajax。其中核心技术是地图 API,这里有一个google自己开发的集成 Google AJAX API技术,基于通过标准 HTTP 请求发送的网址参数来创建地图,并将地图作为可在网页上显示的图像返回!

可以去google地图的开发者网站看看 http://code.google.com/intl/zh-CN/apis/maps/documentation/index.html。

㈡ 求javaweb的调用百度地图api的项目 能实现基本功能

<html>
<head>
<!--引用网络地图-->
<script type="text/javascript" src="http://api.map..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);
/*marker = new BMap.Marker(points[i]);
map.addOverlay(marker);
marker.addEventListener("click",function(){

//创建信息窗口
var opts = {
width : 30, // 信息窗口宽度
height: 30, // 信息窗口高度
title : deps[i] // 信息窗口标题
}

var infoWindow = new BMap.InfoWindow(personName[i], opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口

});*/

}
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 : "Hello" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("World", 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:6, strokeOpacity:0.5} //蓝色、宽度为6
);
map.addOverlay(polyline); */
</script>
</body>
</html>

㈢ 请问:现在web开发主要用什么地图呢,另,百度地图api需要收费吗

不收费 api.map..com

㈣ WEB视界的那个卫星地图是怎么做的啊

WEB视界是以谷歌地球、卫星地图、电子地图为主的在线地图工具类网站,从卫星上鸟瞰地球,多源卫星地图,提供实时地图信息,城市地标,旅行信息,为您提供有用的旅行信息。
最核心的东西就是开源地图API,如果你有专门了解过,可以很轻松利用网络等提供的API搭建各种应用。

㈤ web程序怎么初始化一个静态的map,启动加载一次

//下面使用MySql Connector/net提供的专用对象
MySqlConnection mycon = new MySqlConnection(constr);
mycon.Open();
MySqlCommandmycmd = new MySqlCommand("select * from users", mycon);
MySqlDataReader myreader = mycmd.ExecuteReader();
while (myreader.Read())

㈥ 怎么用ArcGIS制作Web地图

ArcGIS
Web地图由底图和一组相关图层构成,用户可与之交互以执行某一有意义的任务。这些地图可供广大用户使用,并且包括多比例底图、针对特定受众的业务图层以及可帮助用户深入了解感兴趣要素的信息弹出窗口。这些地图还支持可视化、编辑、分析和时间功能。它们是
Web 地图应用程序的基础,并且可以通过包括移动设备、桌面应用程序和 Web 浏览器在内的多种客户端进行查看。
如何创作 Web地图
可通过以下三个基本步骤来创建 Web
地图:选择区域,确定要显示的内容,然后保存并共享您的工作。可以从新地图开始创建,或使用现有地图创建。打开现有地图时,可更改范围、定位地点、查看图例、查看有关要素的信息等。不管采用何种方法,都可以从底图库选择底图、添加数据图层、配置弹出窗口、包含特定位置的书签、包含地图的描述,然后将其另存为自己的项目,并通过链接或者将其嵌入网站或应用程序中与他人共享。要创建引人注目的
Web 地图,请考虑以下提示。
创建可用、易用且可操作的地图
高质量的地图可帮助您在 Web 上生动形象地展示地理信息。
作为地图创作者,您的角色实质上就是开放这些信息的访问权,并通过可用、易用且可操作的方式将您的地图呈现出来,无论这些地图是通过浏览器、移动设备还是桌面应用程序来显示。
使用有意义的底图和图层
地图应具有一定的意义,如讲述一段故事、传达一种思想或展示一个情景。为达到这个目的,您的底图和图层应具有以下特点:具有高质量的制图效果的底图和图层、提供多种比例、可快速绘制、包含丰富准确的信息、针对特定群体;如果地图的符号系统不够直观,还需要包含可查看的图例。
您可能还会考虑包含专用于编辑时间、影像和要素的图层。此外,通过添加一些不属于现有图层的要素,还可以帮助您的用户深入了解您的地图。例如,您可能需要在最近的火线中添加一些照片和文字说明。可以通过添加地图注释图层或从文件导入要素来添加要素。
显示重要信息
通常,提供详细信息的最佳方式是在用户与地图交互时将其显示出来,例如,通过在用户发出相关请求时显示弹出窗口和图例。由于图层可能包含大量要素数据,因此应仔细考虑要在弹出窗口中显示哪些属性以及这些信息的显示方式。您不希望您的用户被一些不相关或非必要的信息干扰;而是希望仅显示与特定地图相关的重要信息,并考虑在弹出窗口中包括格式化的文本、图像、图表等。您还可以考虑添加可编辑要素,以便用户可以添加和移除要素及相关信息。
提供充足信息量的项目详细信息
这些用于描述您的地图的信息应该清楚明确。请花一些时间来提供信息性标题、摘要、描述和标签,以便其他人可以了解地图显示的内容。最后,请确保对他人在地图项目详细信息页面添加的任何评论做出响应。您甚至可以主动添加评论,以推广地图中的特定要素;例如,可以鼓励用户查看您刚刚添加的新的航空影像。
与您所在组织的所有人共享
Web 地图可通过 Web
浏览器、移动设备和桌面客户端进行访问,从而使其成为用于与广大用户进行共享的强大工具。要获得最大数量人群的关注,请确保将地图共享给所有人,并确认需要查看您地图的所有人都能够访问所有图层。

㈦ web开发百度地图JS api,地图怎么设置连续显示

获取代码如下:(注意:通常我们在网页中只要插入以下代码,小虫标注出来,其余的可不用。)
1.在<head></head>间插入下面代码:这是样式和JS脚本
<!--引用网络地图API-->
<style type="text/css">
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map..com/api?key=&v=1.1&services=true"></script>

2.在<body></body>间需要显示地图的位置放入以下代码:(该代码调用地图)
<!--网络地图容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
3.以下代码放在页面最底端(其实可放在页面任意位置。)
<script type="text/javascript">
//创建和初始化地图函数:
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
}

//创建地图函数:
function createMap(){
var map = new BMap.Map("dituContent");//在网络地图容器中创建一个地图
var point = new BMap.Point(115.949652,28.693851);//定义一个中心点坐标
map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}

//地图事件设置函数:
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}

//地图控件添加函数:
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}

//标注点数组
var markerArr = [{title:"百恒网络",content:"电话:0791-88117053<br/>手机:15079002975",point:"115.950312|28.693447",isOpen:1,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
];
//创建marker
function addMarker(){
for(var i=0;i<markerArr.length;i++){
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0,p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point,{icon:iconImg});
var iw = createInfoWindow(i);
var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});

(function(){
var index = i;
var _iw = createInfoWindow(i);
var _marker = marker;
_marker.addEventListener("click",function(){
this.openInfoWindow(_iw);
});
_iw.addEventListener("open",function(){
_marker.getLabel().hide();
})
_iw.addEventListener("close",function(){
_marker.getLabel().show();
})
label.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
if(!!json.isOpen){
label.hide();
_marker.openInfoWindow(_iw);
}
})()
}
}
//创建InfoWindow
function createInfoWindow(i){
var json = markerArr[i];
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
return iw;
}
//创建一个Icon
function createIcon(json){
var icon = new BMap.Icon("http://map..com/image/us_cursor.gif", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
return icon;
}

initMap();//创建和初始化地图
</script>

当然,如果你想偷懒,将以上对应代码全放在<body></body>间也是没问题的,呵呵。

㈧ web 网站中添加百度地图导航功能,怎么实现

Web2.0
则更注重用户的交互作用,用户既是网站内容的浏览者,也是网站内容的制造者。越来越多的用户希望从你的网站上面获取到有用的信息,比如:公司地址,电话,业务方面等等...相信网页地图这个小功能必然会为你的网站增色不少;
2
1.打开浏览器,输入map..com,在右上角找到地图API链接,点击;
3
2.进入页面后,拖动鼠标到达页面最下方,找到地图生成器,点击;
4
3.跳转到生成代码页面,首先选择你的城市,在图中所示位置切换,这里以北京为例给大家做演示;
5
4.找到你的位置(或是公司的位置),这里以北京大学为例,单击;
6
5.设置地图,宽度和高度可以自定义,这里使用默认的,下面的一些个选项根据自己的需要去选就行;
7
6.添加标注(就是地图上的小标志),图标可以选择,输入名称和备注,点击保存;
8
7.将标注移动到地图上对应的位置,然后单击标注,即可显示你保存的标注信息,效果如图所示;
9
8.点击复制代码,原则上应该将代码处理后然后插入到网页适当的位置,(有点HTML基础的朋友都知道应该怎么做),这里给大家做演示,就随便新建了一个HTML文件,然后将代码放了进去;
PS:顶部的网页字符格式要和自己的原网页保持一致,如果是在原网页中嵌入代码,这个需要自己处理;

㈨ javaweb 开发有哪些地图插件是到乡镇级别的

<!DOCTYPE><html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>网络地图</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script src="http://api.map..com/api?v=1.4" type="text/javascript"></script></head><body> <input type="text" id="cityName" value="福州"/><input type="button" onclick="setCity()" value="查找" /><div id="container" style="width:1024px;height:600px;"></div> <script type="text/javascript"> var map = new BMap.Map("container"); //在container容器中创建一个地图,参数container为div的id属性; var point = new BMap.Point(120.2,30.25); //创建点坐标 map.centerAndZoom(point, 14); //初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(); //激活滚轮调整大小功能 map.addControl(new BMap.NavigationControl()); //添加控件:缩放地图的控件,默认在左上角; map.addControl(new BMap.MapTypeControl()); //添加控件:地图类型控件,默认在右上方; map.addControl(new BMap.ScaleControl()); //添加控件:地图显示比例的控件,默认在左下方; map.addControl(new BMap.OverviewMapControl()); //添加控件:地图的缩略图的控件,默认在右下方; TrafficControl var search = new BMap.LocalSearch("中国", { onSearchComplete: function(result){ if (search.getStatus() == BMAP_STATUS_SUCCESS){ var res = result.getPoi(0); var point = res.point; map.centerAndZoom(point, 11); } },renderOptions: { //结果呈现设置, map: map, autoViewport: true, selectFirstResult: true } ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数,有了这个,可以简单的改一下返回的html内容了。 // alert(html.innerHTML) }//这一段可以不要,只不过是为学习更深层次应用而加入的。 }); function setCity(){ search.search(document.getElementById("cityName").value); } search.search(document.getElementById("cityName").value); </script></body></html>第二种: 谷歌
首先引入 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
代码如下
js代码
var myLatlng = new google.maps.LatLng(ret.attache.json.lat, ret.attache.json.lng);// 中国地图全图
var optMap =
{
zoom: 15,
center: myLatlng,
streetViewControl:false,
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds: [/**google.maps.MapTypeId.SATELLITE ,google.maps.MapTypeId.HYBRID* */], // comment
position: google.maps.ControlPosition.TOP_LEFT
},
// navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT,
position: google.maps.ControlPosition.LEFT
},
//ROADMAP SATELLITE
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('container'),optMap);
map.setOptions({Zoom:18,center:myLatlng});

html
<div id="locationDiv" >
<div id="container" style="position:relative; width:450px; height:300px;"></div>
</div>