<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<!--引用百度地图API-->
<style type="text/css">
.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.baidu.com/api?key=&v=1.1&services=true"></script>
</HEAD>
<BODY>
<div class="zwxx"><img src="images/lxdt.gif" /></div>
<div class="zwxx">
<!--百度地图容器-->
<div style="width:678px;height:450px;border:#ccc solid 1px;" id="dituContent"></div>
</div>
</div>
</BODY>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
addRemark();//向地图中添加文字标注
}
//创建地图函数：
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(113.57964,34.817342);//定义一个中心点坐标
map.centerAndZoom(point,14);//设定地图的中心点和坐标并将地图显示在地图容器中
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:"郑州市高新技术产业开发区翠竹街1号总部企业基地33号楼",point:"113.571591|34.823861",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
];
//创建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://openapi.baidu.com/map/images/us_mk_icon.png", 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;
}
//文字标注数组
var lbPoints = [{point:"113.572561|34.822942",content:"电话：0371-88888518"}
];
//向地图中添加文字标注函数
function addRemark(){
for(var i=0;i<lbPoints.length;i++){
var json = lbPoints[i];
var p1 = json.point.split("|")[0];
var p2 = json.point.split("|")[1];
var label = new BMap.Label("<div style='padding:2px;'>"+json.content+"</div>",{point:new BMap.Point(p1,p2),offset:new BMap.Size(3,-6)});
map.addOverlay(label);
label.setStyle({borderColor:"#999"});
}
}
initMap();//创建和初始化地图
</script>
</HTML>
分享到：
相关推荐
标题中的"百度地图全国城市坐标经纬度js文件"指的是两个JavaScript文件，MapCityDataHasXpath.js 和 MapCityDataNoXpath.js，它们包含了中国全国各地城市的经纬度坐标数据。这些数据对于实现基于百度地图的应用，如...
OpenLayers是一个开源JavaScript库，用于创建交互式的地图应用，而百度地图是中国领先的在线地图服务提供商，提供丰富的地图数据和API。 要实现OpenLayers调用百度地图，我们需要做以下几步： 1. **理解OpenLayers...
在本教程中，我们将深入探讨如何将Leaflet.js库与百度地图API集成，以创建一个交互式的地图应用。Leaflet是一个轻量级的JavaScript库，专门用于开发移动设备友好的Web地图。而百度地图是中国领先的在线地图服务提供...
通常，每个示例会涉及创建地图对象、加载地图控件、添加标注、设置事件监听器等步骤，同时，还需要正确引用百度地图的库文件。 学习这个案例的过程中，你可能会遇到以下几个关键概念： - **初始化地图**：调用`...
离线版百度地图js压缩包是一个专为在无网络环境下使用的百度地图服务设计的资源集合。这个压缩包包含了实现离线地图功能所必需的核心JavaScript库和相关数据文件。通过使用这些资源，开发者可以在本地或者局域网环境...
【index.html】是应用程序的主网页文件，其中包含了页面的基本结构和引用的外部资源，如JavaScript脚本和CSS样式表。在离线版百度地图中，index.html可能包含了地图的初始化代码，用于加载地图数据和设置地图的初始...
在"index.htm"文件中，我们可以看到一个示例网页的代码，其中包含了引入百度地图JavaScript库的脚本链接，以及初始化地图、设置地图中心点、添加地图控件等基本操作。为了实现地区联动，我们需要在HTML中创建多级...
在`Index.aspx`中，开发者可能会通过内联JavaScript或者外部JS文件引入百度地图API，并在`<script>`标签内编写调用API的代码。同时，`MapJsonHandler.ashx`处理程序可能用于处理与地图相关的异步请求，比如获取特定...
1. **index.html**：这是网站的主入口文件，包含了HTML结构，通常包括页面布局、链接到CSS样式表和JavaScript脚本的引用，以及可能的内联脚本。在这个游戏中，index.html可能包含了游戏界面的基本元素和初始化代码。...
1. 引用百度地图API：在HTML页面中，我们需要在`<head>`或`<body>`部分引入百度地图的JavaScript库。这里的关键是获取API密钥（key），并将它插入到URL中。例如： ```html <script type="text/javascript" src=...
本教程将详细介绍如何在C#环境中利用JavaScript与百度地图API交互，从而实现获取地图上的经纬度功能。 首先，我们需要理解C#与JavaScript之间的交互原理。C#通常作为后端语言运行在服务器上，而百度地图API则运行在...
压缩包中的`img`目录可能包含用于辅助展示的地图图标或其他图片资源，而`js`目录则包含了实现上述功能的JavaScript代码文件，如`index.html`中引用的自定义脚本。通过不断学习和实践，你可以创建出更多富有创意的...
项目中的`webAccessnew`可能是一个包含项目文件、HTML页面、CSS样式表、JavaScript脚本以及可能的C#或VB.NET后端代码的文件夹。这些文件共同组成了一个完整的Web应用，实现了上述功能。 总结，这个项目结合了Web...
"js"文件夹则可能包含了主要的JavaScript代码，包括jQuery库本身、自定义的脚本以及可能的Ajax请求逻辑。"index.html"是网页的主文件，它引用了CSS和JS文件，并定义了HTML结构，如下拉框、地图容器等。 总的来说，...
JavaScript API 是百度地图提供的一套用于开发地图应用的接口，主要使用 JavaScript 语言编写，适用于在网站中构建具有高度互动性的地图功能。开发者可以通过这个 API 在网页中展示地图，进行地图的操作，如平移、...
- 通过JavaScript交互：由于`ChromiumWebBrowser`支持执行JavaScript代码，你可以使用`ExecuteScriptAsync`方法来调用百度地图API的JavaScript函数，实现地图的交互操作，如定位、标记、路线规划等。 2. **...
在本文中，将详细介绍如何在Vue.js开发环境下，利用vue-cli脚手架引入并使用百度地图API来实现地图功能。首先，需要明确几个关键点：什么是vue-cli脚手架，百度地图API是什么，以及如何在Vue项目中集成百度地图API。...
`js`文件夹可能包含了自定义的JavaScript脚本，这些脚本可能扩展了百度地图API的功能，或者提供了更友好的接口来操作地图。开发者可以在这里找到对地图事件的处理、动态数据的加载、用户交互逻辑等代码。例如，可能...
要在ASP.NET页面中使用百度地图，首先需要在页面的`<head>`部分引入百度地图API的JS文件。例如： ```html <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> ``` 这里使用的是...
接下来，我们需要在ASP.NET项目中引入百度地图的JavaScript库。这可以通过在HTML页面中添加一个脚本引用来实现，如： ```html 你的API密钥"> ``` 这里，`v=2.0`表示使用的是百度地图API的版本2.0，`ak=你的API密钥...