google与百度地图api体验笔记
1:google地图
<!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } A:link { so-language: zxx } -->
google图像现可以使用为两个版本V2,V3. 其中为V2需要申请第一地图key,申请地图条件是必须要有一级域名。V3按现有策略(正在推广),暂时没有不需要key. google地图接口实例说明较多,对于入门教容易。google地图目前最大问题,已经很久没有更新了,但功能绝对酷,接口简洁。
api说明页面为:hhttp://code.google.com/apis/maps/index.html,说明很强大。
功能测试:在tk dot 申请一级域名,定位自己电脑,使用Apache做web服务起,直接在index.html文件写js代码测试。
google的V2的实例
<html>
<title>
google map test
</title>
<body>
<div id="map" style="width: 1600px; height: 800px" align="center"></div>
<script type="text/javascript" src="http://www.google.com/jsapi?key=yourkey"></script>
<script type="text/javascript">
google.load("maps", "2.x");
// Call this function when the page has been loaded
function initialize() {
var map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(30.2777, 120.1579), 13);
}
google.setOnLoadCallback(initialize);
</script>
</body>
</html>
google的V3的实例, 功能描述 定位到杭州,并在添加一个摄像机图片
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false®ion=GB">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(30.2777, 120.1579);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var image='Camera.jpg';
var myLatLng = new google.maps.LatLng(30.2773, 120.1572);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
</script>
</head>
<title>
google test map v3
</title>
<body οnlοad="initialize()">
<div id="map_canvas" style="width:1400px; height:900px"></div>
</body>
</html>
2:baidu地图 定位到杭州,并在添加一个摄像机图片
<!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } A:link { so-language: zxx } -->
baidu地图推出不久,使用必须有key,key申请必须有一级域名或固定ip。
api说明页面为:http://openapi.baidu.com/map/index.html,实例与类说明已经比较全。
测试方法同google地图测试。
实例,功能描述 定位到杭州,并在添加一个摄像机图片
<!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=gb2312" />
<meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" />
<title >buidu map test</title>
<!--引用百度地图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=25c22b0432f678a327e798c267ba5737&v=1.1&services=true"></script>
</head>
<body>
<!--百度地图容器-->
<div style="width:1400px;height:800px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
//创建和初始化地图函数:
function initMap(){
createMap();//创建地图
addMapMarker();//向地图添加一个图标
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
}
//创建地图函数:
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(120.1579, 30.2777);//定义一个中心点坐标
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);
}
// 编写自定义函数,创建标注
function addMapMarker(){
// 创建图标对象
var myIcon = new BMap.Icon("Camera.jpg",new BMap.Size(50, 50));
var mypoint = new BMap.Point(120.1572,30.2773) ;//定义一个中心点坐标
// 创建标注对象并添加到地图
var marker = new BMap.Marker(mypoint, {icon: myIcon});
map.addOverlay(marker);
}
initMap();//创建和初始化地图
</script>
</html>
3:坐标问题
实测baidu与google会发现相同地方坐标略有不同。其中一个原因在中国坐标是加密的,即baidu与google的坐标与实际经度与纬线都有偏差,偏差量大约为几百米到一千米,至于采用什么坐标系未明,转化方法非官方获取不到。而GRS出的为采用WGS84坐标系(World Geodetic System 1984),这是美国为GPS全球定位系统使用而建立的坐标系 。
结论:baidu与google的坐标数据只能适用各自本身地图。
google与百度地图api体验笔记相关推荐
- baidumap api MySQL_百度地图API开发笔记一(基础篇)
什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供了诸 ...
- Java web与web gis学习笔记(二)——百度地图API调用
系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...
- qichacha/知乎/国家统计局最新4级地区划/百度地图API获取经纬度/Google play app评论等分数据爬取
1.企查查数据抓取 1.1 关键公司LOGO # -*-coding:utf-8-*-import pandas as pd import requests import json import ra ...
- java web调用百度地图_Java web与web gis学习笔记(二)——百度地图API调用
一.申请百度地图开发者 百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口,包括JavaScript API.Web服务API.Android SDK.iOS SDK.定位SDK.车联网 ...
- 【百度地图API】百度API卫星图使用方法和卫星图对比工具
百度地图API推出卫星图接口也有一个月啦~ 本文除了介绍如何使用百度地图API来操作卫星图外,还顺带制作了个卫星图对比工具. 一.百度地图API卫星图 调用百度卫星图有两种方式,一是地图类型控件,一是 ...
- 【百度地图API】建立全国银行位置查询系统(四)——如何利用百度地图的数据生成自己的标注...
摘要: 上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?" 答案就是,利用百度地图上的数据. ---------------------------- ...
- 百度地图API —— Hello World!
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html> <head> <meta name=& ...
- sns.distplot图例标注怎么添加_百度地图API图标、文本、图例与连线
百度地图开放平台功能强大,使用简单,为地图的自定义提供了非常方便的途径! 本文以绘制一张全国机器辐射图为例记录其基本使用方法,效果如下图: 图中包括了带图标和文本的标注,连线以及图例. 1.关于坐标 ...
- 百度地图API开发指南
百度地图API开发指南 本文为百度地图API官方版本的开发指南,供各位51CTO的网友进行参考. 简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮 ...
- C#调用百度地图API入门解决BMap未定义问题
本文主要是最近帮助好友研究JavaScript的百度地图API,同时显示到C# Winform界面.同时遇到了BMap未定义的错误(BMap is not defined)及解决方法.以前写过基于An ...
最新文章
- How to expand Azure VM OS Disk
- ABAP程序中的七大危险漏洞
- java 头尾 队列_探索JAVA并发 - 并发容器全家福
- python创建多个文件_Python创建文件夹与文件的快捷方法
- LeetCode7. 整数反转
- freemarker mysql 生成bean_基于数据库的代码自动生成工具,生成JavaBean、生成数据库文档、生成前后端代码等(v6.6.6版)...
- 【动态主席树】ZOJ 2112【树状数组+主席树】
- 三菱PLC QCPU用户手册(功能解说/程序基础篇)
- bat脚本积累(三)—— bat的注释
- 计算机专业职业规划范文800字,计算机专业学生职业生涯规划书
- 深入浅出XTTS:Oracle数据库迁移升级利器(附PPT)
- 九酷音乐真实地址解析
- Docsify支持Markdown多种流程图
- win7中office2016版的word在非管理员账户时无法插入页码问题解决记录
- 软件系统安全性测试列表(Checklist)
- 问卷调查抽奖系统开发
- 局域网中别人不能访问我的电脑
- jmeter原件使用
- 计量经济学及Stata应用 陈强 第九章模型设定与数据问题习题9.4
- Xilinx 8B10B转换