项目引入船讯网海图插件

最新推荐文章于 2025-11-16 21:58:07 发布

原创

最新推荐文章于 2025-11-16 21:58:07 发布 · 3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html #css

项目引入船讯网海图插件

这个控件，我在百度谷歌知乎掘金思否都搜不到一篇相关的文章-- ，太稀有了，
链接：http://api.shipxy.com/
下面是一个demo，这个根据官网看入门使用介绍，可能像我这种小白就会踩坑，这个组件竟然要在web服务上才会加载渲染出来，不像echart那些，能直接用过cdn加载出来，原理不懂，我用html+node搞出来的，没尝试到vue项目，不知道需不要node服务，这个控件是基于JQ+layui

效果如何：
在这里插入图片描述
1、这是我设置的demo，通过node实现页面跳转，具体的api功能要去官网示例看，自己看下。
2、以下我给出我用的代码

html方面，很久没用jq，不习惯，我引入了vue.js ，elment-ui，当然也引入了JQ和控件相关链接，
尤其以下几条cdn，是我从官网示例network找到的，这个需要去注册，我没搞

<script src="http://api.shipxy.com/h5/api/plugins/jquery/jquery.min.js"></script>
<script src="http://api.shipxy.com/h5/api/?v=3.0&k=1F6D701272402D1E7D8D316CCE519123"></script>
<script src="http://api.shipxy.com/h5/api/3.0/ElaneMap.min.js"></script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="http://api.shipxy.com/favicon.ico" />
    <title>船舶航海</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="http://api.shipxy.com/h5/api/plugins/jquery/jquery.min.js"></script>
    <script src="http://api.shipxy.com/h5/api/?v=3.0&k=1F6D701272402D1E7D8D316CCE519123"></script>

    <script src="http://api.shipxy.com/h5/api/3.0/ElaneMap.min.js"></script>

    <!-- 引入样式 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
      .div {
   
   
        margin: 0;
      }
      body {
   
   
        background-color: #f0f0f0;
        margin: 0;
        padding: 0;
      }
      .container {
   
   
        position: relative;
      }
      .left {
   
   
        position: absolute;
        left: 0;
        top: 0;
        width: calc(30%