<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图</title>
</head>
<body>
<div id="dituContent" style="border-bottom: #ccc 1px solid; border-left: #ccc 1px solid; width: 400px; height: 516px; border-top: #ccc 1px solid; border-right: #ccc 1px solid"></div>
<!-- sub_main end --><!--引用百度地图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><script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
}
//创建地图函数：
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(107.98368,26.592063);//定义一个中心点坐标
map.centerAndZoom(point,16);//设定地图的中心点和坐标并将地图显示在地图容器中
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_LEFT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT});
map.addControl(ctrl_sca);
}
//标注点数组
var markerArr = [{title:"一站式共享网络",content:"一站式共享网络，分享最有用的资料",point:"107.98368|26.592063",isOpen:0,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://openapi.baidu.com/map/Images/kaili/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;
}
initMap();//创建和初始化地图
</script>
</body>
</html>
效果图：
相关推荐
2. 创建自定义图层：使用arcgis for js中的`esri/layers/TileLayer`类，指定百度地图的TMS服务URL（如：`http://api.map.baidu.com/tile?&x={x}&y={y}&z={z}`），并附上API密钥。 3. 添加图层至地图：将创建的图层...
在"js+百度地图api测量面积"的场景下，我们首先需要做的是分析测距功能的工作原理。百度地图API提供了测量距离的工具，它在用户点击地图上的点时，会计算两点之间的直线距离。为了测量面积，我们可以将这个思路扩展...
百度地图JavaScript API是百度提供的一款强大的地图开发工具，它允许开发者通过JavaScript语言在网页上集成地图功能，包括但不限于定位、地图展示、标记、路线规划、地理编码等。这个"百度地图JavaScriptAPI离线版....
步骤2：创建百度地图容器 在HTML中创建一个div元素，作为百度地图的容器： ```html ; height: 100%;"> ``` 步骤3：实现坐标转换函数 由于WGS84和BD09坐标系的差异，我们需要编写一个函数来处理坐标转换。以下是一个...
在JavaScript（js）编程中，实现百度地图的放大、缩小和拖拽查看功能是一项常见的需求。这涉及到对百度地图API的深入理解和应用。百度地图API是百度提供的一套用于开发地图应用的JavaScript库，它允许开发者在网页上...
ArcGIS API for JavaScript的核心功能包括地图创建、图层管理、地理编码、空间分析等，而将它与百度地图结合，可以利用百度地图丰富的服务，如卫星图像、街景视图、实时交通情况等。以下我们将详细探讨这一集成过程...
百度地图JavaScript API是百度提供的一款强大的地图开发工具，主要用于在网页上实现地图的展示、交互以及自定义功能。离线版3.0主要是为了让开发者在没有网络连接的情况下也能使用地图服务，这对于那些需要在局域网...
在IT行业中，JavaScript百度地图API是一个非常实用的工具，它允许开发者在网页上展示地图、定位用户、规划路径等。这个压缩包文件包含了几个关键的资源，帮助我们理解和使用这一功能。 首先，"百度地图用法示例_lj...
百度地图的网页，调用百度地图api的javaScript，这里得创建自己的工单，申请自己的密钥key(申请的是浏览器端)，通过输入经度纬度、线宽、线的颜色、线的透明度，实现百度地图的标点，折线，画图（注意：这里标点输入...
在JavaScript编程领域，实现类似百度地图的交互效果是一项常见的需求，尤其在开发WebGIS应用时。这个项目专注于创建一个可拖拽、放大和缩小的地图功能，让我们深入了解一下这些技术细节。 首先，我们要明白地图的...
4. **Vue.js集成**：这表明开发者可以利用Vue的组件化特性，将百度地图API无缝融入到Vue项目中，创建出具有地图功能的现代Web应用。 5. **版本管理**：文件名中的日期表示API的版本号，用于追踪和控制软件的变化，...
本资源压缩包“基于百度地图的离线地图资源”是为Vue.js框架设计的，旨在帮助开发者实现离线环境下依然能提供地图服务的功能。 首先，我们需要理解Vue.js是一个轻量级的前端JavaScript框架，它以其简洁的API和组件...
百度地图JavaScript API初始化地图创建标注
综上所述，"百度地图标记js"涉及了JavaScript编程、百度地图API的使用、地图标记的创建与管理、地图交互事件处理、定位服务以及HTML与JavaScript的协同工作等多个IT领域的知识点。这些技能对于进行基于地理位置的...
在本文中，我们将深入探讨如何使用百度地图JavaScript API 来绘制轨迹，并添加自定义图标和标注。这是一项在Web开发中常用于地理位置展示和分析的重要技术。首先，我们需要理解百度地图API的基础概念及其核心功能。 ...
这篇教程将深入探讨如何使用ArcGIS API for JavaScript 3.x版本加载百度地图和其影像服务。 首先，我们需要了解ArcGIS API的基本结构。它通过一系列的类、方法和事件来构建地图应用，包括Map对象用于表示地图，...
在实际操作中，要实现“百度地图隐藏无关区域”的功能，开发者需要了解百度地图API的JavaScript接口，如`BMap.Map`对象的`setZoom`和`setCenter`方法来调整地图视图，以及可能用到的`BMap.Bounds`来设定地图的可视...
最近要做一个网页，具体内容是：上边有一个标题，下边分成两块，左边是地图。并且地图上有两个点，点击两个点有相应的提示信息，显示数据库里最新的两条数据信息。右边是一些文字说明。本人刚开始学习，做的也不是很...