vue高德地图(英文地图+点标记+信息窗体)

npm install vue-amap --save

main.js

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4',
  uiVersion: '1.0.11'
});

vue.config.js

configureWebpack: {
    name: name,
    externals: {
      AMap: "AMap",
      AMapUI: "AMapUI"
    }
  },

页面

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

<script>
export default {
    
  data() {
    
    return {
    
      ico
Vue 2 中,使用高德地图 (AMap) 和 Element UI 等库来创建动态的标记窗口可以分为几个步骤: 1. 首先,你需要在项目中安装高德地图相关的依赖,如 `@vue-amap/core` 和 `element-ui` 或者你选择的 UI 组件库。 ```bash npm install @vue-amap/core element-ui --save ``` 2. 引入所需的模块,并在组件中注册 AMap 服务: ```javascript import { Map, Marker } from '@vue-amap/core'; import { ElButton, ElPopover } from 'element-ui'; Vue.use(Map, { ak: 'your_amap_key', // 你的高德地图 API 密钥 }); ``` 3. 创建一个数据列表,每个元素代表一个标记及其信息: ```javascript data() { return { markers: [ { name: '地1', coordinate: { lng: 116.404, lat: 39.915 } }, { name: '地2', coordinate: { lng: 121.473, lat: 31.230 } }, // 更多地... ], }; } ``` 4. 使用 `v-for` 循环遍历这个列表,在模板中为每个标记创建一个新的标记和对应的击事件: ```html <template> <div> <map :center="center" :zoom="zoom"> <!-- 循环生成标记 --> <marker v-for="(item, index) in markers" :key="index" :position="item.coordinate"> <el-popover :placement="item.position" title="地名称"> <p>{{ item.name }}</p> <!-- 可选:添加更多内容或操作按钮 --> <el-button slot="reference">详情</el-button> </el-popover> </marker> </map> </div> </template> <script> export default { data() { //... }, computed: { center: { get() { // 如果需要计算中心位置,这里可以根据需要计算 return this.markers[0].coordinate; } }, zoom: { // 设置初始缩放级别 default: 12, }, }, }; </script> ``` 每当你击一个标记时,对应的ElPopover会显示出来,提供有关该位置的信息。记得替换 `your_amap_key` 为你自己的高德API密钥。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值