vue中引入高德地图并多点标注
Vue 引入 地图 标注 高德 多点
2023-06-13 09:11:41 时间
大家好,又见面了,我是你们的朋友全栈君。
vue中引入高德地图并多点标记
步骤:
- 通过vue的方法引入地图
- 初始化地图,设置宽和高
- 信息窗口实例
- 遍历生成多个标记点
- 首先在项目的public下的index.html中引入地图
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key"></script>
上代码(注释)
<template>
<div>
//为地图设置宽和高
<div id="container" style="width: 100%;height: 700px"></div>
</div>
</template>
<script>
export default {
data() {
return {
//假数据 经纬度
lnglats: [
[113.922282,35.332887],
[113.963101,35.318516],
[113.960801,35.306263],
[113.926809,35.301255]
],
}
},
mounted() {
this.carGPSIP()
},
methods: {
carGPSIP() {
var map = new AMap.Map("container", {
resizeEnable: true});//初始化地图
//信息窗口实例
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -30)});
//遍历生成多个标记点
for (var i = 0, marker; i < this.lnglats.length; i++) {
var marker = new AMap.Marker({
position: this.lnglats[i],//不同标记点的经纬度
map: map
});
marker.content = '我是第' + (i + 1) + '个Marker';
marker.on('click', markerClick);
marker.emit('click', {
target: marker});//默认初始化不出现信息窗体,打开初始化就出现信息窗体
}
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
map.setFitView();
}
},
}
</script>
<style>
</style>
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/143861.html原文链接:https://javaforall.cn
相关文章
- vue 加载页面时触发时间_Vue 刷新页面时会触发事件吗「建议收藏」
- vue django mysql_Python MySQL
- Vue之动态绑定属性
- Vue之Router(一)
- Vue(3)webstorm代码格式规范设置与vue模板配置
- Vue中iframe调用父页面的方法
- vue面试之Composition-API响应式包装对象原理
- easycom模式使vue组件无需引入即可使用
- Vue组件库实现按需引入可以这么做
- 创建一个vue项目并配置默认页面
- vue引入外部js文件并使用_为什么vue不使用ajax
- Vue分页导航_vue分页组件
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- Vue项目引入百度地图
- Vue(renren-fast_vue_master)项目目录结构[通俗易懂]
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- 京东前端高频vue面试题
- vue路由守卫(回顾)
- 小程序里面的双向绑定和vue中的双向绑定有什么区别?
- vue-cli3按需引入element-UI
- vue:将px转化为rem,适配移动端vant-UI等框架(postcss-pxtorem)
- Mac升级卸载vue/cli2.9.6--无法卸载vue
- Vue操作Redis掌握前端数据管理利器(vue操作redis)
- Vue中触发Redis订阅通知(vue中订阅redis)
- Oracle与Vue官网联合宣传前瞻技术,轻松开发(oracle vue官网)