关于Html5引用百度地图Api的小功能

xiaoxiao2021-02-28  129

本文主要是笔者自己遇到的问题的解决方法

百度地图Api中的控件

Control:控件的抽象基类,所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。

NavigationControl:地图平移缩放控件,PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能。移动端提供缩放控件,默认位于地图右下方。

OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。 ScaleControl:比例尺控件,默认位于地图左下方,显示地图的比例关系。

MapTypeControl:地图类型控件,默认位于地图右上方。 CopyrightControl:版权控件,默认位于地图左下方。

GeolocationControl:定位控件,针对移动端开发,默认位于地图左下方。


百度地图Api中的覆盖物

Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法。

Marker:标注表示地图上的点,可自定义标注的图标。

Label:表示地图上的文本标注,您可以自定义标注的文本内容。

Polyline:表示地图上的折线。

Polygon:表示地图上的多边形。多边形类似于闭合的折线,另外您也可以为其添加填充颜色。

Circle: 表示地图上的圆。

InfoWindow:信息窗口也是一种特殊的覆盖物,它可以展示更为丰富的文字和多媒体信息。

注意:同一时刻只能有一个信息窗口在地图上打开。可以使用map.addOverlay方法向地图添加覆盖物,使用map.removeOverlay方法移除覆盖物,注意此方法不适用于InfoWindow。


个人代码如下:

<html xmlns="http://www.w3.org/1999/xhtml"> <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; } #img_test { width: 100%; height: 10%; } </style> <script type="text/JavaScript" src="http://api.map.baidu.com/api?v=2.0&ak=LAKYVqkUsb9u7V2hUDftAdQiI8w5OUth"> </script> <title>BMap_test</title> </head> <body> <img src="img/img_test2.png" id="img_test"> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom("北京", 5); // 初始化地图,设置城市和地图级别。 setMapEvent(); addMapControl(); map.addControl(new BMap.MapTypeControl()); var point = new BMap.Point(118.696975,32.357007); var marker = new BMap.Marker(point); map.addOverlay(marker); var infoWindow = new BMap.InfoWindow("<p style = font-size 14px;'>我在这,我是不是很帅??</p><p style = font-size 14px;'>其实你不用说我也知道我就是这么帅,哈哈!</p>") marker.addEventListener("click",function (e) { this.openInfoWindow(infoWindow); }); //地图事件设置函数: function setMapEvent() { map.enableScrollWheelZoom(); //启用地图滚轮放大缩小 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); } </script>

打开网页时

点击标注后


百度地图Api地址:http://lbsyun.baidu.com/index.php?title=jspopular

转载请注明原文地址: https://www.6miu.com/read-65645.html

最新回复(0)