原生html里面使用百度地图，实现标点以及掩膜效果

在HTML中使用百度地图，并实现标点以及掩膜效果，可以通过引入百度地图的JavaScript API来完成。以下是一个简单的示例代码：

首先，在HTML文件中引入百度地图的JavaScript API：




<!DOCTYPE html>
<html>
<head>
    <title>Baidu Map Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        #allmap {width: 100%;height: 500px;overflow: hidden;margin:0;}
    </style>
    <!--从百度地图开放平台获取API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的百度地图API_KEY"></script>
</head>
<body>
    <div id="allmap"></div>
    <script type="text/javascript">
        // 创建地图实例
        var map = new BMap.Map("allmap");
        // 创建点坐标
        var point = new BMap.Point(116.404, 39.915);
        // 初始化地图，设置中心点坐标和地图级别
        map.centerAndZoom(point, 15);
        // 添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes: [
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]
        }));
        // 添加缩放控件
        map.addControl(new BMap.ZoomControl());
        // 添加比例尺控件
        map.addControl(new BMap.ScaleControl());
        // 添加标点
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        // 添加掩膜
        var polygon = new BMap.Polygon([
            new BMap.Point(116.399, 39.920),
            new BMap.Point(116.405, 39.919),
            new BMap.Point(116.403, 39.912),
            new BMap.Point(116.398, 39.913)
        ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
        map.addOverlay(polygon);
    </script>
</body>
</html>

请将src="http://api.map.baidu.com/api?v=2.0&ak=您的百度地图API_KEY"中的API_KEY替换为您从百度地图开放平台获取的API\_KEY。
在上述代码中，point变量定义了地图的中心点坐标，您可以根据需要修改这个坐标。
添加了一个标点marker，并使用map.addOverlay(marker);将其添加到地图上。
添加了一个掩膜polygon，它是由四个点构成的矩形，并使用map.addOverlay(polygon);将其添加到地图上。
您可以根据需要调整掩膜的坐标和样式。

请确保您已经注册了百度地图开放平台账号，并且有一个有效的API\_KEY，以便正常使用百度地图的JavaScript API。

原生html里面使用百度地图，实现标点以及掩膜效果

评论已关闭

推荐阅读