vue怎么使用高德地图根据坐标定位点-创新互联

这篇文章将为大家详细讲解有关vue怎么使用高德地图根据坐标定位点，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司拥有网站维护技术和项目管理团队，建立的售前、实施和售后服务体系，为客户提供定制化的成都网站制作、做网站、网站维护、遂宁托管服务器解决方案。为客户网站安全和日常运维提供整体管家式外包优质服务。我们的网站维护服务覆盖集团企业、上市公司、外企网站、商城系统网站开发、政府网站等各类型客户群体，为全球千余家企业提供全方位网站维护、服务器维护解决方案。

正文

<script>
var map,marker;
export default {
  data(){
    return{
      arriveCoor:[108.947025,34.2613255],//坐标点
      arrive:"",//位置信息
    }
     
  },
  mounted() {   
    mapDraw(this.arriveCoor),
    mapCoor(this.arriveCoor)
  },
  methods:{
     mapDraw(arriveCoor){
     map = new AMap.Map('map-location', {  //map-location是嵌地图div的id
       resizeEnable: true, //是否监控地图容器尺寸变化
       zoom:16, //初始化地图层级
       center: arriveCoor //初始化地图中心点
     });
     // 定位点
     this.addMarker(arriveCoor);
  },
  // 实例化点标记
  addMarker(arriveCoor) {
    var _this = this;
    marker = new AMap.Marker({
      icon: "", //图片ip
      imageSize: "20px",
      position: arriveCoor,
      offset: new AMap.Pixel(-13, -30),
      // 设置是否可以拖拽
      draggable: true,
      cursor: 'move',
      // 设置拖拽效果
      raiseOnDrag: true
    });
    marker.setMap(map);
  },
　 // 查询坐标
　 mapCoor(lnglatXY){
　　　　var _this = this;
　　　　AMap.service('AMap.Geocoder',function() {//回调函数
　　　　　　var geocoder = new AMap.Geocoder({});
　　　　　　geocoder.getAddress(lnglatXY, function (status, result) {
　　　　　　　　if (status === 'complete' && result.info === 'OK') {
　　　　　　　　　　//获得了有效的地址信息:
　　　　　　　　　　_this.arrive = result.regeocode.formattedAddress;
　　　　　　　　else {
　　　　　　　　　　_this.arrive = "暂无位置";
　　　　　　　　}
　　　　　　});
　　　　})
　　},
}
</script>

关于“vue怎么使用高德地图根据坐标定位点”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

当前文章：vue怎么使用高德地图根据坐标定位点-创新互联
文章源于：https://www.cdcxhl.com/article34/ggipe.html

成都网站建设公司_创新互联，为您提供外贸建站、服务器托管、微信公众号、企业建站、搜索引擎优化、网页设计公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联