123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 |
- <template>
- <view class="content">
- <button type="primary" @click="location">位置定位</button>
- <map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
- </view>
- </template>
- <script>
- const img = '/static/logo.png';
- export default {
- data() {
- return {
- latitude: 43.780458,
- longitude: 125.384426,
- }
- },
- onReady() {
- this._mapContext = uni.createMapContext("map", this);
- // 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})
- this._mapContext.initMarkerCluster({
- enableDefaultStyle: false,
- zoomOnClick: true,
- gridSize: 60,
- complete(res) {
- console.log('initMarkerCluster', res)
- }
- });
- this._mapContext.on("markerClusterCreate", (e) => {
- console.log("markerClusterCreate", e);
- });
- this.addMarkers();
- },
- methods: {
- addMarkers() {
- const positions = [
- {
- latitude: 43.780458,
- longitude: 125.384426,
- }
- ]
- const markers = []
- positions.forEach((p, i) => {
- console.log(i)
- markers.push(
- Object.assign({},{
- id: i + 1,
- iconPath: img,
- width: 50,
- height: 100,
- joinCluster: true, // 指定了该参数才会参与聚合
- label: {
- width: 50,
- height: 30,
- borderWidth: 1,
- borderRadius: 10,
- bgColor: '#ffffff',
- content: `定位点`
- }
- },p)
- )
- })
- this._mapContext.addMarkers({
- markers,
- clear: false,
- complete(res) {
- console.log('addMarkers', res)
- }
- })
- },
-
- //位置定位
- location(){
- uni.openLocation({
- latitude: 45.780558,
- longitude: 125.384426,
- success: function (res) {
- console.log('打开系统位置地图成功')
- },
- fail: function (error) {
- console.log(error)
- }
- })
- },
- }
- }
- </script>
- <style>
- .content {
- flex: 1;
- }
- .map {
- width: 20rem;
- height: 40rem;
- flex: 1;
- }
- </style>
|