百度地图覆盖物加载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!

相关文章
|
缓存 资源调度 JavaScript
瓦片地图的介绍和Vue中使用Openlayer加载瓦片地图的方法使用
瓦片地图的介绍和Vue中使用Openlayer加载瓦片地图的方法使用
2692 0
|
安全
Portraiture最新v3.5.6版本安装许可证密钥
Portraiture 3中文版切换教程 PS版智能磨皮去瑕疵
19486 0
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
JavaScript Java CDN
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
本文提供了Vue 3从入门到精通的完整教程,涵盖了创建Vue应用、通过CDN使用Vue、定义网站以及使用ES模块构建版本的步骤和示例代码。
10579 1
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
|
前端开发 JavaScript UED
|
存储 JavaScript 安全
vue项目打包优化:缩小体积productionSourceMap设置,使用cdn加速
vue项目打包优化:缩小体积productionSourceMap设置,使用cdn加速
1307 0
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
914 0
|
Java 数据安全/隐私保护
Java使用PDFBox开发包实现对PDF文档内容编辑与保存
Java使用PDFBox开发包实现对PDF文档内容编辑与保存
538 7
|
JavaScript 前端开发 定位技术
GIS开发:开源库计算经纬度坐标和瓦片坐标
GIS开发:开源库计算经纬度坐标和瓦片坐标
372 0
|
Java 测试技术
使用MybatisPlus时出现的java.lang.NullPointerException异常~
使用MybatisPlus时出现的java.lang.NullPointerException异常~
718 0
使用MybatisPlus时出现的java.lang.NullPointerException异常~