vue 使用谷歌地图相关操作

0.地图初始化

    initMap() {
      this.map = new google.maps.Map(document.getElementById('js-container'), {
        zoom: 15,
        center: { lat: xxx, lng: xxx }, // 中心点
        mapTypeId: 'terrain',
        keyboardShortcuts: false, // 隐藏右下角 快捷键盘
        fullscreenControl: false, // 隐藏全屏
        zoomControl: false, // 隐藏缩放
        clickableIcons: false, // 禁止点击marker
        disableDefaultUI: true // 禁用默认 UI 控件
      })
    },

1.获取polygon中心点

// 获取polygon中心点
export function getCenter(lnglatarr) {
  var total = lnglatarr.length
  var X = 0; var Y = 0; var Z = 0
  lnglatarr.forEach((lnglat, index) => {
    var lng = lnglat.longitude * Math.PI / 180
    var lat = lnglat.latitude * Math.PI / 180
    var x, y, z
    x = Math.cos(lat) * Math.cos(lng)
    y = Math.cos(lat) * Math.sin(lng)
    z = Math.sin(lat)
    X += x
    Y += y
    Z += z
  })
  X = X / total
  Y = Y / total
  Z = Z / total

  var Lng = Math.atan2(Y, X)
  var Hyp = Math.sqrt(X * X + Y * Y)
  var Lat = Math.atan2(Z, Hyp)
  // return new AMap.LngLat(Lng * 180 / Math.PI, Lat * 180 / Math.PI)  高德地图使用
  return [Lng * 180 / Math.PI, Lat * 180 / Math.PI] // 谷歌地图使用
}

2.判断点是否在面内
可判断两面是否重叠相交,目前没找到面与面关系判断

/**
*  判断点是否在面内
* LngLat:绘制的坐标
*/
export function isArea(LngLat, total) {
  var result = google.maps.geometry.poly.containsLocation(
    LngLat,
    total
  )
  return result
}

3.polygon上展示文本

// polygon上展示文本
export function showText(map, title, position) {
  var marker = new google.maps.Marker({
    position: position,
    map: map,
    label: title,
    icon: {
      url: '', // 设置图标路径为空
      size: new google.maps.Size(0, 0) // 设置图标大小为0,只要url为空即可
    }
  })
  return marker
}

4.展示polygon

// 展示矢量图形
export function showPolygon(map, area, color, zoom, center) {
  // zoom false自适应 true不自适应
  const polygon = new google.maps.Polygon({
    paths: area,
    strokeColor: color || '#004BDC',
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: color || '#004BDC',
    fillOpacity: 0.2
  })
  polygon.setMap(map)
  if (zoom) {
    // polygon自适应
    var latlngbounds = new google.maps.LatLngBounds()
    for (var i = 0; i < area.length; i++) {
      latlngbounds.extend(area[i])
    }
    map.fitBounds(latlngbounds)
    if (center) {
      // 设置地图中心点
      map.setCenter({ lat: center[0], lng: center[1] })
    }
  }
  return polygon
}

5.绘制polygon

    // 绘制多边形
    drawPolygon(color, draw) {
        var that = this
        that.drawingManager = new google.maps.drawing.DrawingManager({
          drawingMode: google.maps.drawing.OverlayType.POLYGON,
          drawingControl: false,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
              google.maps.drawing.OverlayType.POLYGON
            ]
          },
          polygonOptions: {
            strokeColor: color || '#004BDC', // 边线颜色。
            strokeOpacity: 0.6,
            fillColor: color || '#004BDC',
            fillOpacity: 0.2,
            strokeWeight: 2,
            clickable: true,
            editable: false,
            zIndex: 1
          }
        })
        that.drawingManager.setMap(that.map)
        // 获取绘制 经纬度
        google.maps.event.addListener(that.drawingManager, 'overlaycomplete', function(event) {
          if (event.type === 'polygon') {
            that.drawingManager.setMap(null)
           console.log(event.overlay,event.overlay.getPath())
          }
        })
      }

6.逆地址解析


    // 逆地址解析
    getAddress(location, obj) {
      // location = {lat: xxxxx,lng:xxxxx}
      const geocoder = new google.maps.Geocoder()
      geocoder
        .geocode({ location: location })
        .then((response) => {
          if (response.results[0]) {
           console.log(response.results[0].formatted_address)
          }
        })
        .catch((e) => {
          console.log(e)
        }
        )
    }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js是一种流行的JavaScript框架,用构建用户界面。它提供了一种响应式的数据绑定和组件化的开发方式,使得构建复杂的Web应用变得更加简单和高效。 关于Vue.js谷歌地图的结合,可以通过以下步骤来使用谷歌地图: 1. 首先,你需要在你的Vue项目中引入谷歌地图的JavaScript API。你可以在index.html文件中添加以下代码: ```html <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> ``` 请注意将YOUR_API_KEY替换为你自己的谷歌地图API密钥。 2. 在你的Vue组件中,你可以使用Vue的生命周期钩子函数来初始化和加载谷歌地图。在created或mounted钩子函数中,你可以创建一个新的地图实例,并将其绑定到你的HTML元素上。以下是一个简单的示例: ```javascript <template> <div id="map"></div> </template> <script> export default { mounted() { this.initMap(); }, methods: { initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 37.7749, lng: -122.4194 }, zoom: 8, }); }, }, }; </script> ``` 在上面的示例中,我们在mounted钩子函数中调用了initMap方法来初始化地图。我们创建了一个新的地图实例,并将其绑定到id为"map"的HTML元素上。 3. 你还可以根据需要添加其他功能,例如标记、信息窗口、路线等。你可以在Vue组件的methods中定义相应的方法来实现这些功能。 这只是一个简单的示例,你可以根据自己的需求进行更复杂的地图操作。你可以参考谷歌地图的官方文档来了解更多关于谷歌地图API的用法和功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值