在antd pro内使用vue-amap,实现地图和坐标点。

1,安装

npm install vue-amap --save

2,在main,js内引入

import VueAMap from 'vue-amap';

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: 'YOUR_KEY',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  v: '1.4.4'
});

3.在vue中使用,template

<template>
  <div id="app">
    <div class="amap-wrapper">
      <el-amap
        ref="map"
        :vid="'amapDemo'"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        :events="events"
        class="amap-demo"
      >
        <el-amap-marker v-for="u in markers" :position="u.position"></el-amap-marker>
        <el-amap-marker :position="[121.5273285, 31.21515044]" :icon="icon"></el-amap-marker>
      </el-amap>
    </div>
  </div>
</template>

script

<script>
export default {
  data() {
    return {
      center: [121.5273285, 31.21515044],
      zoom: 12,
      position: [121.5273285, 31.21515044],
      icon: '/huoche.png',
      events: {
        init(o){
          console.log(o.getCenter());
        },
        zoomchange: (e) => {
            console.log(e);
        },  
        zoomend: (e) => {
        //获取当前缩放zoom值 console.log(
this.$refs.map.$$getInstance().getZoom()); console.log(e); }, click: e => { alert('map clicked') } }, markers: [ { position: [121.5273285, 31.41515044] }, { position: [121.5273286, 31.31515045] } ],
//使用其他组件 plugin: [ { pName:
'Scale', events: { init(instance) { console.log(instance) } } }, { pName: 'ToolBar', events: { init(instance) { console.log(instance) } } } ] } }, } </script>

 

转载于:https://www.cnblogs.com/blog-zy/p/11504683.html

Logo

前往低代码交流专区

更多推荐