最近有点懒  项目结尾了  完了好长时间 没有去总结项目中的问题

想了下还是写写吧

这是一个关于百度地图的 网页展示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>欢迎页</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
<!--引用百度地图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.baidu.com/api?key=&v=1.1&services=true"></script>
</head>
<body>
<!--百度地图容器-->
,,,,,,,,,,,
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent">

</div>
</body>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
}

//创建地图函数：
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(116.560358,39.02148);//定义一个中心点坐标
map.centerAndZoom(point,10);//设定地图的中心点和坐标并将地图显示在地图容器中
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);
}

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

有不同的可以找搜==百度地图API去查找实例  有不同的控件组合

百度地图 JavaScript API的更多相关文章

  1. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  2. 百度地图JavaScript API使用

    最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...

  3. 百度地图JavaScript API经纬度查询-MAP

    百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...

  4. 【百度地图JavaScript API】手机端浏览器定位的实现

    [百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476

  5. 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题

    项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...

  6. 百度地图JavaScript API本地搜索的结果面板

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. 百度地图 Javascript API 笔记

    因为最近的一个项目用到,所以自己整理了一下遇到的一些坑 自己写了一个类库来二次封装用于调起常用的功能:https://github.com/iRuxu/iBMap 快速文档链接 Javascript ...

  8. 百度地图JavaScript API获取用户当前经纬度和详细地理位置，反之通过详细地理位置获取当前经纬度

    前言: 前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置和通过当前用户详细地理位置换取用户当前经纬度坐标的功能,为了方便下次找起来方便一些自己在这里记录一下,希望也能够 ...

  9. 百度地图 JavaScript API 极速版 开发体会

    前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发人员细分成普通web开发人员和移动web开发人员.正好用到了手机地图这块决定尝 ...

随机推荐

  1. 【Ruby】【环境搭建】macOS Sierra 10.12.6 + Xcode 8 + gpg 2.2.8 + rvm 1.29.3 + Ruby 2.4.0 + RubyMine 2018.1.4

      按出场顺序: macOS Sierra 10.12.6  +  Xcode 8 + gpg 2.2.8 + rvm 1.29.3 +  Ruby 2.4.0 + RubyMine 2018.1.4 ...

  2. java笔记 -- java变量与常量的声明

    变量: 在Java中, 每一个变量属于一种类型. double salary int vacationDays; long earthPopulation; boolean done; 命名: 以字母 ...

  3. 基于虹软的Android的人脸识别SDK使用测试

    现在有很多人脸识别的技术我们可以拿来使用:但是个人认为还是离线端的SDK比较实用:所以个人一直在搜集人脸识别的SDK:原来使用开源的OpenCV:最近有个好友推荐虹软的ArcFace, 闲来无事就下来 ...

  4. [Hibernate] inner Join和 left Join

    @Test public void test11(){ Session ss=HibernateUtil.getSession(); //根据员工名称(SCOTT)找到和他所在的部门的其他员工的信息 ...

  5. Rails-Treasure chest2 嵌套表单；

    嵌套表单1-1 嵌套表单1-多 选日期时间的UI (一个jquery Plugin) 拆除前后台css和js Rich Editor, 显示输入的HTML tag 批次编辑/删除 嵌套表单1-1 核心 ...

  6. stylus笔记(三)

    1.@import 导入 Stylus支持字面@import CSS, 也支持其他Stylus样式的动态导入. 任何.css扩展的文件名将作为字面量.例如: @import "reset.c ...

  7. day048 BOM和DOM

    BOM   Browser Object Model(文档对象模型) > window对象 1.alert     弹出带有提示和一个确认按钮的警示框 2.confirm       弹出带有一 ...

  8. 查看局域网指定IP的电脑名

    nbtstat -a 192.168.0.139 节点 IP 址址: [192.168.0.140] 范围 ID: [] NetBIOS 远程计算机名称表 名称 类型 状态 ------------- ...

  9. 记一下JavaScript的几种排序算法

    零.写在最前 排序的方法有很多种,这篇文章只是记录我熟悉的算法: 我发现了一个关于排序算法很有趣的网站,把相关的算法演示做成了动画,有兴趣的同学可以看看! 附上SortAnimate网站链接:http ...

  10. C++ leetcode Binary Tree Maximum Path Sum

    偶然在面试题里面看到这个题所以就在Leetcode上找了一下,不过Leetcode上的比较简单一点. 题目: Given a binary tree, find the maximum path su ...