1：申请百度，高德等任意一个地图的key
2：在vue的html中 引入
3：简单粗暴上代码
HTML:
<section><div id="map_canvas" class="map_canvas" style="width: 100%;height: 100%;"></div></section>
script：
<script>export default {name: "robRedpackage",data() {return {latitude:"",longitude:"",map: '',lnglats: [{name: '湄河港湾',position: [116.062366,36.462102],switchId: '1'}, {name: '装饰画',position: [116.057238,36.46454],switchId: '2'}, {name: '广告',position: [116.060216,36.465554],switchId: '3'}, {name: '门业',position: [116.057765,36.462365],switchId: '3'}]};},mounted() {// 接口this.init()},methods: {init() {this.$nextTick(() => {this.loadmap();})},loadmap() {let that = thisthat.map = new AMap.Map('map_canvas', {dragEnable: true,zoomEnanle: false,resizeEnable: true, // 地图加载完成zoom: 15, //初始化地图层级 比例尺部分});that.map.plugin('AMap.Geolocation', function() {var geolocation = new AMap.Geolocation({enableHighAccuracy: true, //是否使用高精度定位，默认:truetimeout: 100, // 设置定位超时时间，默认：无穷大buttonOffset: new AMap.Pixel(10, 10), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)zoomToAccuracy: false, //定位成功后是否自动调整地图视野到定位点panToLocation:true,//定位成功后，把定位得到的坐标设置为地图中心点坐标});that.map.addControl(geolocation);geolocation.getCurrentPosition();AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息function onComplete(data) {// data是具体的定位信息console.log("定位成功信息：", data);// data是具体的定位信息this.latitude = data.position.getLat(); // 纬度this.longitude = data.position.getLng(); // 经度console.log("latitude", this.latitude, "longitude", this.longitude);}});// 出现markerfor (let i = 0; i < that.lnglats.length; i++) {let marker = new AMap.Marker({position: that.lnglats[i].position, //采用默认样式，无需自定义icon: new AMap.Icon({image: require("@/assets/img/hong.png"), //定位点显示的图标size: new AMap.Size(100, 100), // 图标大小imageSize: new AMap.Size(26, 30),}),});marker.setMap(that.map);// 将switchId添加进markermarker.switchId = that.lnglats[i].switchId;// 设置label标签// label默认蓝框白底左上角显示，样式className为：amap-marker-label// marker.setLabel({// offset: new AMap.Pixel(20, 20), //设置文本标注偏移量// content: that.lnglats[i].name, //设置文本标注内容// direction: 'top' //设置文本标注方位// });// 给标记加一个点击事件，传入对应的参数marker.on('click', function(e) {sessionStorage.setItem('switchId', e.target.switchId)// that.$router.push('/sec/innerBox')alert(e.target.switchId)})var circle = new AMap.Circle({center: new AMap.LngLat(116.05964, 36.46347),radius: 500, //半径strokeColor: "pink", //线的颜色strokeOpacity: 0, //线的透明度strokeWeight: 2, //线的粗细度fillColor: "pink", //填充颜色fillOpacity: 0.1 //填充透明度});// 圆的范围that.map.add(circle);// 比例尺的控件AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.OverView"], function() {that.map.addControl(new AMap.ToolBar());});}},}};</script>
style:
section {overflow: auto;flex: 1;width: 100%;height: 100%;.map_canvas {width: 100%;min-height: 10rem;background: pink;}}
