HTML学习笔记（七）--HTML地理定位

说明：谷歌地图的API好像没法用，所以以下操作均使用百度地图API。教程来自于百度地图开放平台。

1. 以下代码创建了一个地图并以天安门作为地图的中心：

效果图如下：

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);                     // 将标注添加到地图中

其他如自定标注图标、监听标注事件、可拖曳的标注、内存释放、信息窗口、折线、自定义覆盖物等均未看。

直接定位我的位置：

代码一：

代码二：

注意：windows要打开定位功能，并且本地条件下只能在IE上才能实现定位功能，谷歌浏览器好像是无法获取windows系统位置权限无法实现定位，（用谷歌浏览器打开百度地图网页，也无法定位，但是Edge和IE是可以的，到底是亲儿子），另Edge无法正常显示网页信息，可能是因为兼容问题，个人猜测。只剩下IE了。