说明：谷歌地图的API好像没法用，所以以下操作均使用百度地图API。教程来自于百度地图开放平台。
1. 以下代码创建了一个地图并以天安门作为地图的中心：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- 以便使您的页面更好的在移动平台上展示。 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<!-- 设置样式，使地图充满整个浏览器窗口：-->
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥
&callback=initialize"
</script>
</head>
<body>
<div id="container"></div>
<!-- 创建地图容器元素 地图需要一个HTML元素作为容器，这样才能展现到页面上,故创建个div元素 -->
<script type="text/javascript">
<!-- 命名空间 API使用BMap作为命名空间 -->
<!-- 位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。参数可以是元素id也
可以是元素对象。-->
var map = new BMap.Map("container"); // 创建地图实例
<!-- 这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中
116.404表示经度，39.915表示纬度。-->
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
</script>
</body>
</html>
效果图如下：
beijing_center_map.png
此代码能在IE和chrome浏览器上正常显示，在Edge上不能显示，原因未知！！！
2. 控件
地图API中提供的控件有：
- Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
- NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
- OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
- ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。
- MapTypeControl：地图类型控件，默认位于地图右上方。
- CopyrightControl：版权控件，默认位于地图左下方。
- GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。
可以使用Map.addControl()方法向地图添加控件。在此之前地图需要进行初始化。例如，要将标准地图控件添加到地图中，可在代码中添加如下内容：
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
控制控件位置和控件位置偏移可以通过参数调配。
自定义控件略复杂，没看，暂时用不上。
3. 覆盖物
地图API提供了如下几种覆盖物：
- Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。
- Marker：标注表示地图上的点，可自定义标注的图标。
- Label：表示地图上的文本标注，您可以自定义标注的文本内容。
- Polyline：表示地图上的折线。
- Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。
- Circle: 表示地图上的圆。
- InfoWindow：信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开。
可以使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物，注意此方法不适用于InfoWindow。
地图中心点添加了一个标注，并使用默认的标注样式。
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
其他如自定标注图标、监听标注事件、可拖曳的标注、内存释放、信息窗口、折线、自定义覆盖物等均未看。
直接定位我的位置：
代码一：
<!DOCTYPE html>
<html>
<title>HTML5调用百度地图API进行地理定位实例</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script>
</head>
<body style="margin:50px 10px;">
<div id="status" style="text-align: center"></div>
<div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>
</body>
</html>
<script type="text/javascript">
//默认地理位置设置为上海市浦东新区
var x=121.48789949,y=31.24916171;
window.onload = function() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
// 百度地图API功能
var map = new BMap.Map("container");
var point = new BMap.Point(x,y);
map.centerAndZoom(point,12);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
return;
}
alert("你的浏览器不支持获取地理位置！");
};
function showPosition(position){
x=position.coords.latitude;
y=position.coords.longitude;
}
</script>
代码二：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Nq6xvK1GGytlV5jsztOnIxK3RhC7823N"></script>
<title>浏览器定位</title>
</head>
<body>
<div id="allmap"></div>
<div id="intro" style="text-align: center;"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(98.23533,56.56977);
map.centerAndZoom(point,12);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置：'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
//关于状态码
//BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。
//BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
//BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。
//BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
//BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。
//BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。
//BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
//BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)
//BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)
</script>
注意：windows要打开定位功能，并且本地条件下只能在IE上才能实现定位功能，谷歌浏览器好像是无法获取windows系统位置权限无法实现定位，（用谷歌浏览器打开百度地图网页，也无法定位，但是Edge和IE是可以的，到底是亲儿子），另Edge无法正常显示网页信息，可能是因为兼容问题，个人猜测。只剩下IE了。
