初识高德地图
2021/6/10 18:30:39
本文主要是介绍初识高德地图，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
初次使用高德地图，做的小页面。记录一下
<!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>
这篇关于初识高德地图的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-23Springboot应用的多环境打包入门
- 2024-11-23Springboot应用的生产发布入门教程
- 2024-11-23Python编程入门指南
- 2024-11-23Java创业入门：从零开始的编程之旅
- 2024-11-23Java创业入门：新手必读的Java编程与创业指南
- 2024-11-23Java对接阿里云智能语音服务入门详解
- 2024-11-23Java对接阿里云智能语音服务入门教程
- 2024-11-23JAVA对接阿里云智能语音服务入门教程
- 2024-11-23Java副业入门：初学者的简单教程
- 2024-11-23JAVA副业入门：初学者的实战指南
