注册地图key

使用地图前，需要到对应官网申请key

1.首先，注册开发者账号，成为高德开放平台开发者

2. 登陆之后，在进入「应用管理」 页面「创建新应用」

3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI )」

项目中引用

申请完key之后，这里已后台系统为例，使用地图。

1.在index.html，一般在public文件夹下或根目录

image.png

引用相关文件,这里使用了地图工具，有兴趣可以官网可以了解下AMap.Geocode

2.引用完之后，项目基本可以使用了，这里使用组件的方式引入

image.png

utils.js，这里将地图对象的创建和一些需要的功能的方法统一起来，后续方便调用

const _clickMarker = Symbol('_clickMarker');

const _addPolygon = Symbol('_addPolygon');

const _addOtherPolygon = Symbol('_addOtherPolygon');

const _deleteNode = Symbol('_deleteNode');

let polylines = [];

let polyEditor;

let polygon;

let markerPoint = [];

class Amap {

constructor(map, amap) {

if (!map || !amap) {

throw new Error('map or amap is required');

}

this.map = map;

this.amap = amap;

this.path = [];

}

addTeamPoint (points) { // 通过坐标以红点显示

const {

map,

amap

} = this;

var markerContent = "

points.forEach(item => {

const notMarker = new amap.Marker({

position: item,

content: markerContent,

});

map.add(notMarker);

notMarker.setLabel({

offset: new amap.Pixel(-60, -20), // 修改label相对于maker的位置

content: 123123141231

});

map.setFitView(notMarker);

});

}

addPoint (lnglat, labelShow) {

const {

map,

amap

} = this;

map.remove(markerPoint);

markerPoint = [];

const position = new amap.LngLat(lnglat.lng, lnglat.lat);

const marker = new amap.Marker({

position,

// 以 icon 的 [center bottom] 为原点

offset: new amap.Pixel(-13, -30)

});

if (labelShow === 1) {

marker.setLabel({

offset: new amap.Pixel(-60, -20), // 修改label相对于maker的位置

content: 123123141231

});

}

// 将 markers 添加到地图

map.add(marker);

markerPoint.push(marker);

map.setFitView(marker);

}

startPoint (callback) {

polygon.on('click', (e) => {

this.addPoint(e.lnglat);

callback(e.lnglat);

});

}

setData ({

path,

point,

}) {

const {

amap

} = this;

if (point) {

this[_addPolygon](path);

this.addPoint(new amap.LngLat(point[0], point[1]));

} else {

this[_addOtherPolygon](path);

}

}

// 画圆

circleDrawing ({

point,

deliverRange,

labelShow

}) {

const {

map,

amap

} = this;

const circle = new amap.Circle({

center: [point[0], point[1]], // 圆心位置

radius: deliverRange, // 半径

fillColor: '#1791fc40',

strokeColor: '#FF33FF'

});

this.addPoint(new amap.LngLat(point[0], point[1]), labelShow);

circle.setMap(map);

}

selectionPoint (callback) {

this.map.on('click', (e) => {

this.addPoint(e.lnglat);

callback(e.lnglat);

});

}

setPoint (point) { // 设置地图标点

const {

amap

} = this;

this.addPoint(new amap.LngLat(point[0], point[1]));

}

// 画线

addPolyline (path) {

const {

map,

amap

} = this;

map.remove(polylines);

polylines = [];

const polyline = new amap.Polyline({

path,

isOutline: true,

outlineColor: '#ffeeff',

borderWeight: 3,

strokeColor: '#3366FF',

strokeOpacity: 1,

strokeWeight: 6,

strokeStyle: 'solid',

strokeDasharray: [10, 5],

lineJoin: 'round',

lineCap: 'round',

zIndex: 50

});

polyline.setMap(map);

polylines.push(polyline);

// 缩放地图到合适的视野级别

map.setFitView([polyline]);

}

// 清除地图上所有的覆盖物

clearMap () {

this.map.clearMap();

}

// 开始编辑

polyEditorStart () {

if (polyEditor) {

polyEditor.open();

}

}

// 关闭编辑

polyEditorClose (callback) {

if (polyEditor) {

polyEditor.close();

callback(this.path);

}

}

// 检查点是否在多边形内

isPointInRing (point, path) {

const {

amap

} = this;

if (polyEditor) {

polyEditor.close();

}

const isPointInRing = amap.GeometryUtil.isPointInRing(point, path);

return isPointInRing;

}

autocomplete () { // 输入相关关键字，联想相关地点

const {

map,

amap

} = this;

console.log(amap);

amap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], () => {

const autoOptions = {

city: '广州', // 城市，默认全国

input: 'pickerInput' // 使用联想输入的input的id

};

const autocomplete = new amap.Autocomplete(autoOptions);

amap.event.addListener(autocomplete, 'select', (e) => {

map.setCenter(e.poi.location);

});

});

}

geolocation () { // 获取当前位置

const {

map,

amap

} = this;

map.plugin('AMap.Geolocation', () => {

const geolocation = new amap.Geolocation({

enableHighAccuracy: true, // 是否使用高精度定位，默认:true

timeout: 10000, // 超过10秒后停止定位，默认：无穷大

maximumAge: 0, // 定位结果缓存0毫秒，默认：0

convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true

showButton: true, // 显示定位按钮，默认：true

buttonPosition: 'LB', // 定位按钮停靠位置，默认：'LB'，左下角

buttonOffset: new amap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)

showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true

showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true

panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true

zoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false

});

map.addControl(geolocation);

geolocation.getCurrentPosition();

amap.event.addListener(geolocation, 'complete', (e) => {

console.log(e);

}); // 返回定位信息

});

}

[_clickMarker] (path, finishCallback) {

if (path.length > 2) {

this.clearMap();

this[_addPolygon](path, finishCallback);

}

}

[_deleteNode] (index, callback) {

callback(index, this);

}

[_addPolygon] (path, finishCallback) { // 编辑构建多边形，可以通过点击的方式点与点连线构成多边形

const {

map,

amap

} = this;

polygon = new amap.Polygon({

path,

isOutline: true,

borderWeight: 3,

strokeColor: '#FF33FF',

strokeWeight: 6,

strokeOpacity: 0.2,

fillOpacity: 0.4,

// 线样式还支持 'dashed'

fillColor: '#1791fc',

zIndex: 50

});

polygon.setMap(map);

if (finishCallback) {

finishCallback(path);

}

map.plugin(['AMap.PolyEditor'], () => {

polyEditor = new amap.PolyEditor(map, polygon);

polyEditor.on('end', (event) => {

this.path = event.target.getPath();

});

});

}

[_addOtherPolygon] (path) { //绘制多边形图案

const {

map,

amap

} = this;

const otherPolygon = new amap.Polygon({

path,

isOutline: true,

borderWeight: 3,

strokeColor: '#FF33FF',

strokeWeight: 6,

strokeOpacity: 0.2,

fillOpacity: 0.4,

fillColor: '#1791fc',

zIndex: 50

});

otherPolygon.setMap(map);

}

getLocalBylnlt (data) { // 返回经纬度和地址转换的对象

const {

map,

amap

} = this;

const geocoder = new amap.Geocoder({

city: '010'

});

return geocoder;

}

}

export default Amap;

创建组件

:id="mapId"

class="map-content"

:style="{'height':height+'px'}"

>

id="pickerInput"

ref="seach"

placeholder="输入键字选取地点"

>

import MapUtils from './utils';

export default {

props: {

mapId: {

type: String,

required: true

},

type: {

type: String,

default: ''

},

height: {

type: Number,

default: 500

}

},

data () {

return {

map: null,

AMap: window.AMap,

utils: null,

path: [],

clickListener: null

};

},

mounted () {

const { mapId, AMap } = this;

const map = new AMap.Map(mapId, {

resizeEnable: true,

// center: this.localMarker,

zoom: 20,

mapStyle: 'amap://styles/whitesmoke'

});

this.map = map;

const utils = new MapUtils(map, AMap);

this.utils = utils;

if (!this.type) {

utils.placeSearch();

}

// 加载BasicControl，loadUI的路径参数为模块名中 'ui/' 之后的部分

window.AMapUI.loadUI(['control/BasicControl'], function (BasicControl) {

// 缩放控件

map.addControl(new BasicControl.Zoom({

position: 'rb', // right bottom，右下角

showZoomNum: true // 显示zoom值

}));

});

const _this = this;

AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], () => {

const autoOptions = {

city: '广州', // 城市，默认全国

input: 'pickerInput' // 使用联想输入的input的id

};

const autocomplete = new AMap.Autocomplete(autoOptions);

AMap.event.addListener(autocomplete, 'select', (e) => {

const { lng, lat } = e.poi.location;

utils.setPoint([lng, lat]);

_this.getLocalBylnlt([lng, lat] , false);

});

});

},

methods: {

// 地图选点 开启选点

startPoint (callback) {

const { utils } = this;

this.$refs.seach.value = '';

utils.selectionPoint(callback);

},

// 显示已有的标记

setPoint (callback) {

const { utils } = this;

utils.setPoint(callback);

},

getLocalBylnlt (data, boolOpen) {

const { utils } = this;

let geocoder = null;

if (!geocoder) {

geocoder = utils.getLocalBylnlt();

}

if (boolOpen) {

geocoder.getAddress(data, (status, result) => {

if (result.info === "OK") {

this.$emit("getLocalhost", { address: result.regeocode.formattedAddress, local: data });

}

})

} else {

this.$emit("getLocalhost", { address: "", local: data });

}

},

}

};

.custom-content-marker {

position: relative;

width: 25px;

height: 34px;

}

.custom-content-marker img {

width: 100%;

height: 100%;

}

#pickerBox {

position: absolute;

z-index: 9999;

top: 2%;

right: -5%;

width: 300px;

}

#pickerInput {

width: 200px;

padding: 5px 5px;

}

#poiInfo {

background: #fff;

}

.amap_lib_placeSearch .poibox.highlight {

background-color: #cae1ff;

}

.amap_lib_placeSearch .poi-more {

display: none !important;

}

.amap-sug-result {

z-index: 9999;

}

引用

image.png

// 引用该组件文件所对应的方法

// 开始选点

selectionPoint () {

this.$nextTick(() => {

this.$refs.maps.startPoint((point) => {

if (point) {

this.latitude = point.lat;

this.longitude = point.lng;

}

});

})

},

getLocal () {

this.localMapVis = true;

this.selectionPoint();

const longitude = 113.280353;

const latitude = 23.125223;

this.$nextTick(() => {

this.$refs.maps.setPoint([longitude, latitude]);

})

},

getMapInfo () {

const { longitude, latitude } = this;

this.$refs.maps.getLocalBylnlt([longitude, latitude], true);

},

getLocalhost (res) {

console.log(res);

this.latitude = res.local[1];

this.longitude = res.local[0];

}

功能方法描述

1.该组件可以在地图标记点

2.该组件可以通过选择联想输入的地址，设置标点

3.该组件可以通过标点获得当前地址详细信息和经纬度

image.png

其他方法示例

image.png

相关方法

画圆 、显示附近点

html页面使用地图,前端PC端使用地图步骤（高德）相关推荐

  1. web前端PC端 百度地图的开发指导

    先看效果图片: 最终效果描述: 1.搜索:有搜索提示,并且可以根据选择进行定位: 2.获取经纬度:点击地图中某点,在文本框中获取当前点的经纬度的值: 3.获取详细地址:点击地图中某点时,将该点的详细地 ...

  2. 前端pc端、手机端适配基本知识

    前端pc端.手机端适配问题 一个项目如何做到手机.电脑共用的方式 1.第一种方式:响应式布局(栅格布局),即通过媒体查询控制css样式,从而实现一套代码手机.电脑共享.一般而言,手机.电脑共享样式,其 ...

  3. 千锋教育Web前端——PC端企业类型整页制作

    千锋教育Web前端--PC端企业类型整页制作 文章目录 千锋教育Web前端--PC端企业类型整页制作 一.PC端的布局 二.源码 1.CSS源码 2.HTML源码 三.运行结果 一.PC端的布局 通栏 ...

  4. 跳出弹窗页面禁止滚动（PC端和手机端）

    跳出弹窗页面禁止滚动(PC端和手机端) pc端如何实现 1.当弹窗显示时,为body元素添加属性:overflow:hidden, 当关闭弹窗时移除该属性即可 2.在弹窗的div上设置 @scroll ...

  5. 前端pc端和移动端的区别？

    1.兼容性 pc端需要考虑浏览器兼容性,移动端主要考虑屏幕分辨率和不同系统的兼容性. 2.页面布局 PC端常用布局固定宽度980px居中,移动端屏幕的大小和分辨率不同,多用响应式布局,使用em(以父元 ...

  6. 前端PC端微信扫码登录

    PC端微信扫码登录 一.微信开放平台 1.创建网站应用 2.设置回调域名 二.代码 1.在index.html页面引入http://res.wx.qq.com/connect/zh_CN/htmled ...

  7. 腾讯地图：PC端将于11月11日停止服务

    新浪科技讯 10月12日下午消息,据腾讯地图官网,腾讯地图PC端将于11月11日停止服务.

  8. 前端 PC端兼容性问题总结

    1.如果图片加a标签在IE9-中会有边框 解决方案: 1 img{ border : none ;} 2.rgba不支持IE8 解决方案:可以用 opacity  eg: opacity:0.7;/* ...

  9. html手机pc不同页面,PC端和手机端如何同时生成静态页

    静态页是和图片类似的静态资源,访问静态资源不会经过程序处理,不会根据浏览器返回不同页面.要同时支持PC端和手机端浏览器,且要生成静态页时,最好使用bootstrap之类的技术,实现自适应页面设计. 如 ...

  10. 【前端之路】通过css让移动端与pc端自适应

    跨平台移动WEB技术 一.目的 1.了解什么是响应式WEB设计 2.掌握CSS3媒体查询的使用 3.熟悉什么是栅格系统 4.掌握弹性盒布局 5.掌握汉堡菜单的制作 二.制作一个页面: 1.PC端为国字 ...

最新文章

  1. 从ASP.NET得到Microsoft Word文档
  2. 两层或以上的showModalDialog解决方法
  3. Python之面向对象继承和派生
  4. 单元测试(二)基本使用争议篇
  5. [react] react中什么是受控组件？
  6. 电脑麦克风使用不了没有声音了怎么办
  7. Scanner类(next,nextLine,nextInt)的用法与常见问题
  8. 子组件触发父组件的方法
  9. ivar和property
  10. vue-pdf安装之后，运行报错can not resolve ‘pdfjs-dist/es5/web/pdf_viewer‘
  11. eclipse adt 插件离线安装
  12. 图像处理之matlab中imnoise函数用法详解
  13. 安服/渗透测试面试题（2）
  14. 【教程篇】手机卡刷Rom详细教程
  15. 智能城市dqn算法交通信号灯调度_滴滴张博：智慧交通大脑是支撑城市可持续发展的重要基础设施...
  16. 小白入门isp数据流走向一
  17. Hex Editor
  18. 测试工作中常见问题及优化方案
  19. python 爬取豆瓣的美剧
  20. 什么是sku 什么是spu

热门文章

  1. Excel如何删除指定区域中重复值只保留一个
  2. 诺禾：和Java一样能用汉字编程的神奇语言
  3. 计算机设计项目符号和编号,项目符号和编号
  4. 至高心法 - SpringCloud Alibaba （二）Nacos 服务注册与配置中心
  5. 弹性公网ip到底是什么意思？弹性公网ip与公网ip的区别
  6. 这才是我想要的彩虹进度条-[vue-ins-progress-bar]
  7. 怎么给照片加水印？今天教你一个方法
  8. PaaS平台为什么越来越受欢迎？
  9. 种子信息服务器,老司机揭秘：“种子”的前世今生
  10. 当电脑打开显示每日新闻联播主要内容