文档章节

开发简单的百度地图

杜子美
 杜子美
发布于 2014/11/06 17:03
字数 604
阅读 67
收藏 0
  1. 开发百度地图之前,首先要申请一个百度地图的密钥,这个密钥会在程序中用到. 具体的地址是http://lbsyun.baidu.com/apiconsole/key

  2. 然后就是代码部分了。下面的代码直接复制出来粘贴到记事本就可以打开。当然需要填写完整的密钥。


  3. <!DOCTYPE html>
    <html>
    	<head>
    		<title>test.html</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    		<!--这里要引入密钥-->
    		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=密钥">
    		</script>
    		<script type="text/javascript">
    			//创建百度地图
    			var creat_map = function(longitude, latitude){
    				var map = new BMap.Map("container");            // 创建地图实例  
    				var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
    				//var point = new BMap.Point(longitude,latitude);
    				var marker = new BMap.Marker(point);           // 创建标注   
    				map.centerAndZoom(point, 15);                  // 地图放大级数,数字越大,地图显示越大
    				map.enableScrollWheelZoom();    			   //启用滚轮放大缩小,默认禁用
    				map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    				map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));  //右上角,仅包含平移和缩放按钮
    				map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN}));  //左下角,仅包含平移按钮
    				map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM})); //右下角,仅包含缩放按钮
    				map.enableContinuousZoom();    				  //启用地图惯性拖拽,默认禁用
    				map.addOverlay(marker);
    				map_click(map);
    			}
    			
    			// 创建3D百度地图
    			var creat_tdMap = function(longitude, latitude){
    				var map = new BMap.Map("container", {mapType:BMAP_PERSPECTIVE_MAP});   //设置3D图为底图
    				var point = new BMap.Point(116.404, 39.915);
    				var marker = new BMap.Marker(point); 
    				map.setCurrentCity("北京");        // 设置地图显示的城市 此项是必须设置的
    				map.centerAndZoom(point,19);
    				map.enableScrollWheelZoom(true);   //启用滚轮放大缩小
    				map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    				map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));  //右上角,仅包含平移和缩放按钮
    				map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN}));  //左下角,仅包含平移按钮
    				map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM})); //右下角,仅包含缩放按钮
    				map.addOverlay(marker);
    				map_click(map);
    			}
    			
    			//地图点击事件
    			var map_click = function(map){
    				map.addEventListener("click", function(e){
    					var opts = {    
    					width : 300,     // 信息窗口宽度    
    				    height: 150,     // 信息窗口高度    
    					title : "<label style='font-size:15px;color:blue;'>*当前位置的信息*<label>"  // 信息窗口标题   
    					}    
    					var details = "Andy is so handsome!";
    					var infoWindow = new BMap.InfoWindow(details, opts);  // 创建信息窗口对象    
    					map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口   
    				}); 
    			}
    			//window.onload = creat_map;
    			//window.onload = creat_tdMap;
    
    		</script>
    		<style type="text/css">
    			#bottom, #container {float:none; width:800px; height:500px; margin:0 auto;}
    		</style>
    	</head>
    	
    	<body>
    			<div id="container"></div> 
    			<div id="bottom">
    			<input type="button" value="打开普通地图" onclick="creat_map();">
    			<input type="button" value="打开3D地图" onclick="creat_tdMap();">
    			</div>
    	</body>
    </html>

© 著作权归作者所有

杜子美
粉丝 1
博文 18
码字总数 8214
作品 0
成都
程序员
私信 提问
Cordova/PhoneGap导航解决方案——在浏览器中调用百度地图APP进行导航

有时候,我们在Cordova/PhoneGap APP中实现导航,如果使用百度SDK开发,工作量是很大的。值得兴奋的是百度地图APP提供了URI API帮我们来实现这个功能。简单的说:如果用户手机中安装了百度地...

crazymus
2015/11/18
0
0
基于 Canvas 的大数据可视化库 - inMap

inMap 是 TalkingData 可视化团队开源的一款基于 canvas 的大数据可视化库,专注于大数据方向点、线、面的可视化效果展示。目前支持散点、围栏、热力、网格、聚合等方式;致力于让大数据可视...

望穿秋水囧rz
2017/12/22
3.3K
4
ThinkPhp5 | 模块分析

ThinkPhp5框架是一款基于MVC的轻量级开发框架,其模块化的搭建,简单有效,相比于之前的版本,是一次颠覆性的改变。本文,结合一些网站的常用功能,简要分析一下基本原理,小试牛刀一把。 相...

采风JS
2017/06/10
0
0
百度地图新手教程2(转载自百度)

百度地图API> JavaScript API> 开发指南 概述 开发指南 简介 Hello World 控件 覆盖物 事件 地图图层 工具 服务 类参考V1.4 示例DEMO 更新日志 常见问题 相关下载 Hello World 1.百度地图的“...

长平狐
2013/01/06
115
0
在指定网站,集成百度鹰眼轨迹管理台(提供开源代码)

本人已通过安装百度鹰眼版车载gps,将车辆位置数据呈现在百度鹰眼轨迹管理台。 现希望开发一个供乘客手机端查看,无需登录,界面简单的车辆实时位置查询系统。 唯一的要求:打开网站,即是地...

郑丁丁
2017/09/04
1
1

没有更多内容

加载失败,请刷新页面

加载更多

多线程同时加载缓存实现

import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import java.util.concurrent.ExecutorServi......

暗中观察
23分钟前
1
0
解决Windows和Ubuntu时间不一致的问题

解决Windows和Ubuntu时间不一致的问题 问题原因是使用的时间不一致导致的。win10直接从bios读出来的时间认为就是实际时间,ubuntu认为加上8个小时 后的才是。win10用的rtc ,ubuntu用的utc 在...

shzwork
25分钟前
2
0
mysql mysql三种插入数据语句和增删改方法

点开题目是不是有点懵X,因为你只知道insert...values这一种,重来没有听说过三种,现在来介绍一下。 插入数据三种方式: insert into 表名(字段名) values(插入值); 最常用的插入语句 inse...

edison_kwok
27分钟前
2
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
38分钟前
1
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
45分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部