mirror of https://gitee.com/antv-l7/antv-l7
1 line
37 KiB
JSON
1 line
37 KiB
JSON
{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/api/component/popup","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"<h1 id=\"popup\"><a href=\"#popup\" aria-label=\"popup permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>popup</h1>\n<p>地图标注信息窗口，用于展示地图要素的属性信息</p>\n<h2 id=\"构造函数\"><a href=\"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0\" aria-label=\"构造函数 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>构造函数</h2>\n<p>Popup</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> popup <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Popup</span><span class=\"token punctuation\">(</span>option<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"option\"><a href=\"#option\" aria-label=\"option permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>option</h4>\n<ul>\n<li>closeButton</li>\n<li>closeOnClick</li>\n<li>maxWidth</li>\n<li>anchor</li>\n</ul>\n<h2 id=\"方法\"><a href=\"#%E6%96%B9%E6%B3%95\" aria-label=\"方法 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>方法</h2>\n<h4 id=\"setlnglat\"><a href=\"#setlnglat\" aria-label=\"setlnglat permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>setLnglat</h4>\n<p>设置popup的经纬度位置<br /><strong>参数</strong>：lnglat 经纬度数组 [112,32]</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">popup<span class=\"token punctuation\">.</span><span class=\"token function\">setLnglat</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token number\">112</span><span class=\"token punctuation\">,</span> <span class=\"token number\">32</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"addto\"><a href=\"#addto\" aria-label=\"addto permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>addTo</h4>\n<p><strong>参数</strong>：scene 地图scene实例</p>\n<p>将popup添加到地图scene显示</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">popup<span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"sethtml\"><a href=\"#sethtml\" aria-label=\"sethtml permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>setHtml</h4>\n<p><strong>参数</strong>：html 字符串</p>\n<p>设置popup html 内容</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> html <span class=\"token operator\">=</span>\n <span class=\"token string\">'<p>\\u7701\\u4EFD\\uFF1A'</span> <span class=\"token operator\">+</span>\n feature<span class=\"token punctuation\">.</span>s <span class=\"token operator\">+</span>\n <span class=\"token string\">'</p>\\n <p>\\u5730\\u533A\\uFF1A'</span> <span class=\"token operator\">+</span>\n feature<span class=\"token punctuation\">.</span>m <span class=\"token operator\">+</span>\n <span class=\"token string\">'</p>\\n <p>\\u6E29\\u5EA6\\uFF1A'</span> <span class=\"token operator\">+</span>\n feature<span class=\"token punctuation\">.</span>t <span class=\"token operator\">+</span>\n <span class=\"token string\">'</p>\\n '</span><span class=\"token punctuation\">;</span>\npopup<span class=\"token punctuation\">.</span><span class=\"token function\">setHtml</span><span class=\"token punctuation\">(</span>html<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"settext\"><a href=\"#settext\" aria-label=\"settext permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>setText</h4>\n<p>设置 popup 显示文本内容</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">popup<span class=\"token punctuation\">.</span><span class=\"token function\">setText</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hello world'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"remove\"><a href=\"#remove\" aria-label=\"remove permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>remove</h4>\n<p>移除popup</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">popup<span class=\"token punctuation\">.</span><span class=\"token function\">remove</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"事件\"><a href=\"#%E4%BA%8B%E4%BB%B6\" aria-label=\"事件 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>事件</h2>\n<h4 id=\"close\"><a href=\"#close\" aria-label=\"close permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>close</h4>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">popup<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'close'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"示例代码\"><a href=\"#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81\" aria-label=\"示例代码 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>示例代码</h2>\n<h4 id=\"添加popup\"><a href=\"#%E6%B7%BB%E5%8A%A0popup\" aria-label=\"添加popup permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>添加popup</h4>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\"> var html = '<p>'+feature.m+'</p>';\n const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);</code></pre></div>\n<h3 id=\"faq\"><a href=\"#faq\" aria-label=\"faq permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>FAQ</h3>","tableOfContents":"<ul>\n<li>\n<p><a href=\"/zh/docs/api/component/popup/#popup\">popup</a></p>\n<ul>\n<li>\n<p><a href=\"/zh/docs/api/component/popup/#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0\">构造函数</a></p>\n<ul>\n<li>\n<ul>\n<li><a href=\"/zh/docs/api/component/popup/#option\">option</a></li>\n</ul>\n</li>\n</ul>\n</li>\n<li>\n<p><a href=\"/zh/docs/api/component/popup/#%E6%96%B9%E6%B3%95\">方法</a></p>\n<ul>\n<li>\n<ul>\n<li><a href=\"/zh/docs/api/component/popup/#setlnglat\">setLnglat</a></li>\n<li><a href=\"/zh/docs/api/component/popup/#addto\">addTo</a></li>\n<li><a href=\"/zh/docs/api/component/popup/#sethtml\">setHtml</a></li>\n<li><a href=\"/zh/docs/api/component/popup/#settext\">setText</a></li>\n<li><a href=\"/zh/docs/api/component/popup/#remove\">remove</a></li>\n</ul>\n</li>\n</ul>\n</li>\n<li>\n<p><a href=\"/zh/docs/api/component/popup/#%E4%BA%8B%E4%BB%B6\">事件</a></p>\n<ul>\n<li>\n<ul>\n<li><a href=\"/zh/docs/api/component/popup/#close\">close</a></li>\n</ul>\n</li>\n</ul>\n</li>\n<li>\n<p><a href=\"/zh/docs/api/component/popup/#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81\">示例代码</a></p>\n<ul>\n<li>\n<ul>\n<li><a href=\"/zh/docs/api/component/popup/#%E6%B7%BB%E5%8A%A0popup\">添加popup</a></li>\n</ul>\n</li>\n<li><a href=\"/zh/docs/api/component/popup/#faq\">FAQ</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>","fields":{"slug":"/zh/docs/api/component/popup","readingTime":{"text":"1 min read","time":33000}},"frontmatter":{"title":"popup"},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3},"html":"<p>Marker 地图标注 目前只支持2D dom标注</p>\n<h2 id=\"构造函数\"><a href=\"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0\" aria-label=\"构造函数 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>构造函数</h2>\n<p>Marker<br /><code class=\"language-text\">const Marker = new L7.Marker(option)</code></p>\n<h4 id=\"option\"><a href=\"#option\" aria-label=\"option permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>option</h4>\n<ul>\n<li>color <code class=\"language-text\">string</code> <img src=\"https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32\" alt=\"map-marker.png\"> 设置默认marker的颜色</li>\n<li>element <code class=\"language-text\">Dom|string</code> 自定义marker Dom节点，可以是dom实例，也可以是dom id</li>\n<li>anchor <code class=\"language-text\">string</code> 锚点位置 支持 center, top, top-left, top-right, bottom, bottom-left,bottom- right,left, right</li>\n<li>offset <code class=\"language-text\">Array</code> 偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量</li>\n</ul>\n<h2 id=\"方法\"><a href=\"#%E6%96%B9%E6%B3%95\" aria-label=\"方法 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>方法</h2>\n<h4 id=\"setlnglat\"><a href=\"#setlnglat\" aria-label=\"setlnglat permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>setLnglat</h4>\n<p>设置marker经纬度位置</p>\n<h4 id=\"addto\"><a href=\"#addto\" aria-label=\"addto permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>addTo</h4>\n<p>将marker添加到地图Scene</p>\n<h4 id=\"remove\"><a href=\"#remove\" aria-label=\"remove permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>remove</h4>\n<p>移除marker</p>\n<h4 id=\"getelement\"><a href=\"#getelement\" aria-label=\"getelement permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>getElement</h4>\n<p>获取marker dom Element</p>\n<h4 id=\"getlnglat\"><a href=\"#getlnglat\" aria-label=\"getlnglat permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>getLngLat</h4>\n<p>获取marker经纬度坐标</p>\n<h4 id=\"togglepopup\"><a href=\"#togglepopup\" aria-label=\"togglepopup permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>togglePopup</h4>\n<p>开启或者关闭marker弹出框</p>\n<h4 id=\"setpopup\"><a href=\"#setpopup\" aria-label=\"setpopup permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>setPopup</h4>\n<p>为marker设置popup</p>\n<h4 id=\"getpopup\"><a href=\"#getpopup\" aria-label=\"getpopup permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>getPopup</h4>\n<p>获取marker弹出框</p>\n<h2 id=\"示例代码\"><a href=\"#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81\" aria-label=\"示例代码 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>示例代码</h2>\n<h4 id=\"默认marker\"><a href=\"#%E9%BB%98%E8%AE%A4marker\" aria-label=\"默认marker permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>默认Marker</h4>\n<p>**<br /><code class=\"language-text\">const marker = new L7.Marker({color:'blue'})</code></p>\n<h4 id=\"自定义marker\"><a href=\"#%E8%87%AA%E5%AE%9A%E4%B9%89marker\" aria-label=\"自定义marker permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>自定义Marker</h4>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> el <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'label'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nel<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> <span class=\"token string\">'lableclass'</span><span class=\"token punctuation\">;</span>\nel<span class=\"token punctuation\">.</span>textContent <span class=\"token operator\">=</span> data<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span>v<span class=\"token punctuation\">;</span>\nel<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>background <span class=\"token operator\">=</span> <span class=\"token function\">getColor</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span>v<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Marker</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n element<span class=\"token punctuation\">:</span> el<span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">.</span><span class=\"token function\">setLnglat</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span>data<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span>x <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> data<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"设置-popup\"><a href=\"#%E8%AE%BE%E7%BD%AE-popup\" aria-label=\"设置 popup permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>设置 popup</h4>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> popup <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Popup</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n anchor<span class=\"token punctuation\">:</span> <span class=\"token string\">'left'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">setText</span><span class=\"token punctuation\">(</span>item<span class=\"token punctuation\">.</span>name<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Marker</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n element<span class=\"token punctuation\">:</span> el<span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">.</span><span class=\"token function\">setLnglat</span><span class=\"token punctuation\">(</span>item<span class=\"token punctuation\">.</span>coordinates<span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">.</span><span class=\"token function\">setPopup</span><span class=\"token punctuation\">(</span>popup<span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>"}}}}} |