|
|
@@ -1,11 +1,13 @@
|
|
|
<template>
|
|
|
- <view class="content">
|
|
|
- <map id="amap" style="width: 100%; height: 208upx;"></map>
|
|
|
+ <view class="page-section page-section-gap">
|
|
|
+ <map style="width: 100%; height: 218upx;" :latitude="latitude" :longitude="longitude"></map>
|
|
|
+ <!-- <map id="map" style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"> -->
|
|
|
+ <!-- </map> -->
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
+// import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
// window._AMapSecurityConfig = {
|
|
|
// securityJsCode: "d62687dd438cfadd859bbab66d8e41a2",
|
|
|
// };
|
|
|
@@ -14,53 +16,66 @@ export default {
|
|
|
return {
|
|
|
map: null,
|
|
|
marker: null,
|
|
|
+ id:0, // 使用 marker点击事件 需要填写id
|
|
|
+ title: 'map',
|
|
|
+ latitude: 39.909,
|
|
|
+ longitude: 116.39742,
|
|
|
+ covers: [{
|
|
|
+ latitude: 39.909,
|
|
|
+ longitude: 116.39742,
|
|
|
+ iconPath: '../../../static/location.png'
|
|
|
+ }, {
|
|
|
+ latitude: 39.90,
|
|
|
+ longitude: 116.39,
|
|
|
+ iconPath: '../../../static/location.png'
|
|
|
+ }]
|
|
|
};
|
|
|
},
|
|
|
onReady() {
|
|
|
- this.initMap();
|
|
|
+ // this.initMap();
|
|
|
},
|
|
|
methods: {
|
|
|
- initMap() {
|
|
|
- console.log(222);
|
|
|
+ // initMap() {
|
|
|
+ // console.log(222);
|
|
|
|
|
|
- AMapLoader.load({
|
|
|
- key: "18c5a399a406896c5aa53d808e401294", // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
- version: '2.0', // 指定要加载的API的版本号，默认为 1.4.15
|
|
|
- }).then((AMap) => {
|
|
|
- this.map = new AMap.Map('amap', {
|
|
|
- zoom: 11, // 初始化地图层级
|
|
|
- center: [116.397428, 39.90923], // 初始化地图中心点位置
|
|
|
- });
|
|
|
- // this.map.on('click', (e) => {
|
|
|
- // lngLatLng.value = e.lnglat.lng;
|
|
|
- // lngLatLat.value = e.lnglat.lat;
|
|
|
- // console.log(lngLatLng.value, lngLatLat.value);
|
|
|
- // // positionArr.value = [lngLatLng.value, lngLatLat.value]
|
|
|
- // // addressValue.value = ""
|
|
|
- // // if (marker.value) {
|
|
|
- // // marker.value.setPosition([lngLatLng.value, lngLatLat.value]); // 更新Marker位置
|
|
|
- // // }
|
|
|
- // // this.emit('back', positionArr.value)
|
|
|
- // })
|
|
|
+ // AMapLoader.load({
|
|
|
+ // key: "18c5a399a406896c5aa53d808e401294", // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
+ // version: '2.0', // 指定要加载的API的版本号，默认为 1.4.15
|
|
|
+ // }).then((AMap) => {
|
|
|
+ // this.map = new AMap.Map('amap', {
|
|
|
+ // zoom: 11, // 初始化地图层级
|
|
|
+ // center: [116.397428, 39.90923], // 初始化地图中心点位置
|
|
|
+ // });
|
|
|
+ // // this.map.on('click', (e) => {
|
|
|
+ // // lngLatLng.value = e.lnglat.lng;
|
|
|
+ // // lngLatLat.value = e.lnglat.lat;
|
|
|
+ // // console.log(lngLatLng.value, lngLatLat.value);
|
|
|
+ // // // positionArr.value = [lngLatLng.value, lngLatLat.value]
|
|
|
+ // // // addressValue.value = ""
|
|
|
+ // // // if (marker.value) {
|
|
|
+ // // // marker.value.setPosition([lngLatLng.value, lngLatLat.value]); // 更新Marker位置
|
|
|
+ // // // }
|
|
|
+ // // // this.emit('back', positionArr.value)
|
|
|
+ // // })
|
|
|
|
|
|
- // let auto = new AMap.AutoComplete({
|
|
|
- // city: "太原市", // 限定城市，默认全国
|
|
|
- // input: "search_input",
|
|
|
- // })
|
|
|
- // let placeSearch = new AMap.PlaceSearch({
|
|
|
- // city: "太原市",
|
|
|
- // map: this.map
|
|
|
- // });
|
|
|
- // // 标点位置
|
|
|
- // marker.value = new AMap.Marker({
|
|
|
- // position: [113.392517, 22.517024], //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
- // map: this.map, // 当操作完成时，应该将结果展示在哪个地图上
|
|
|
- // })
|
|
|
- // map.add(marker)
|
|
|
- }).catch(e => {
|
|
|
- console.error(e);
|
|
|
- });
|
|
|
- }
|
|
|
+ // // let auto = new AMap.AutoComplete({
|
|
|
+ // // city: "太原市", // 限定城市，默认全国
|
|
|
+ // // input: "search_input",
|
|
|
+ // // })
|
|
|
+ // // let placeSearch = new AMap.PlaceSearch({
|
|
|
+ // // city: "太原市",
|
|
|
+ // // map: this.map
|
|
|
+ // // });
|
|
|
+ // // // 标点位置
|
|
|
+ // // marker.value = new AMap.Marker({
|
|
|
+ // // position: [113.392517, 22.517024], //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
+ // // map: this.map, // 当操作完成时，应该将结果展示在哪个地图上
|
|
|
+ // // })
|
|
|
+ // // map.add(marker)
|
|
|
+ // }).catch(e => {
|
|
|
+ // console.error(e);
|
|
|
+ // });
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
lihongxiao