腾讯地图
index.html 添加如下：（key需要转成你自己申请的key）
<script type="text/javascript" src="/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<!DOCTYPE html><html lang="en" data-dpr="1"><head><meta charset="utf-8"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title></title><script type="text/javascript" src="/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script></head><body><div id="app"></div></body></html>
vue文件
<template><div ref="container" class="container"></div></template><script>export default {name: 'qqMap',data() {return {map: '',}},mounted() {this.init()},methods: {init() {/* eslint-disable */this.map = new qq.maps.Map(this.$refs.container, {center: new qq.maps.LatLng(24.493474, 118.148698), // 设置中心点坐标// zoom: 15.5zoom: 16})this.mapPolygon()this.mapGroundOverlay()this.mapMarker()},// 多边形mapPolygon() {var path0 = [new qq.maps.LatLng(-90, 180),new qq.maps.LatLng(-90, -180),new qq.maps.LatLng(90, -180),new qq.maps.LatLng(90, 180),]var path1 = [new qq.maps.LatLng(24.496794, 118.143848),new qq.maps.LatLng(24.496344, 118.143923),new qq.maps.LatLng(24.495417, 118.144224),new qq.maps.LatLng(24.495241, 118.144202),new qq.maps.LatLng(24.493406, 118.145039),new qq.maps.LatLng(24.493406, 118.145211),new qq.maps.LatLng(24.492898, 118.145533),new qq.maps.LatLng(24.492644, 118.145576),new qq.maps.LatLng(24.49198, 118.145544),new qq.maps.LatLng(24.490321, 118.151788),new qq.maps.LatLng(24.494734, 118.153225),new qq.maps.LatLng(24.494763, 118.153236),new qq.maps.LatLng(24.495554, 118.150543),new qq.maps.LatLng(24.495996, 118.148816),new qq.maps.LatLng(24.496426, 118.146917),new qq.maps.LatLng(24.496592, 118.146005),new qq.maps.LatLng(24.496631, 118.145383),new qq.maps.LatLng(24.496758, 118.144396),new qq.maps.LatLng(24.496748, 118.14416),new qq.maps.LatLng(24.496767, 118.14387),]var polygon = new qq.maps.Polygon({map: this.map, // 显示多边形图层的底图// path: path1, // 多边形的路径，以经纬度坐标数组构成。path: [path0, path1],fillColor: new qq.maps.Color(255, 255, 255, 1), // 多边形的填充色，可通过Color对象的alpha属性设置透明度。strokeColor: '#5f9ea0', // 多边形的线条颜色，可通过Color对象的alpha属性设置透明度。strokeDashStyle: 'solid', // 多边形的边框样式。实线是solid，虚线是dash。strokeWeight: 2, // 多边形的边框线宽。cursor: 'crosshair', // 鼠标在多边形内的光标样式。clickable: true, // 多边形是否可点击。editable: false, // 多边形是否可编辑。visible: true, // 多边形是否可见。zIndex: 1000 // 多边形的zIndex值。})},// 创建矩形叠加层mapGroundOverlay() {var groundOverlay = new qq.maps.GroundOverlay({map: this.map,imageUrl: '/web/lbs/javascriptV2/demo/img/pm.jpg',// 设置显示图片的地图上的矩形区域bounds: new qq.maps.LatLngBounds(new qq.maps.LatLng(24.492828, 118.145804), new qq.maps.LatLng(24.495017, 118.151874)),opacity: 1,clickable: true, // 设置地面覆盖层可响应鼠标事件，默认为truevisible: true // 设置覆盖层可见，默认为true})},// 添加markermapMarker() {var path3 = [// {locat: new qq.maps.LatLng(24.493416, 118.150532), title: '金尚小区'},{locat: new qq.maps.LatLng(24.493474, 118.148719), title: '金尚小区（西北门）'},// {locat: new qq.maps.LatLng(24.495017, 118.151874), title: '金尚小区（北二门）'},{locat: new qq.maps.LatLng(24.495778, 118.145834), title: '唐庄'},]// 设置Marker自定义图标的属性，// size是图标尺寸，该尺寸为显示图标的实际尺寸，// origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，// anchor是锚点坐标，描述经纬度点对应图标中的位置let anchor = new qq.maps.Point(6, 6),size = new qq.maps.Size(24, 24),origin = new qq.maps.Point(0, 0),icon = new qq.maps.MarkerImage('/web/lbs/javascriptV2/demo/img/center.gif', size, origin, anchor)// icon = new qq.maps.MarkerImage('../assets/address.png', size, origin, anchor)for (let i = 0; i < path3.length; i++) {var marker = new qq.maps.Marker({map: this.map,icon: icon,title: path3[i].title,position: path3[i].locat,})var label = new qq.maps.Label({map: this.map,content: path3[i].title,position: path3[i].locat,// style: {color:"#f00",fontSize:"16px",fontWeight:"bold"},style: {color: '#000', fontSize: '12px', fontWeight: 'normal'},})}},}}</script><style scoped>.container {margin: 0;height: 100%;}</style>
效果图如下：
