echarts 使用 百度地图 加入自定义图标标记

首先先上效果图,静态图(PS.制作动图还在学习中~):
地图上的文字未展示,根据经纬度标记图,循环展示每个标记点的数据~
动态图1
动态图2

一.如何引入百度地图
  1. 申请百度开发秘钥AK

    http://lbsyun.baidu.com/apiconsole/key

  2. 在vue的index.html里加入

 <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你申请的AK"></script>
  1. 添加Echarts依赖
npm install echarts --save
  1. 在对应的地图组件中引入echarts
import echarts from "echarts/lib/echarts";
import 'echarts/extension/bmap/bmap'     //百度地图

接下来可以编写实现代码啦~

二.实现自定义标记
var data = [
     {name: '盐城', value: 9},
     {name: '日照', value: 12},
     {name: '青岛', value: 12},
      {name: '鄂尔多斯', value: 9},
     {name: '招远', value: 12},
     {name: '舟山', value: 12},
      {name: '金昌', value: 9},
     {name: '云浮', value: 12},
     {name: '南通', value: 12},
];
var geoCoordMap = {
    '海门':[121.15,31.89],
    '鄂尔多斯':[109.781327,39.608266],
    '招远':[120.38,37.35],
    '舟山':[122.207216,29.985295],
    '齐齐哈尔':[123.97,47.33],
    '盐城':[120.13,33.38],
    '赤峰':[118.87,42.28],
    '青岛':[120.33,36.07],
    '乳山':[121.52,36.89],
    '金昌':[102.188043,38.520089],
    '泉州':[118.58,24.93],
    '莱西':[120.53,36.86],
    '日照':[119.46,35.42],
    '胶南':[119.97,35.88],
    '南通':[121.05,32.08],
    '拉萨':[91.11,29.97],
    '云浮':[112.02,22.93],
    '梅州':[116.1,24.55],
    '文登':[122.05,37.2],
    '上海':[121.48,31.22],
    '攀枝花':[101.718637,26.582347],
    '威海':[122.1,37.5],
    '承德':[117.93,40.97],
    '厦门':[118.1,24.46],
    '汕尾':[115.375279,22.786211],
    '潮州':[116.63,23.68],
    '丹东':[
  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值