更新记录
1.0.3(2024-11-30) 下载此版本
组件优化
1.0.2(2024-11-23) 下载此版本
优化说明
1.0.1(2024-08-14) 下载此版本
组件优化
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
cc-offlineMap
uniapp专属精品组件页面模板(由前端组件开发出品)
●组件模板规划:
由前端组件开发出品的精品组件页面模板,将陆续发布,预计高达约几百种供您使用,是快速快发项目、创业的必备精品。 合集地址: uni-app组件模板合集地址:(https://ext.dcloud.net.cn/publisher?id=274945)
●组件模板费用:
学习:免费下载,进行学习,无费用;
使用/商用:本页面地址赞赏10元后(当前项目产生赞赏订单可追溯),可终身商用;
●组件模板使用版权/商用:10元
本组件模板免费下载可供学习,如需商用,请在本组件页面模板进行赞赏10元,不赞赏可能面临侵权!保留追究知识产权法律责任! (仅需10元获取组件模板代码-物超所值,1个组件页面市场价约20-100元)
我的技术公众号(关注后可加前端技术交流群)
群内气氛颇为不错,应该可能算为数不多专门进行技术交流的前端群,同时也涵盖后端以及各种产品的交流,偶尔成员们会聊天摸鱼。
使用方法
<template>
<div>
<div id='map-container' style="width: 100vw; height: 600px;">
</div>
<div>
<button @click="handleMarker()">标记</button>
<button @click="handlePolyline()">折线</button>
<button @click="handleTextmark()">文本标记</button>
</div>
</div>
</template>
<script>
import "../../amap/AMap3.js"
export default {
data() {
return {
mapObj: null,
}
},
mounted() {
this.initMap()
},
methods: {
initMap() {
// 自定义地图层
const base_url = "../../amap/"
const layers = [new AMap.TileLayer({
getTileUrl: function (x, y, z) {
return `${base_url}MAP_zxy/${z}/${x}/${y}.png`;
},
opacity: 1,
zIndex: 99,
})]
this.mapObj = new AMap.Map('map-container', { // 设置地图容器id
resizeEnable: true,
zoom: 11,
rotateEnable: true,
pitchEnable: true,
center: [113.098980, 23.361340],
defaultCursor: 'pointer',
showLabel: true, //是否显示文字标注
layers: layers,
maxZoom: 18, // 根据你的瓦片数据设置最大缩放级别
minZoom: 3, // 设置最小缩放级别
})
},
handleMarker() {
let tmpArr = [[113.098980, 23.361340],[113.198980, 23.261340]];
for (let loc of tmpArr) {
// 添加定位点
const marker = new AMap.Marker({
position: loc, //位置
name:'中国',
});
this.mapObj.add(marker); //添加到地图
marker.on("click", function(e) {
// 点击标记点时的回调函数
console.log('您点击了标记点,其位置为:' + e.lnglat.getLng() + ',' + e.lnglat.getLat());
});
// 创建纯文本标记
let text = new AMap.Text({
text:'前端组件开发公众号',
anchor:'center', // 设置文本标记锚点
draggable:false,
cursor:'pointer',
angle:0,
style:{
'padding': '.25rem .25rem',
'margin-bottom': '6rem',
'border-radius': '.25rem',
'background-color': 'white',
'width': 'auto',
'border-width': 0,
'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
'text-align': 'center',
'font-size': '14px',
'color': '#333'
},
position: loc
});
text.setMap(this.mapObj);
}
},
handlePolyline() {
const lineArr = [
[113.098980, 23.361340],
[113.092980, 23.361340],
[113.092980, 23.366340]
];
const polyline = new AMap.Polyline({
path: lineArr, //设置线覆盖物路径
strokeColor: "red", //线颜色
strokeWeight: 5, //线宽
strokeStyle: "solid", //线样式
});
this.mapObj.add(polyline);
},
handleTextmark() {
// 创建纯文本标记
let text = new AMap.Text({
text:'粤电花都燃气电厂',
anchor:'center', // 设置文本标记锚点
draggable:true,
cursor:'pointer',
angle:10,
style:{
'padding': '.75rem 1.25rem',
'margin-bottom': '1rem',
'border-radius': '.25rem',
'background-color': 'white',
'width': '10rem',
'border-width': 0,
'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
'text-align': 'center',
'font-size': '20px',
'color': 'blue'
},
position: [113.098980, 23.362240]
});
text.setMap(this.mapObj);
// let text1 = new AMap.Text({
// text:'双一橡胶',
// anchor:'center', // 设置文本标记锚点
// draggable:true,
// cursor:'pointer',
// angle:10,
// style:{
// 'padding': '.75rem 1.25rem',
// 'margin-bottom': '1rem',
// 'border-radius': '.25rem',
// 'background-color': 'white',
// 'width': '10rem',
// 'border-width': 0,
// 'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
// 'text-align': 'center',
// 'font-size': '20px',
// 'color': 'blue'
// },
// position: [113.092980, 23.366340]
// });
// text1.setMap(this.mapObj)
},
},
}
</script>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style>