html电脑添加高德地图,vue-cli项目h5页面或者PC端页面引入高德地图组件，多点标注，自定义弹窗的详细描述...
1.index.html里引入标签：
2.新建一个js文件(mapConf.js)
export default function MapLoader () { //
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap)
} else {
var script = document.createElement('script')
script.type = 'text/javascript'
script.async = true
script.src = 'http://webapi.amap.com/maps?v=1.3&callback=initAMap&key=yourKey'
script.onerror = reject
document.head.appendChild(script)
}
window.initAMap = () => {
resolve(window.AMap)
}
})
}
3.将新建的js文件引入地图页面
import MapLoader from '../../../common/mapConf' 即:实例化Amap对象
初始化显示map 需要定义center(中心点),zoom(显示地图级别 可以理解为缩放比例)。
MapLoader().then(AMap => {
that.map = new AMap.Map('container', { //“container”是html定义的地图组件的id
center: [116.42894, 39.894624],
zoom: 15,
resizeEnable: true
})
AMap.plugin([
'AMap.ToolBar',
], function(){
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
that.map.addControl(new AMap.ToolBar({
// 简易缩放模式，默认为 false
liteStyle: true
}));
});
//添加多个点标注跟自定义窗体信息方法
this.listenerFuncMap()
}, e => {
})
listenerFuncMap代码
listenerFuncMap(){
let self =this;
AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker', 'overlay/SimpleInfoWindow'], function(MarkerList, SimpleMarker, SimpleInfoWindow) {
var markerList = new MarkerList({
//关联的map对象
map: self.map,
//选中状态(通过点击列表或者marker)时在Marker和列表节点上添加的class，可以借此编写css控制选中时的展示效果
selectedClassNames: 'my-active',
//返回数据项的Id
getDataId: function(dataItem, index) {
//index表示该数据项在数组中的索引位置，从0开始，如果确实没有id，可以返回index代替
return dataItem.id;
},
//返回数据项的位置信息，需要是AMap.LngLat实例，或者是经纬度数组，比如[116.789806, 39.904989]
getPosition: function(dataItem) {
return dataItem.position;
},
//返回数据项对应的Marker
getMarker: function(dataItem, context, recycledMarker) {
var label = {
offset: new AMap.Pixel(16, 18), //修改label相对于marker的位置
};
//存在可回收利用的marker
if (recycledMarker) {
//直接更新内容返回
recycledMarker.setLabel(label);
return recycledMarker;
}
//返回一个新的Marker
if(dataItem.nameDesc=="技师："){
return new AMap.Marker({
label: label,
icon:new AMap.Icon({
image:"http://image.uservices.cn/tmp/uploads/fws/20181214/5c136a64111b8.png",
size:new AMap.Size(50,50),
imageSize:new AMap.Size(50,50)
}),
});
}else{
return new AMap.Marker({
label: label,
icon:new AMap.Icon({
image:dataItem.headerImg?dataItem.headerImg:"http://image.uservices.cn/tmp/uploads/fws/20181214/5c13693c4b239.png",
size:new AMap.Size(50,50),
imageSize:new AMap.Size(50,50)
}),
});
}
},
//返回数据项对应的infoWindow
getInfoWindow: function(dataItem, context, recycledInfoWindow) {
if (recycledInfoWindow) {
recycledInfoWindow.setInfoTitle(dataItem.nameDesc+(dataItem.name));
recycledInfoWindow.setInfoBody("
"+dataItem.addressDesc+dataItem.address+"
"+dataItem.lastTimeDesc+dataItem.lastTime+"
");
return recycledInfoWindow;
}
return new SimpleInfoWindow({
infoTitle: dataItem.name,
infoBody: dataItem.address,
offset: new AMap.Pixel(0, -30)
});
},
});
//监听选中改变
markerList.on('selectedChanged', function(event, info) {
//console.log(event, info);
});
//构建一个数据项数组，数据项本身没有格式要求，但需要支持下述的getDataId和getPosition
var data = [{
nameDesc:"技师：",
name: "张三",
position: [118.42894, 39.894624],
address:"啦啦啦",
addressDesc:"地址：",
lastTime:"8102-10-17",
lastTimeDesc:"获取时间：",
},{
nameDesc:"联系人：",
name: "张燕妮",
position: [116.22894, 39.894624],
address:"哈哈哈",
addressDesc:"地址：",
lastTime:"110",
lastTimeDesc:"电话：",
headerImg:""
}];
//展示该数据
markerList.render(data);
});
self.map.setFitView(); //是标注的点全都自适应初始化显示在地图上
},
如图：
clipboard.png
4.em.....奉上所有代码
import MapLoader from '../../../common/mapConf'
import api from '../api/api';
export default {
data() {
return {
center: [116.42894, 39.894624],
zoom: 15,
markers:[],
map:null,
detailData:"",//详细信息
}
},
methods:{
initMap(){
this.getEngineerAndCustomerPosFunc()
},
listenerFuncMap(){
let self =this;
AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker', 'overlay/SimpleInfoWindow'], function(MarkerList, SimpleMarker, SimpleInfoWindow) {
var markerList = new MarkerList({
//关联的map对象
map: self.map,
//选中状态(通过点击列表或者marker)时在Marker和列表节点上添加的class，可以借此编写css控制选中时的展示效果
selectedClassNames: 'my-active',
//返回数据项的Id
getDataId: function(dataItem, index) {
//index表示该数据项在数组中的索引位置，从0开始，如果确实没有id，可以返回index代替
return dataItem.id;
},
//返回数据项的位置信息，需要是AMap.LngLat实例，或者是经纬度数组，比如[116.789806, 39.904989]
getPosition: function(dataItem) {
return dataItem.position;
},
//返回数据项对应的Marker
getMarker: function(dataItem, context, recycledMarker) {
var label = {
offset: new AMap.Pixel(16, 18), //修改label相对于marker的位置
};
//存在可回收利用的marker
if (recycledMarker) {
//直接更新内容返回
recycledMarker.setLabel(label);
return recycledMarker;
}
//返回一个新的Marker
if(dataItem.nameDesc=="技师："){
return new AMap.Marker({
label: label,
icon:new AMap.Icon({
image:"http://image.uservices.cn/tmp/uploads/fws/20181214/5c136a64111b8.png",
size:new AMap.Size(50,50),
imageSize:new AMap.Size(50,50)
}),
});
}else{
return new AMap.Marker({
label: label,
icon:new AMap.Icon({
image:dataItem.headerImg?dataItem.headerImg:"http://image.uservices.cn/tmp/uploads/fws/20181214/5c13693c4b239.png",
size:new AMap.Size(50,50),
imageSize:new AMap.Size(50,50)
}),
});
}
},
//返回数据项对应的infoWindow
getInfoWindow: function(dataItem, context, recycledInfoWindow) {
if (recycledInfoWindow) {
recycledInfoWindow.setInfoTitle(dataItem.nameDesc+(dataItem.name));
recycledInfoWindow.setInfoBody("
"+dataItem.addressDesc+dataItem.address+"
"+dataItem.lastTimeDesc+dataItem.lastTime+"
");
return recycledInfoWindow;
}
return new SimpleInfoWindow({
infoTitle: dataItem.name,
infoBody: dataItem.address,
offset: new AMap.Pixel(0, -30)
});
},
});
//监听选中改变
markerList.on('selectedChanged', function(event, info) {
//console.log(event, info);
});
//构建一个数据项数组，数据项本身没有格式要求，但需要支持下述的getDataId和getPosition
if(self.detailData){
var data = [{
nameDesc:"技师：",
name: self.detailData.technician.name,
position: [self.detailData.technician.lon, self.detailData.technician.lat],
address:self.detailData.technician.address,
addressDesc:"地址：",
lastTime:self.detailData.technician.lastTime,
lastTimeDesc:"获取时间：",
},{
nameDesc:"联系人：",
name: self.detailData.account.name,
position: [self.detailData.account.lon, self.detailData.account.lat],
address:self.detailData.account.address,
addressDesc:"地址：",
lastTime:self.detailData.account.mobile,
lastTimeDesc:"电话：",
headerImg:self.detailData.account.avatar_hc
}];
}
//展示该数据
markerList.render(data);
});
self.map.setFitView();
},
//初始化获取位置
getEngineerAndCustomerPosFunc(){
api.getEngineerAndCustomerPosAxios(params).then((res)=>{
if(res.code==200){
this.detailData = res.data;
let that = this;
MapLoader().then(AMap => {
that.map = new AMap.Map('container', {
center: [116.42894, 39.894624],
zoom: 15,
resizeEnable: true
})
AMap.plugin([
'AMap.ToolBar',
], function(){
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
that.map.addControl(new AMap.ToolBar({
// 简易缩放模式，默认为 false
liteStyle: true
}));
});
this.listenerFuncMap()
}, e => {
})
}else{
this.$toast.center("信息获取失败")
}
})
}
},
created(){
this.initMap();
document.title = '技师位置';
},
}
.wrapper{
position:absolute;
width:100%;
height:100%;
}
#container{
width: 100%;
height: 100%;
}
html电脑添加高德地图,vue-cli项目h5页面或者PC端页面引入高德地图组件，多点标注，自定义弹窗的详细描述...相关推荐
- vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析 从给出的提示可以看出 ...
- Vue项目9：Vue Cli项目使用echarts可视化
Vue Cli项目使用echarts可视化有两种方式:一.直接引入echarts 二.使用vue-ehcarts. 一.直接引入echarts 1.创建Vue Cli项目 进入cmd命令行,输入如 ...
- Vue Cli 项目结构简述
webnode_modules --Vue Cli 项目以来的js模块全放到这里public --存放静态资源 存放自己的js cssfavicon.ico -- 浏览器小图标index.html - ...
- vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
- vue PC 端使用腾讯地图定位
vue PC 端使用腾讯地图定位 需求:希望网站显示当前城市 腾讯前端定位组件 解决的方法 定义一个文件,加载定位js 在vue页面中使用 需求:希望网站显示当前城市 腾讯前端定位组件 key的申请, ...
- vue项目实现大屏PC端字体自适应
vue项目实现大屏PC端字体自适应 我们字体自适应选择使用rem作为单位,通过监听窗口大小的变化,更新1rem的对应的px数来实现字体自适应. 注意该方法,我们需要在APP.vue文件中实现, 首先A ...
- Vue项目实战 —— 后台管理系统( pc端 ) 第三篇
前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第二篇_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第一篇 _0.活在风浪里 ...
- Vue项目实战 —— 后台管理系统( pc端 ) 第一篇
前期回顾 我只写注释 -- 让Ai写代码_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_0.活在风浪里的博客-CSDN博客https://b ...
- Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html
今天在开发移动端项目中有个需求是手机端预览pdf,ios可以直接在浏览器预览,安卓不行,所以使用pdf.js来解决,之前项目用过该插件很好用,但是今天使用的时候发现根本没有访问到viewer.html ...
- 安装Vue CLI项目（Vue2.0）
一.Vue CLI脚手架(Vue2.0) Vue CLI官方文档:官方文档 1.什么是脚手架 命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及 ...
最新文章
- 网上有打印按键怎么设置下载_打印机共享怎么设置 如何设置打印机共享【详细攻略】...
- 第二、三章：信息系统项目管理基础与立项管理-章节真题
- PostgreSQL 10.1 手册_部分 III. 服务器管理_第 30 章 可靠性和预写式日志_30.5. WAL内部...
- 微信小程序，图片居中显示，适配不同机型
- 【原创】Eclipse实现图形化界面插件-vs4e
- 概率编程编程_概率编程语言的温和介绍
- sqlserver 如何把一列分为一行显示_SqlServer数据库如何快速修改表的一列值
- Hadoop集群(一) Zookeeper搭建
- PHP基础语法的学习
- win7（32位）U盘安装、卸载ubuntu（64位）双系统
- 信息系统项目管理师（2022年）—— 重点内容：信息化和信息系统（1）
- 中标麒麟V6版本32位以及64位下载地址
- python显示图片固定大小
- egret 显示帧动画
- linux系统Redis下载安装步骤
- 失去后才发现一直都爱
- 小程序：下载图片文件（wx.downloadFile）并保存到手机相册（wx.saveImageToPhotosAlbum）
- 从IPv4到IPv6为什么这么久？IPv5哪里去了？
- git extensions 设置成中文
- android模拟器GPS信号设置