【vue引用原生高德地图并多点标注】
Vue 原生 引用 地图 标注 高德 多点
2023-06-13 09:11:29 时间
大家好,又见面了,我是你们的朋友全栈君。
vue引用原生高德地图并多点标注
首先在vue项目中的pubic下的index.html的head中引用
<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>
然后在你创建的项目中设置一个div标签,要设置宽高
<template>
<div>
<div id="container" style="width: 100%;height: 550px"></div>
</div>
</template>
在script中
<script>
export default {
data() {
return {
//要标记的所有点的经纬度
lnglats: [
[108.909074, 34.254225],
[108.910766, 34.254348],
[108.910495, 34.253531],
[108.909502, 34.253571],
],
}
},
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>
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/143667.html原文链接:https://javaforall.cn
相关文章
- vue 子组件调用父组件方法传参,父组件调用也传参_面试题vue组件封装思路
- JS之在Vue对象内部获取vue对象的索引(箭头函数的闭包导致this代表的是函数本身)「建议收藏」
- Vue(27)vue-codemirror实现在线代码编译器「建议收藏」
- Java Web(十二)Vue&Element
- vue webpack 前后端请求响应流程
- 关于vue-admin-work后台前端管理框架重大升级
- vue及原生html实现列表无缝上下滚动,以及单行滚动
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- 前端三大框架之Vue-day01
- 开心档之Vue教程4
- 前端面试之Vue
- 私活神器!!SpringBoot+Vue企业级支付系统!附源码!
- (二十八)vue-router总结
- Vue模板是怎样编译的_2023-02-24
- Vue子组件向父组件传值this.$emit()
- Vue的beforeRouteEnter如何使用组件实例的方法
- linux下快速部署Vue项目(linux部署vue)
- Vue.js 与MySQL结合,打造高效Web应用程序(vue.js mysql)
- Vue接入Redis拓展应用的可能性(vue调redis)
- Vue结合Redis,加快数据读取速度(vue读取redis)
- Vue实现Redis订阅消息的实现方案(vue 订阅redis)
- Vue用Redis储存获取数据(vue获取redis)
- Vue结合Redis实现性能优化(vue引入redis)
- 使用Vue从Redis获取数据(vue去redis取数据)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- 从零开始Vue项目中使用Redis(vue使用redis)
- Oracle Vue考场助力企业数据库技术突破(oracle vue考场)
- Oracle Vue网站助力网站创新,让你的网站飞起来(oracle vue网站)