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

来源：互联网发布：周涵成都书店知乎编辑：程序博客网时间：2024/05/18 02:24

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

百度地图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

阅读全文

0 0