vue-amap高德地图demo

vue-amap高德地图demo

---------vue-amap是一套基于Vue 2.0和高德地图的地图组件。---------
官方文档:https://elemefe.github.io/vue-amap

1. vue-amap安装

 npm安装
    npm install vue-amap --save

2. vue-amap引入

在main.js中引入。建议单独写一个vue-amap.js,再将vue-amap.js引入main.js
import VueAMap from 'vue-amap'
import Vue from 'vue'
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
     
    key: '这里填写的你在高德地图官网申请的key',
	//插件,可以根据需求按需引入
	plugin: [

		"AMap.Autocomplete",
		//输入提示插件

		"AMap.PlaceSearch",
		//POI搜索插件

		"AMap.Scale",
		//右下角缩略图插件 比例尺

		"AMap.OverView",
		//地图鹰眼插件

		"AMap.ToolBar",
		//地图工具条

		"AMap.MapType",
		//类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制

		"AMap.PolyEditor",
		//编辑 折线多,边形

		"AMap.CircleEditor",
		//圆形编辑器插件

		"AMap.Geolocation"
		//定位控件,用来获取和展示用户主机所在的经纬度位置

	],

	// 默认高德 sdk 版本为 1.4.4
	v: '1.4.15',
	//ui版本,可以不用写
	uiVersion: '1.0.11'
});

3. vue-amap使用

新建一个vue页面,center:确定地图初始化后的中心,zoom:地图缩放级别

<template>
  <div>
    <div class="amap-wrapper">
      <el-amap
        class="amap-box"
        :vid="map"
        :zoom="zoom"  
        :center="center"   
        :events="events"   
      >
      el-amap>
    div>
  div>
template>
<script>
export default {
      
  data() {
      
    return {
      
      center: [104.067571, 30.639665],
      lng: 0,
      lat: 0,
      zoom: 12,
    }
  },
};
script>
<style>
/* 设置地图容器的长和宽,必不可少 */
.amap-wrapper {
      
  width: 100%;
  height: 400px;
}
style>

到这里你就可以添加一个最原始的高德地图到你的页面

4. 添加marker

 <template>
  <div>
    <div class="amap-wrapper">
      <el-amap
        class="amap-box"
        :vid="map"
        :zoom="zoom"
        :center="center"
        :events="events"
      >
        
        <el-amap-marker
          v-for="marker in markers"
          :key="marker.title"
          :title="marker.title"
          :position="marker.position"
          :events="marker.events"
          :visible="marker.visible"
        >el-amap-marker>
      el-amap>
    div>
  div>
template>
<script>
export default {
      
  data() {
      
    return {
      
      center: [104.067571, 30.639665],
      lng: 0,
      lat: 0,
      zoom: 12,
      markers: [
        {
      
          position: [116.397026, 39.918058],
          events: {
      
            click: () => {
      
              this.center = [116.397026, 39.918058];
              self.zoom = 18;
              console.log(this.center, this.zoom);
            },
          },
          visible: true,
          title: "bejing",
        },
        {
      
          position: [104.067571, 30.639665],
          events: {
      
            click: () => {
      
              this.center = [104.067571, 30.639665];
              this.zoom = 15;
              console.log(this.center, this.zoom);
            },
          },
          visible: true,
          title: "tiyuguan",
        },
        {
      
          position: [104.07332, 30.665513],
          events: {
      
            click: () => {
      
              this.center = [104.07332, 30.665513];
              this.zoom = 15;
              console.log(this.center, this.zoom);
            },
          },
          visible: true,
          title: "这是哪里",
        },
    }
  },
};
script>
<style>
/* 设置地图容器的长和宽,必不可少 */
.amap-wrapper {
      
  width: 100%;
  height: 400px;
}
style>

5. 添加信息窗体

 <template>
  <div>
    <div class="amap-wrapper">
      <el-amap
        class="amap-box"
        :vid="map"
        :zoom="zoom"
        :center="center"
        :events="events"
      >
        
        <el-amap-marker
          v-for="marker in markers"
          :key="marker.title"
          :title="marker.title"
          :position="marker.position"
          :events="marker.events"
          :visible="marker.visible"
        >el-amap-marker>
        
        <el-amap-info-window
          :position="currentWindow.position"
          :content="currentWindow.content"
          :visible="currentWindow.visible"
          :events="currentWindow.events">
        el-amap-info-window>
      el-amap>
    div>
  div>
template>
<script>
export default {
      
  data() {
      
    return {
      
      center: [104.067571, 30.639665],
      lng: 0,
      lat: 0,
      zoom: 12,
      markers: [
        {
      
          position: [116.397026, 39.918058],
          events: {
      
            click: () => {
      
              this.center = [116.397026, 39.918058];
              self.zoom = 18;
              console.log(this.center, this.zoom);
            },
          },
          visible: true,
          title: "bejing",
        },
        {
      
          position: [104.067571, 30.639665],
          events: {
      
            click: () => {
      
              this.center = [104.067571, 30.639665];
              this.zoom = 15;
              console.log(this.center, this.zoom);
            },
          },
          visible: true,
          title: "tiyuguan",
        },
        {
      
          position: [104.07332, 30.665513],
          events: {
      
            click: () => {
      
              this.center = [104.07332, 30.665513];
              this.zoom = 15;
              console.log(this.center, this.zoom);
            },
          },
          visible: true,
          title: "这是哪里",
        }
      ],
      currentWindow:{
      
       position:[104.016403, 30.657064],
       content:'龙爪堰地铁站',
       visible:false,
       events:{
      
          click:()=>{
      
            this.zoom=15
            console.log('lalallalaal')
          }
       }
      }
    }
  },
};
script>
<style>
/* 设置地图容器的长和宽,必不可少 */
.amap-wrapper {
      
  width: 100%;
  height: 400px;
}
style>

6. 添加插件

这里添加一个工具ToolBar

<template>
  <div>
    <div class="amap-wrapper">
      <el-amap
        class="amap-box"
        :vid="map"
        :zoom="zoom"  
        :center="center"   
        :events="events"
        :plugin="pulgin"   
      >
      </el-amap>
    </div>
  </div>
</template>
<script>
export default {
     
  data() {
     
    return {
     
      center: [104.067571, 30.639665],
      lng: 0,
      lat: 0,
      zoom: 12,
      plugin:{
     
        pName: "ToolBar",
        events: {
     
          init(instance) {
     
            console.log(instance);
          },
        },
      }
    }
  },
};
</script>
<style>
/* 设置地图容器的长和宽,必不可少 */
.amap-wrapper {
     
  width: 100%;
  height: 400px;
}
</style>

你可能感兴趣的:(前端知识,vue.js)