百度地图 Icon 的URL可以设置成SVG字符串吗?

KkxYy 2018-11-16 09:13:50
以前用的google map 里面 marker 可以这样定义:
var marker = new google.maps.Marker({
position: {
lat: latitude,
lng: longitude
},
iconTypes: {
url: "data:image/svg+xml;utf-8,<svg id='レイヤー_1' data-name='レイヤー 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24.4 34.56'><defs><style>.cls-1{fill:#0a0a0a;}.cls-2{fill:#fff;}</style></defs><title>pencil</title><path class='cls-1' d='M30.2,12.5a12.2,12.2,0,1,0-14.6,12L18,34.9l2.4-10.5A12,12,0,0,0,30.2,12.5Z' transform='translate(-5.8 -0.34)''/><path class='cls-2' d='M22.81,4.83a2.19,2.19,0,0,1,1.75,3.5l-.87.88L20.62,6.15l.88-.87A2.18,2.18,0,0,1,22.81,4.83ZM11.87,14.9,11,18.83,14.94,18,23,9.87,20,6.8ZM20.78,9.8l-6.12,6.12-.75-.75L20,9.05Z' transform='translate(-5.8 -0.34)'/></svg>",
anchor: new google.maps.Point(25, 50),
scaledSize: new google.maps.Size(48, 48)
},
infoWindow: infoWindow
});
问一下百度地图的icon可以这样设置吗?因为我想自定义icon的背景颜色 但是又不想准备太多的图片。



...全文
422 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
KkxYy 2018-11-16
  • 打赏
  • 举报
回复
引用 4 楼 lqlqlq007 的回复:
[quote=引用 2 楼 KkxYy 的回复:] [quote=引用 1 楼 lqlqlq007 的回复:] 可以定义svg矢量图覆盖物,具体怎么配置看百度地图的API吧。
矢量图那个 我还得把SVG文件里面的东西拆出来 直接用URL的没办法是吗?[/quote] 看这个例子,百度是不会读你给的svg文件的,它做的只是把你给出的一个div(可以包住你要的svg)展示在你给出的经纬度上。[/quote] 好的,谢了。我看高德那边是可以重构SVG的。我尝试用高德做吧。
讨厌走开啦 2018-11-16
  • 打赏
  • 举报
回复
引用 2 楼 KkxYy 的回复:
[quote=引用 1 楼 lqlqlq007 的回复:] 可以定义svg矢量图覆盖物,具体怎么配置看百度地图的API吧。
矢量图那个 我还得把SVG文件里面的东西拆出来 直接用URL的没办法是吗?[/quote] 看这个例子,百度是不会读你给的svg文件的,它做的只是把你给出的一个div(可以包住你要的svg)展示在你给出的经纬度上。
KkxYy 2018-11-16
  • 打赏
  • 举报
回复
或者说能不能像高德地图API里面的,可以在读取到SVG文件以后,更改里面的内部构造。
KkxYy 2018-11-16
  • 打赏
  • 举报
回复
引用 1 楼 lqlqlq007 的回复:
可以定义svg矢量图覆盖物,具体怎么配置看百度地图的API吧。
矢量图那个 我还得把SVG文件里面的东西拆出来 直接用URL的没办法是吗?
讨厌走开啦 2018-11-16
  • 打赏
  • 举报
回复
可以定义svg矢量图覆盖物,具体怎么配置看百度地图的API吧。
KkxYy 2018-11-16
  • 打赏
  • 举报
回复
引用 4 楼 lqlqlq007 的回复:
看这个例子,百度是不会读你给的svg文件的,它做的只是把你给出的一个div(可以包住你要的svg)展示在你给出的经纬度上。
刚研究了下发现,百度地图是可以直接用SVG字符串来显示图片的,之前可能是因为符号和转义的问题导致没有显示出来。感谢回答。
在模块化系统的结构中,模块是可组合、可分解和更换的单元,这就要求模块本身具有一定的 独立性,完整的前端模块化方案需要将js、css和模板维护在一起,保证模块的独立。规范在scrat中静态资源分成 模块化资源 和 非模块化资源 两类,其中模块化资源还分为 工程模块 和 生态模块 两类。模块化资源:具有独立性的模块所对应的静态资源。每个独立的模块将自己所需要的js、css、模板、图片等资源放在一起维护,使得模块具备独立性,引用模块的js即可。工程模块:当前工程所开发的模块。这些模块通常跟业务耦合较高。生态模块:从 模块生态 下载的模块,属于外部依赖。非模块化资源:虽然在模块化开发体系内,应该 一切皆模块,但总有不应该成为模块的资源,比如入口页面、模块化框架、页面启动器等。其目录规范为:project   ├─ component_modules (生态模块)   ├─ components        (工程模块)   ├─ views             (非模块化资源)   ├─ ...如果把所有资源都扔到 views 目录下,scrat也可以退化为传统的无模块前端项目,模块化与非模块化资源之间的平衡可以由开发者自己把握。开发工程模块在模块化系统中,开发模块将变得非常简单,比如我们要开发一个 foo 模块,有模板、样式、交互功能。首先,在 工程模块 目录下创建一个foo目录,并在其中添加js、css、模板、图片等资源:project   ├─ component_modules (生态模块目录)   ├─ components        (工程模块目录)   │  └─ foo   │     ├─ icon.png   │     ├─ foo.css   │     ├─ foo.tpl   │     └─ foo.js   ├─ views             (非模块化资源)   ├─ ...foo.js像写nodejs一样写js模块// 使用__inline函数嵌入其他资源,如果// 是图片,构建后会替换为base64字符串var tpl = __inline('foo.tpl');// 使用__uri函数定位资源,构建后会替换// 为部署后的绝对路径var icon = __uri('icon.png');//像nodejs那样导出APIexports.render = function(dom){     dom[removed] = tpl; }; exports.icon = function(img){     img.src = icon; };foo.tpl模板会被嵌入到js中使用   hello        <!--       使用相对路径定位资源,构建后       会被替换为部署后的绝对路径     -->     icon.png">     blablabla  

foo.csscss也能模块化.foo {  font-size: 12px; }.foo-title {  /* 使用相对路径引用资源 */   background: url(icon.png) no-repeat;  padding-left: 30px;  font-size: 15px; }.foo-content {  padding: 10px; }将源码中的相对路径构建后替换为部署后的绝对路径,是模块独立性的基本保证。只有将模块所需的样式、结构、逻辑都维护在一起,并且部署后还能定位到,才能保证模块独立可用。关于工程模块的一些约定:与目录同名的js为模块主文件。即foo.js是foo模块的主文件。与js同名的css文件会自动建立依赖关系。比如foo.js自动依赖foo.css。任何文件命名没有约束,主文件的与目录同名要求只是为了引用方便而已。在代码中使用工程相对路径开发,scrat构建会后自动替换成绝对路径。安装生态模块使用生态模块可以提高开发效率,scrat采用 component 规范作为生态规范,因此用户可以从component生态中直接下载组件供项目使用。从生态安装模块之前,需要先在工程中创建一个 component.json 文件,内容为空的json内容 {} 即可:project   ├─ component_modules (生态模块目录)   ├─ components   ├─ views   ├─ component.json    (生态依赖描述)   ├─ ...component有很丰富的组件生态,比如 FortAwesome/Font-Awesome 字体图标库,可以使用scrat直接从GitHub下载放到项目中使用。在项目目录下执行:scrat install FortAwesome/Font-Awesome安装完成后,component_modules目录下下会出现font-awesome模块的安装文件:project   ├─ component_modules (生态模块目录)   │  └─ FortAwesome-Font-Awesome   │      └─ 4.1.0   │         ├─ component.json   │         ├─ css   │         │  └─ font-awesome.css   │         └─ fonts   │            ├─ FontAwesome.otf   │            ├─ fontawesome-webfont.eot   │            ├─ fontawesome-webfont.svg   │            ├─ fontawesome-webfont.ttf   │            └─ fontawesome-webfont.woff   ├─ components   ├─ views   ├─ component.json    (生态依赖描述)   ├─ ...component.json文件也记录了安装的模块名及其版本:{   "dependencies": {     "FortAwesome/Font-Awesome": "4.1.0"   }}这样,一个来自生态的模块就可以在项目中直接使用了。有关模块生态的更多内容请阅读 这里。引用模块开发或安装好一个模块之后,需要做的仅仅就是使用它们。由于资源分为模块化和非模块化两类,因此在不同的资源下引用模块是有所不同的。在模块化js中引用模块如nodejs般使用require函数就可以了// 引用其他模块var foo = require('foo');// 引用当前目录下的文件var conf = require('./conf.js');// 调用模块接口foo.render(document.body);在模块化css中引用模块使用注释中的@require xxx来标记依赖/**  * 引用模块  * @require font-awesome  *  * 引用文件  * @require ./bar.css  */.foo .fa {    font-size: 20px; }在非模块化文件中使用模块非模块化文件通过 模块化框架 来异步加载需要的模块,比如项目的主页面:...[removed][removed][removed]   // 构建后会将__FRAMEWORK_CONFIG__变量   // 替换成框架配置,比如依赖关系、模块别名等   require.config(__FRAMEWORK_CONFIG__);  // scrat会将模块所依赖的资源都加载完成后   // 再执行回调函数   require.async(['foo', 'font-awesome'], function(foo){       foo.render(document.body);   });[removed]...模块化框架的具体工作原理请阅读 这里。 标签:scrat

87,907

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧