diff --git a/index.html b/index.html index 030a6ff51bfc6f6adcc472f6d8c02db92ce947a8..2d0575a4d10653aee923f12a6b4d9e696c7d67cf 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@
+ diff --git a/src/components/amap.vue b/src/components/amap.vue index 1d0a52a93cb2ed774ccfcd8656a11bbd152ba036..ad47453fbe62922560db47b47ce06ca0b37fc861 100644 --- a/src/components/amap.vue +++ b/src/components/amap.vue @@ -18,16 +18,46 @@ function initMap() { zoom: 4, //初始化地图级别 center: [104.06, 35.67], //初始化地图中心点位置 }); - generatePoints().forEach((item) => { - const marker = new AMap.Marker({ - position: new AMap.LngLat(item.position[0], item.position[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] - title: '北京' - }); + // generatePoints().forEach((item) => { + // const marker = new AMap.Marker({ + // position: new AMap.LngLat(item.position[0], item.position[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] + // title: '北京' + // }); - // 将创建的点标记添加到已有的地图实例： - map.add(marker); - }) + // // 将创建的点标记添加到已有的地图实例： + // map.add(marker); + // }) + var style = [{ + url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', + anchor: new AMap.Pixel(6, 6), + size: new AMap.Size(11, 11) + }, { + url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png', + anchor: new AMap.Pixel(4, 4), + size: new AMap.Size(7, 7) + }, { + url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png', + anchor: new AMap.Pixel(3, 3), + size: new AMap.Size(5, 5) + } + ]; + + var mass = new AMap.MassMarks(citys, { + opacity: 0.8, + zIndex: 111, + cursor: 'pointer', + style: style + }); + + var marker = new AMap.Marker({ content: ' ', map: map }); + + mass.on('mouseover', function (e) { + + marker.setPosition(e.data.lnglat); + marker.setLabel({ content: e.data.name }) + }); + mass.setMap(map); }).catch(e => { console.log(e); })