微信小程序插入个性化地图

浅浅的花香味﹌ 2022-09-17 00:57 246阅读 0赞

**1** **问题**

如何在微信小程序中插入个性化地图。

**2** **方法**

1.  进入腾讯地址服务官网  
    ![18e16a86d50e5a793fd82a5209919047.png][]
2.  控制台  —>  个性化地图  —>  个性化样式  —>  样式选择  
    ![79dab7c8db66bd2e5116c9cbe83ccef5.png][]  
    ![4f2210e225a21ce2b367b415ab4570de.png][]
3.  选择自己喜欢的样式并输入自己的小程序的APPID，之后系统会生成密钥（key）  
    ![70dd18ca136fb19ea4f314fad77d07b2.png][]
4.  在小程序的index.wxml页面加入以下代码：
    
    <table> 
     <tbody> 
      <tr> 
       <td>&lt;map style="width: 100%; height: 100%;" scale="4" subkey="你的key" markers="{ {markers}}" include-points="{ {markers}}"&gt;<br> &lt;map&gt;</td> 
      </tr> 
     </tbody> 
    </table>
    
    在index.wxss加入以下代码：
    
    <table> 
     <tbody> 
      <tr> 
       <td>page{ <br> &nbsp;display: flex;<br> &nbsp;flex-direction: column;<br> &nbsp;height: 100%;<br> }</td> 
      </tr> 
     </tbody> 
    </table>
5.  最终结果如图：

![8645af6d3195f36129329c2edbb6ae36.png][]

**4** **结语**

微信小程序插入地图的方式比较简单，也可以直接用<map>标签插入，后续将介绍<map>的更多使用方法。

实习编辑：李欣容

稿件来源：深度学习与文旅应用实验室（DLETA）

[18e16a86d50e5a793fd82a5209919047.png]: /images/20220828/cda9c8bda32b4fa293d64417c2475406.png
[79dab7c8db66bd2e5116c9cbe83ccef5.png]: /images/20220828/22d4a7a36433440880fcef838fe11807.png
[4f2210e225a21ce2b367b415ab4570de.png]: /images/20220828/ea7c35507d72482183bb0d95dacfb980.png
[70dd18ca136fb19ea4f314fad77d07b2.png]: /images/20220828/ad30de9fe0854df4a2a7335a0b066076.png
[8645af6d3195f36129329c2edbb6ae36.png]: /images/20220828/8516aeec888b4517b1c23230212088b3.png