标签：map val 地图 门店 初识 AMap new type 高德
初次使用高德地图，做的小页面。记录一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/demo.css">
<script src="https://webapi.amap.com/maps?v=1.3&key=92a8e896bae2152c2961181db93c6d45"></script>
<title>附近门店</title>
</head>
<body>
<div id="app">
<div id="Container" style="position:relative;"></div>
<div class="edit-box" v-if="!oneStore_status">
<div class="tab-box">
<div class="tab">
<select v-model="store_type" @change='choose_type'>
<option value ="allStores" selected="selected">全部</option>
<option value ="kangjie">康洁</option>
<option value="kelaian">客来安</option>
<option value="yunxi">云洗</option>
</select>
</div>
<div class="search-box">
<input type="text" id="" v-model="search_words" @input='search' @confirm='search' placeholder="请输入门店关键词">
<img src="img/search.png" alt="" @click="search" class="search_img">
</div>
</div>
<section class="wrapper-list__title1">
<ul class="wrapper-list" >
<li class="wrapper-list-item" v-for="(item,index) in now_list" :key='item.id' @click='choose_store(item,index)'>
<img class="wrapper-list__img" src="./img/list_icon1.png" alt="">
<div class="wrapper-list__rig">
<div class="wrapper-list__title">
<!-- 云洗 - 云溪君泰中央公园店 -->
{{item.type}} - {{item.name}}
</div>
<div class="wrapper-list__des">
{{item.disCH}} | {{item.add}}
</div>
</div>
</li>
</ul>
</section>
</div>
<!-- 某个店的信息 -->
<div v-if="oneStore_status" class="oneStore">
<div class="store-top">
<img @click="oneStore_status = false;mapData.zoom = 11" src="./img/goBack.png" alt="" class="goBack">
<span class="store-detail">商家详情</span>
</div>
<div class="store-info">
<img :src="oneStore.img" alt="" class="store-img">
<div style="margin-right: 16px;">
<div class="store-name">{{oneStore.type}} - {{oneStore.name}}</div>
<div class="store-distance">{{oneStore.disCH}} | {{oneStore.add}}</div>
</div>
<img @click='callPhone' src="./img/phone1.png" alt="" class="phone-img">
</div>
</div>
<div v-if="tip" class="nostore-tip">
无此门店！
</div>
</div>
</body>
</html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
// 无此门店提示信息
tip:false,
// 某个门店信息
oneStore_status:false,
oneStore:{},
// 地图有关
mapData:{
zoom: 11, //级别
animateEnable: true,
resizeEnable: true,
},
locationM:'',
LocationO:'',
markerData:[],
// 门店搜索
store_type:'',
search_words:'',
now_list:[],
// 门店数据
kangjie:[{
"id": "74",
"name": "门店1",
"center": "112.731227,37.74429",
"type": "康洁",
"tel": "16603467747",
"area": "榆次区",
"add": "高校新区山西传媒学院生活服务广场",
"linkman": "田营军",
"img": "img/kangjie/chuanmei.jpg",
"subDistricts": []
}],
kelaian:[ {
"id": "76",
"name": "门店2",
"center": "112.547731,37.803517",
"type": "客来安",
"tel": "15364964755",
"area": "小店区",
"add": "大马北高层",
"linkman": "张丽芳",
"img": "img/kelaian/taizhongkelaiandian.png",
"subDistricts": []
}, {
"id": "77",
"name": "门店3",
"center": "112.531741,37.848228",
"type": "客来安",
"tel": "15110384205",
"area": "万柏林区",
"add": "新晋祠路幸福里小区负三层西南角D001",
"linkman": "李小丹",
"img": "img/kelaian/xingfuli.jpg",
"subDistricts": []
}],
yunxi:[{
"id": "107",
"name": "门店4",
"center": "112.518483,37.818455",
"type": "云洗",
"tel": "15534057111",
"area": "万柏林区",
"add": "金虎便利(3297远大凤玺湾东门店)",
"linkman": "",
"img": "img/yunxi/juntai.jpg",
"subDistricts": []
}],
allStores:[],
}
},
created(){
this.allStores = this.kangjie.concat(this.kelaian,this.yunxi)
this.now_list = this.allStores
this.store_type = 'allStores'
},
methods:{
// js联系商家
callPhone(){
window.location.href = "tel:" + this.oneStore.tel;
},
// 选择门店
choose_store(item){
var markerIcon = new AMap.Icon({
image: 'img/current_img.png',
size: new AMap.Size(20, 35),
imageSize: new AMap.Size(20, 35)
});
var selectedIcon = new AMap.Icon({
image: 'img/map_label_bg.png',
size: new AMap.Size(49, 65),
imageSize: new AMap.Size(49, 65)
});
this.map.setZoom(15);
this.oneStore_status = true
this.oneStore = item
// 点击门店，地图显示到该门店的位置
let _lnglat = item.center.split(',')
this.map.panTo(new AMap.LngLat(_lnglat[0],_lnglat[1]));
this.map.setZoom(18);
this.markerData.forEach(v=>{
if(v.Qi.id == item.id){
var MarkerItem = v
setTimeout( () => {
MarkerItem.setLabel(this.markerLabel(item.type)); // 点击详情添加label
MarkerItem.setIcon(selectedIcon); // 点击详情后切换图标
}, 200)
}else{
}
})
},
// 定位到某个门店时，marker换掉
markerLabel(title){
return {
offset: new AMap.Pixel(0, 14), //设置文本标注偏移量
content: '<div class="go-gaode">点击下方标记点去高德地图 ></div><div class="map-icon">' + title + '</div>', //设置文本标注内容
direction: 'right' //设置文本标注方位
}
},
// 地图初始化
initMap(){
let map = new AMap.Map("Container", this.mapData);
// 地图工具
map.plugin(["AMap.ToolBar"], function () {
map.addControl(new AMap.ToolBar({
liteStyle: true,
position: 'RT',
offset: new AMap.Pixel(10, 30)
}));
});
// 定位自己的位置
map.plugin('AMap.Geolocation', () => {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
buttonPosition:'RB', //定位按钮的停靠位置
showMarker: true,//是否显示定位点
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
showCircle: true
});
map.addControl(geolocation);
geolocation.getCurrentPosition((status,result)=>{
if(status=='complete'){
onComplete(result)
this.distance()
}else{
console.log('eee');
one rror(result)
}
});
});
//解析定位结果
function onComplete(data) {
this.locationM = data.position.M
this.locationO = data.position.O
}
//解析定位错误信息
function one rror(data) {
console.log(data,789987978)
}
this.map = map
this.updateMarker()
},
// 计算距离
distance(){
this.now_list.map(function (val, key) {
val.dis = ''
let centerArr = val.center.split(',');
// // 我的位置与门店的距离
var lnglat = new AMap.LngLat(locationM, locationO); //我的位置
val.dis = lnglat.distance(centerArr) //门店的位置
val.dis = Number(val.dis.toFixed(1));
})
this.now_list = this.now_list.sort(function (e, f) {
return e.dis - f.dis
})
this.now_list.map(function (val, key) {
if (String(val.dis).indexOf('m') === -1) {
if (val.dis > 0) {
if (val.dis > 1000) {
disCH = (val.dis / 1000).toFixed(1) + 'km';
} else {
disCH = val.dis.toFixed(1) + 'm';
}
val.distance
} else {
disCH = '未知';
}
val.disCH = disCH
}
})
},
// 地图标点
updateMarker(){
// 清除之前的标点
this.map.clearMap()
this.markerData = []
// 添加新的点标记
this.now_list.forEach(v => {
let jingweidu = v.center.split(',')
let marker = new AMap.Marker(
{
position: new AMap.LngLat(jingweidu[0], jingweidu[1]),
offset: new AMap.Pixel(-10, -10),
// icon: icon, // 添加 Icon 实例
title: v.name,
zoom: 13,
tel: v.tel,
linkman: v.linkman,
type: v.type,
area: v.area,
add: v.add,
img: v.img,
map: this.map,
id:v.id
}
);
this.markerData.push(marker)
this.map.add(this.markerData)
//点击地图上的marker携带目标地点跳入高德地图网页
marker.on('click',(e)=>{
marker.markOnAMAP({
position:marker.getPosition()
})
})
});
},
// -------------------关于门店搜索start-------------------
// 选择门店类型
choose_type(){
this.now_list = this[this.store_type]
this.mapData.zoom = 14
this.updateMarker()
this.map.setFitView();
this.distance()
},
// 搜索门店
search(){
this.now_list = this[this.store_type].filter(v=>{
return v.name.includes(this.search_words)
})
if(this.now_list.length == 0){
this.tip = true
setTimeout(()=>{
this.tip = false
},1500)
}
}
},
mounted: function () {
this.initMap()
this.store_type = 'allStores'
}
})
</script>
标签：map,val,地图,门店,初识,AMap,new,type,高德 来源： https://blog.csdn.net/weixin_46032200/article/details/117787396
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。