关于我没能用echerts和本地的json解决交通路线规划问题用百度api实现地图路线功能

众所周知ECharts是一个纯 Javascript 的图表库,提供了常规的折线图、柱状图、散点图、饼图、k线图等十分炫酷的图表,最主要的要文档还是中文的,制作者为baidu.好咱不用知道制作者是谁。我按照平时使用ECharts的习惯自然是直接导入jquery的链接和图表的链接然后一个div嵌套元素,js拿到元素就完活了。

先上json地址:https://raw.githubusercontent.com/ecomfe/echarts/master/test/data/lines-bus.json

如果直接拷贝官网的代码,是看不到效果的,大家都知道这个地址是错的,大家可以去上面这个网址下载数据。

我并不关心这个数据是啥因为他太长了。

 可是他跑不起来于是我就找解决方法找其他的地方的问题看看引用问题或者json数据的问题因为当时报错然后浏览器还会抛出异常Uncaught TypeError: data.map is not a function然后我换了一个json能跑出来。哦 对了 代码结构如下:

 

用下面的json做的山东的可以跑出来,但是我还是没解决问题。于是我试着看能不能用网络上的json数据实现 。也还是没有实现,但是我有次运行是代码报了下面的错误。

 

 然后我就想到直接用百度给的js的api解决以下就是步骤:注册

 然后 信息确认

 搞起来:

 

<script src='http://api.map.baidu.com/api?v=3.0&ak=你的密匙'></script>

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=niRSMyiK2AEFr6E6xZHuO3MtlYo8yT73"></script>


<script type="text/javascript">
    var map = new BMapGL.Map("container");
    // 创建地图实例
    var point = new BMapGL.Point(117.128, 36.681);
    // 创建点坐标
    map.centerAndZoom(point, 15);
    // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
</body>
</html>

成功hei'h嘿嘿 但是突然发现还不如引入一个a标签简单,做麻烦了,淦。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值