<!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...
4. **Vue.js集成**：这表明开发者可以利用Vue的组件化特性，将百度地图API无缝融入到Vue项目中，创建出具有地图功能的现代Web应用。 5. **版本管理**：文件名中的日期表示API的版本号，用于追踪和控制软件的变化，...
在JavaScript编程领域，实现类似百度地图的交互效果是一项常见的需求，尤其在开发WebGIS应用时。这个项目专注于创建一个可拖拽、放大和缩小的地图功能，让我们深入了解一下这些技术细节。 首先，我们要明白地图的...
百度地图的网页，调用百度地图api的javaScript，这里得创建自己的工单，申请自己的密钥key(申请的是浏览器端)，通过输入经度纬度、线宽、线的颜色、线的透明度，实现百度地图的标点，折线，画图（注意：这里标点输入...
本资源压缩包“基于百度地图的离线地图资源”是为Vue.js框架设计的，旨在帮助开发者实现离线环境下依然能提供地图服务的功能。 首先，我们需要理解Vue.js是一个轻量级的前端JavaScript框架，它以其简洁的API和组件...
百度地图JavaScript API初始化地图创建标注
在本文中，我们将深入探讨如何使用百度地图JavaScript API 来绘制轨迹，并添加自定义图标和标注。这是一项在Web开发中常用于地理位置展示和分析的重要技术。首先，我们需要理解百度地图API的基础概念及其核心功能。 ...
综上所述，"百度地图标记js"涉及了JavaScript编程、百度地图API的使用、地图标记的创建与管理、地图交互事件处理、定位服务以及HTML与JavaScript的协同工作等多个IT领域的知识点。这些技能对于进行基于地理位置的...
在本教程中，我们将深入探讨如何将Leaflet.js库与百度地图API集成，以创建一个交互式的地图应用。Leaflet是一个轻量级的JavaScript库，专门用于开发移动设备友好的Web地图。而百度地图是中国领先的在线地图服务提供...
本文将详细介绍百度地图离线版Javascript API 2.0版，这是一个适用于开发者在没有网络连接的情况下依然可以使用的地图服务解决方案。该版本提供了全面的功能和丰富的示例，帮助开发者构建基于地图的应用程序。 首先...
这篇教程将深入探讨如何使用ArcGIS API for JavaScript 3.x版本加载百度地图和其影像服务。 首先，我们需要了解ArcGIS API的基本结构。它通过一系列的类、方法和事件来构建地图应用，包括Map对象用于表示地图，...