大家好，我是才哥。

之前我们介绍过《 Python地图绘制工具folium更换地图底图样式全攻略 》，今天我们就来学习基于 folium 进行地图绘制的基础知识点，让大家都可以用这个工具进行轻松的基于地图的可视化操作~

添加小编好友，回复地图领取本文全部演示代码~

目录：

• 1. 准备工作
• 2. 标记点
• 3. 标记圆形区域
• 4. 标记连线
• 5. 标记区域
• 6. 鼠标点击事件
• 7. 鼠标操作标记
• 8. 双地图
• 9. 测距与面积
• 10. 热力图

1. 准备工作

本案例以高德地图为底图样式，经纬度也是基于高德地图下！

import folium.plugins as plugins
import folium
tiles= 'https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
m = folium.Map([40.003451,116.326398],
               tiles=tiles ,
               attr='高德-常规图',
               zoom_start=15,
               control_scale=True,
               width='70%'

2. 标记点

标记点就是在地图是标记出某经纬度所在的位置，使用的是函数方法 folium.Marker() 。

folium.Marker(
    location=None,
    popup=None,
    tooltip=None,
    icon=None,
    draggable=False,
    **kwargs,

• location ：经纬度列表
• popup ：点击标记点时弹出的内容
• tooltip ：鼠标移动到标记点时弹出的提示
• icon ：标记点颜色

# 提示语
tooltip = "点我"
# 标记点
folium.Marker(
    # 标记的点经纬度
    [40.005711,116.32529], 
    # 点击标记出现的 文本
    popup="情人坡",
    # 提示语（鼠标放到标记点上的提示语）
    tooltip=tooltip
).add_to(m)

标记点

有朋友可能会说，点击标记点的提示内容怎么是竖着显示的呀，要是太长的话不久太长了！！当然，我们可以通过设置参数 max_width 来解决这个问题， 让文本信息横向显示 ~

# 图书馆
location = [40.004774,116.3251]
folium.Marker(
    location, 
    # max_width设置每行显示字符数
    popup=folium.Popup("图书馆",max_width=10),
    tooltip=tooltip
).add_to(m)

标记点提示横向显示

到这里，可能也有朋友会问，这个标记点显示的好单调，可以有比如修改颜色或者icon之类的操作吗！？当然，也是有的！

• iconcolor ：标记图案颜色
• icon ：标记形状，比如 cloud 、 cny 与 info-sign 等

# 不同的标记点样式
folium.Marker(
    [40.001528,116.32408], 
    popup="第一教学楼",
    icon=folium.Icon(icon="cloud", icon_color='yellow'),
).add_to(m)
folium.Marker(
    [39.998586,116.328908], 
    popup=folium.Popup("纳米科技楼", max_width=100),
    icon=folium.Icon(color="green", icon="cny"),
).add_to(m)
folium.Marker(
    location=[40.005251,116.322299],
    popup="体育场",
    icon=folium.Icon(color="red", icon="info-sign"),
).add_to(m)

标记点属性

3. 标记圆形区域

标记圆形区域有两种操作，分别是 Circle 和 CircleMarker ，后者是一个 始终与整个Map保持相对尺寸的Circle 。

区别于 Circle 就是 Circle 是绝对尺寸（以m为单位），当你放大地图时 Circle 会变小，因为它与地图的相对尺寸变小了；而 CircleMarker 不论你怎么缩放地图，它在地图都始终是那么大。

m = folium.Map([40.003451,116.326398],
               tiles= tiles,
               attr='高德-常规图',
               zoom_start=15,
               control_scale=True,
               width='70%'
# 标记圆形区域
folium.Circle(
    radius=50,
    location=[40.005062,116.321216],
    popup="西区体育馆",
    color="crimson",
    fill=False,
).add_to(m)
folium.CircleMarker(
    location=[40.004404,116.33239],
    radius=20,
    popup="体育中心",
    color="Blue",
    fill=True,
    fill_color="#3186cc",
).add_to(m)

标记点圆形区域

4. 标记连线

标记连线就比较简单了，就是按照给到的经纬度坐标点依次连线呗，咱们可以应用在比如知道了导航路径的经纬度列表，然后在地图上绘制导航路径之类的。这里用到的是函数方法 PolyLine ，具体大家看下面效果感受一下！

# 标记线
m = folium.Map([40.003451,116.326398],
               tiles= tiles,
               attr='高德-常规图',
               zoom_start=15,
               control_scale=True,
               width='70%'
folium.PolyLine(
    locations=[       
        [39.998586,116.328908],
        [40.001528,116.32408],
        [40.005251,116.322299],
    popup=folium.Popup('标记坐标点之间连线', max_width=200),
    color='red'
).add_to(m)
m              

标记连线

5. 标记区域

知道点之间的连线后，那么点之间围成的区域是不是被我们盯上了，来，交给 Polygon 安排~

# 标记区域
m = folium.Map([40.003451,116.326398],
               tiles= tiles,
               attr='高德-常规图',
               zoom_start=15,
               control_scale=True,
               width='70%'
folium.Polygon(
    locations=[
        [39.998586,116.328908],
        [40.001528,116.32408],
        [40.005251,116.322299],
    popup=folium.Popup('标记坐标点之间多边形区域', max_width=200),
    color='blue', # 线颜色
    fill=True, # 是否填充
    weight=3, # 边界线宽
).add_to(m)

标记区域

6. 鼠标点击事件

鼠标点击事件顾名思义即可，这里将演示两种： 点击显示经纬度 、 点击进行标记点 。用 add_child 来添加这类事件插件！

点击显示经纬度

# 添加点击触发事件
m = folium.Map([40.003451,116.326398],
               tiles= tiles,
               attr='高德-常规图',
               zoom_start=15,
               control_scale=True,
               width='70%'
# 点击显示经纬度
m.add_child(folium.LatLngPopup())              

点击显示经纬度

点击进行标记点

# 点击显示标记点
m.add_child(folium.ClickForMarker(popup="选中的点"))

点击进行标记点

7. 鼠标操作标记

其实，以上的各种操作还可以通过鼠标来一一操作，需要调用 plugins.Draw() 对象来完成~

# 鼠标操作绘制地图标记
m = folium.Map([40.003451,116.326398],
               tiles= tiles,
               attr='高德-常规图',
               zoom_start=15,
               control_scale=True,
               width='70%'
draw = plugins.Draw()
draw.add_to(m)
鼠标操作标记
8. 双地图
双地图就是同时演示两张地图的操作，这里呢我们可以同时显示常规地图和卫星地图，或者别的需求！
m = folium.plugins.DualMap([40.003451,116.326398],
                           tiles= tiles,
                           attr='高德-常规图',
                           zoom_start=15,
                           control_scale=True,
folium.TileLayer().add_to(m.m1)
tiles1 = 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
folium.TileLayer(tiles1,attr='高德卫星地图').add_to(m.m2)
folium.LayerControl(collapsed=True).add_to(m)
复制
双地图
我们也可以通过双地图发现在不同的地图瓦片样式下，经纬度存在一定的偏移，比如默认内置图和高德地图就有比较明显的区别。
不同瓦片经纬度差异
9. 测距与面积
在folium绘制的地图中，其实还提供了测距与测算面积的小插件，点点鼠标就可以完成，直呼666~
m = folium.Map([40.003451,116.326398],
               tiles= tiles,
               attr='高德-常规图',
               zoom_start=15,