百度地图覆盖物加载svg图片的实战案例分析

简介: 百度地图覆盖物加载svg图片的实战案例分析

百度地图覆盖物是可以加载SVG图片信息的,加载的方式如下:



引入百度api

    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

创建容器

<div id="allmap"></div>

加载地图

    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.591915, 37.333892);
    map.centerAndZoom(point, 16);
    map.enableScrollWheelZoom(true);

加载svg(设置marker图标)

    var vectorPeoplePath = new BMap.Marker(point, {
        icon: new BMap.Symbol(place, {
            rotation: 0,//顺时针旋转40度
            fillColor: 'green',
            fillOpacity: 0.8,
            strokeColor: '#555',
            strokeWeight: 3//线宽
        })
    });
    map.addOverlay(vectorPeoplePath);


LOCKDATAV DONE!

相关文章
|
定位技术 数据格式
高德地图进阶开发实战案例(8):加载多个多边形的覆盖物且实现鼠标高亮和单击事件解决方案
高德地图进阶开发实战案例(8):加载多个多边形的覆盖物且实现鼠标高亮和单击事件解决方案
229 0
|
8月前
|
Android开发 开发者
Android开发之通过渲染纹理展示地球仪
该文阐述了如何使用OpenGL为三维物体添加纹理,以增强其真实感。纹理坐标是二维的,用于标记摊平后的“布料”对应物体的哪个部位,类似裁缝制作衣服的过程。在OpenGL中,启用纹理和深度测试是关键,还包括设置纹理参数、分配纹理编号、绑定位图材质等步骤。计算材质的纹理坐标后,通过`glDrawArrays`结合顶点和纹理坐标逐个贴图。最终示例展示了将世界地图贴到球体上形成逼真的地球仪效果。通过控制旋转、平移和缩放,能实现简单的三维动画效果。
95 2
Android开发之通过渲染纹理展示地球仪
|
8月前
|
存储 JavaScript 小程序
高德地图实现点聚合功能的详细步骤加截取地图图片 (附源码)
高德地图实现点聚合功能的详细步骤加截取地图图片 (附源码)
187 0
|
定位技术
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
352 0
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
312 0
Echarts实战案例代码(45):拼接屏字体自适应的解决方案
Echarts实战案例代码(45):拼接屏字体自适应的解决方案
78 0
|
定位技术
百度标注地图markers图片icon不正常显示的样式冲突解决方案
百度标注地图markers图片icon不正常显示的样式冲突解决方案
213 0
|
定位技术
Echarts实战案例代码(27):地理坐标图视觉引导线及富文本提示框的案例
Echarts实战案例代码(27):地理坐标图视觉引导线及富文本提示框的案例
462 0
|
XML 人工智能 搜索推荐
Echarts实战案例代码(5):liquidFill水球组件利用svg path定制你自己的个性化图标动态图
Echarts实战案例代码(5):liquidFill水球组件利用svg path定制你自己的个性化图标动态图
473 0
|
JavaScript 前端开发 编译器
HTML调用百度地图API,实现地图标注位置
HTML调用百度地图API,实现地图标注位置
582 0