vue中使用Docxtemplater vue中使用map

转载

mob64ca14133dc6 2024-03-29 07:52:19

文章标签 vue中使用Docxtemplater vue.js javascript 百度点击事件 文章分类 机器学习人工智能

安装 vue-baidu-map（官方网站）

$ npm install vue-baidu-map --save

<script src="https://unpkg.com/vue-baidu-map"></script>

组件注册

全局注册

全局注册将一次性引入百度地图组件库的所有组件。

第一种：main.js中添加

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

第二种：index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>baidu_map</title>
    <!-- 引入百度地图组件 -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_APP_KEY"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Hello_BaiduMap.vue中

<template>
  <!-- 地图容器 -->
  <baidu-map class="bm-view">
  </baidu-map>
</template>

<style>
// BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

局部注册

如果有按需引入组件的需要，可以选择局部注册百度地图组件，这将减少工程打包后的容量尺寸。局部注册的 BaiduMap 组件必须声明 ak 属性。所有的独立组件均存放在 vue-baidu-map/components 文件夹下，按需引用即可。由于未编译的 ES 模块不能在大多数浏览器中直接运行，如果引入组件时发生运行时错误，请检查 webpack 的 loader 配置，确认 include 和 exclude 选项命中了组件库。

<template>
  <baidu-map class="bm-view" ak="YOUR_APP_KEY">
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    BaiduMap
  }
}
</script>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

使用案例

1、Hello BaiDuMap

<template>
    <div id="container" class="container"></div>
</template>

<script>
export default {
  name: 'baiduMap',
  data () {
    return {
    }
  },
  mounted() {
    // 页面渲染后执行
    this.mapInit()
  },
  methods: {
    // 初始化地图
    mapInit() {
      var map = new BMap.Map("container")
      // 创建地图实例, 指定中心点116.404, 39.925
      var point = new BMap.Point(116.404, 39.925)
      // 创建点坐标  
      map.centerAndZoom(point, 15)
      // 拖拽地图
      map.enableDragging()
      // 地图缩放
      map.enableScrollWheelZoom()
    }
  }
}
</script>
<style scoped>
  .container {
    width: 100%;
    height: 830px;
  }
</style>

2、设置点标记

<template>
    <div id="container" class="container"></div>
</template>

<script>
export default {
  name: 'baiduMap',
  data () {
    return {
    }
  },
  mounted() {
    // 页面渲染后执行
    this.mapInit()
  },
  methods: {
    // 初始化地图
    mapInit() {
      var map = new BMap.Map("container")
      // 创建地图实例, 指定中心点116.404, 39.925
      var point = new BMap.Point(116.404, 39.925)
      // 创建点坐标  
      map.centerAndZoom(point, 15)
      // 拖拽地图
      map.enableDragging()
      // 地图缩放
      map.enableScrollWheelZoom()
      // 设置标记点
      var marker = new BMap.Marker(point)
      map.addOverlay(marker)
    }
  }
}
</script>
<style scoped>
  .container {
    width: 100%;
    height: 830px;
  }
</style>

3、单个点标记添加点击事件

<template>
    <div id="container" class="container"></div>
</template>

<script>
export default {
  name: 'baiduMap',
  data () {
    return {
    }
  },
  mounted() {
    // 页面渲染后执行
    this.mapAddListener()
  },
  methods: {
    // 单个点标记添加点击事件
    mapAddListener() {
        // 创建地图
        var map = new BMap.Map("container")
        // 创建坐标点
        var point = new BMap.Point(116.404, 39.925)
        // 设置地图中心
        map.centerAndZoom(point, 15)
        // 创建点标记
        var marker = new BMap.Marker(point)
        map.addOverlay(marker)
        // 创建信息窗口
        var opts = {
            width: 200,
            height: 100,
            title: '故宫博物院'
        };
        var infoWindow = new BMap.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts)
        // 标记添加点击事件
        marker.addEventListener('click', function () {
            map.openInfoWindow(infoWindow, point)
        });
    }
  }
}
</script>

<style scoped>
  .container {
    width: 100%;
    height: 830px;
  }
</style>

4、多个点标记添加点击事件

<template>
    <div id="container" class="container"></div>
</template>

<script>
export default {
  name: 'baiduMap',
  data () {
    return {
    }
  },
  mounted() {
    // 页面渲染后执行
    this.mapAddListener1()
  },
  methods: {
    // 多个点标记添加点击事件
    mapAddListener1(){
        var points = [{"lng": 116.404, "lat": 39.925, "name": "故宫博物院", "address": "紫禁城"},
                        {"lng": 116.404, "lat": 39.915, "name": "天安门", "address": "长安街"},
                        {"lng": 116.395, "lat": 39.935, "name": "北海公园", "address": "北海公园湖底"},
                        {"lng": 116.415, "lat": 39.931, "name": "中国美术馆", "address": "五四大街"}]

        var map = new BMap.Map("container")
        // 拖拽地图
        map.enableDragging()
        // 地图缩放
        map.enableScrollWheelZoom()
        // 标记点添加点击事件
        const createMarker = (item) => {
            // 创建坐标点
            var point = new BMap.Point(item.lng, item.lat)
            // 设置地图中心
            map.centerAndZoom(point, 15)
            // 创建点标记
            var marker = new BMap.Marker(point)
            map.addOverlay(marker)
            // 信息内容
            var content =  
                '<ul style="margin:0 0 5px 0;padding:0.2em 0">'
                +'<li style="line-height: 26px;font-size: 15px;">'
                +'<span style="width: 50px;display: inline-block;">名称: </span>' + item.name + '</li>'
                +'<li style="line-height: 26px;font-size: 15px;">'
                +'<span style="width: 50px;display: inline-block;">地址: </span>' + item.address + '</li>'
                +'</ul>'
            var infoWindow = new BMap.InfoWindow(content)
            marker.addEventListener('click', function(){
                map.openInfoWindow(infoWindow, point)
            });
        }
        // 循环标记点添加点击事件
        points.forEach((point) => {
            createMarker(point)
        })
    }
  }
}
</script>

<style scoped>
  .container {
    width: 100%;
    height: 830px;
  }
</style>

5、自定义点标记图标并且添加点击事件

<template>
    <div id="container" class="container"></div>
</template>

<script>
// 引入标记图片
import iconCar from '../assets/blank.gif';
export default {
  name: 'baiduMap',
  data () {
    return {
    }
  },
  mounted() {
    // 页面渲染后执行
    this.myMarker()
  },
  methods: {
    myMarker(){
        var points = {"lng": 116.404, "lat": 39.925, "name": "故宫博物院", "address": "紫禁城"}
        var map = new BMap.Map("container")
        // 拖拽地图
        map.enableDragging()
        // 地图缩放
        map.enableScrollWheelZoom()
        // 创建地图实例
        var point = new BMap.Point(points.lng, points.lat)
        // 创建点坐标  
        map.centerAndZoom(point, 15)
        // 创建标记并设置标记尺寸
        var myIcon = new BMap.Icon(iconCar, new BMap.Size(32, 32))
        var marker = new BMap.Marker(point, {icon: myIcon})
        var labelopts = {
            // 指定文本标注所在的地理位置
            position: point,
            // 设置文本偏移量
            offset: new BMap.Size(0, 0)
        };
        // 设置标记样式
        var label = new BMap.Label('', labelopts);
        label.setStyle({
            color : "#fff",
            backgroundColor : "rgba(0, 0, 0, 0.5)",
            borderRadius : "10px",
            position : "absolute",
            padding : "0px",
            margin : "0px",
            border : "0px",
            cursor : "pointer",
            width : "15px",
            height : "15px"
        })
        map.addOverlay(label)
        map.addOverlay(marker)
        // 信息内容
        var content =  
            '<ul style="margin:0 0 5px 0;padding:0.2em 0">'
            +'<li style="line-height: 26px;font-size: 15px;">'
            +'<span style="width: 50px;display: inline-block;">名称: </span>' + points.name + '</li>'
            +'<li style="line-height: 26px;font-size: 15px;">'
            +'<span style="width: 50px;display: inline-block;">地址: </span>' + points.address + '</li>'
            +'</ul>'
        var infoWindow = new BMap.InfoWindow(content)
        marker.addEventListener('click', function(){
            map.openInfoWindow(infoWindow, point)
        });
    }
  }
}
</script>

<style scoped>
  .container {
    width: 100%;
    height: 830px;
  }
</style>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。