精华内容
下载资源
问答
  • 前言项目中需要根据坐标定位,将自己的实现...export default {data(){return{arriveCoor:[108.947025,34.2613255],//坐标点arrive:"",//位置信息}},mounted() {mapDraw(this.arriveCoor),mapCoor(this.arriveCoor...

    前言

    项目中需要根据坐标定位,将自己的实现过程写下来,废话不多说,上代码

    正文

    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 = "暂无位置";

    }

    });

    })

    },

    }

    总结

    以上所述是小编给大家介绍的vue使用高德地图根据坐标定位点的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

    展开全文
  • vue中使用高德地图的上浮下钻—最简单明了的方法(无需后台接口渲染文字marker) 第一步: 安装vue-amap: npm i vue-amap -S 第二步: 配置main.js import VueAMap from 'vue-amap' Vue.use(VueAMap); VueAMap....

    在vue中使用高德地图的上浮下钻—最简单明了的方法(无需后台接口渲染文字marker)

    第一步:

    安装vue-amap:

    npm i vue-amap -S
    

    第二步:

    配置main.js

    import VueAMap from 'vue-amap'
    Vue.use(VueAMap);
    VueAMap.initAMapApiLoader({
      key: '你的key',
      plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.ControlBar','AMap.MouseTool','AMap.GeometryUtil','AMap.DistrictSearch'],
      // 默认高德 sdk 版本为 1.4.4
      v: '1.4.4',
      uiVersion:'1.0.11'
    });
    

    第三步:

    代码

    <template >
      <el-container id="container"> </el-container>
    </template>
    <script>
    export default {
      data() {
        return {
          marker: {}, //点标记
          markers: [], //点集合
          map: {} //地图对象
        };
      },
      methods: {
        //初始化地图
        initMap() {
          //创建地图
          this.map = new AMap.Map("container", {
            cursor: "default",
            resizeEnable: true, //是否监控地图容器尺寸变化,默认值为false
            expandZoomRange: true, //是否支持可以扩展最大缩放级别,和zooms属性配合使用设置为true的时候,zooms的最大级别在PC上可以扩大到20级,移动端还是高清19/非高清20
            // gestureHandling: "greedy",//谷歌里面的// hybrid包含卫星和地名
            zooms: [3, 20],
            zoom: 8,
            defaultCursor: "pointer", //变成小手 地图默认鼠标样式。参数defaultCursor应符合CSS的cursor属性规范
            showLabel: true, //显示地图文字标记
            layers: [
              new AMap.TileLayer.Satellite() //默认卫星
              // new AMap.TileLayer.RoadNet(), //地图路网
              // new AMap.Buildings({// 楼块图层
              //   zooms: [16, 18],
              //   zIndex: 10,
              //   heightFactor: 2 //2倍于默认高度,3D下有效
              // })
            ] //Satellite卫星地图,RoadNet路网,地图图层数组,数组可以是图层 中的一个或多个,默认为普通二维地图。当叠加多个图层时,普通二维地图需通过实例化一个TileLayer类实现
            // viewMode: "3D", //是否3d视角
            // pitch: 40 //俯仰角度,默认0,[0,83],2D地图下无效 。(自V1.4.0开始支持)
          });
          
          //行政区域
          AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
            //创建一个实例
            var districtExplorer = new DistrictExplorer({
              eventSupport: true,
              map: this.map
            });
            //feature被点击
            // districtExplorer.on("featureClick", (e, feature) => {});
            //外部区域被点击
            // districtExplorer.on("outsideClick", e => {});
    
            //内部区域feature被点击
            districtExplorer.on("featureClick", (e, feature) => {
              console.log("feature", feature);
              adcodes = []; //清空区码数组
              adcodes = [feature.properties.adcode]; //绘制地图区域
              // this.initCity(feature); //调用city城市地图
              districtExplorer.loadMultiAreaNodes(adcodes, (error, areaNodes) => {
                //设置定位节点,支持鼠标位置识别
                console.log("areaNodes", areaNodes);
                //注意节点的顺序,前面的高优先级
                districtExplorer.setAreaNodesForLocating(areaNodes);
                //清除已有的绘制内容
                districtExplorer.clearFeaturePolygons();
                for (var i = 0, len = areaNodes.length; i < len; i++) {
                  renderAreaNode(areaNodes[i]);
                  this.initTown(areaNodes[i]);
                }
                //更新地图视野
                this.map.setFitView(districtExplorer.getAllFeaturePolygons());
              });
            });
            //外部区域被点击
            districtExplorer.on("outsideClick", e => {
              this.removeArea(); //清除地图上的文字marker标记
              //setTimeout(() => {
                //this.map.setCenter([119.92, 28.45]); //设置地图中心
              //}, 1000);
    
              /***清空监听的项目名称id和adcode***/
              adcodes = [];
              adcodes = [
                330000 //浙江
              ];
              // this.initCity(); //获取城市区域
              districtExplorer.loadMultiAreaNodes(adcodes, (error, areaNodes) => {
                //设置定位节点,支持鼠标位置识别
                //注意节点的顺序,前面的高优先级
                districtExplorer.setAreaNodesForLocating(areaNodes);
                //清除已有的绘制内容
                districtExplorer.clearFeaturePolygons();
                for (var i = 0, len = areaNodes.length; i < len; i++) {
                  renderAreaNode(areaNodes[i]);
                  this.initTown(areaNodes[i]);
                }
                //更新地图视野 下钻上浮效果
                this.map.setFitView(districtExplorer.getAllFeaturePolygons());
              });
            });
    
            //设置绘制的子区域和父区域的自身属性(包括线颜色,透明度等)
            function renderAreaNode(areaNode) {
              //绘制子级区划
              districtExplorer.renderSubFeatures(areaNode, function(feature, i) {
                return {
                  cursor: "default",
                  bubble: true,
                  // strokeColor: "#00a4ce", //线颜色
                  strokeColor: "#03d7a1",
                  strokeOpacity: 1, //线透明度
                  strokeWeight: 1.5, //线宽
                  // fillColor: "#09152a", //填充色
                  fillColor: "#072942",
                  fillOpacity: 0.1 //填充透明度
                };
              });
              //绘制父区域
              districtExplorer.renderParentFeature(areaNode, {
                cursor: "default",
                bubble: true,
                // strokeColor: "#00a4ce", //线颜色
                strokeColor: "#03d7a1",
                strokeOpacity: 1, //线透明度
                strokeWeight: 1.5, //线宽
                // fillColor: "#09152a", //填充色
                fillColor: "#072942",
                fillOpacity: 0.5 //填充透明度
              });
            }
            var adcodes = [];
            //根据角色来绘制不同的区域
            adcodes = [
              330000 //浙江
            ];
            // this.initCity();
            //绘制多区域
            districtExplorer.loadMultiAreaNodes(adcodes, (error, areaNodes) => {
              //设置定位节点,支持鼠标位置识别
              //注意节点的顺序,前面的高优先级
              districtExplorer.setAreaNodesForLocating(areaNodes);
              //清除已有的绘制内容
              districtExplorer.clearFeaturePolygons();
              for (var i = 0, len = areaNodes.length; i < len; i++) {
                renderAreaNode(areaNodes[i]);
                this.initTown(areaNodes[i]);
              }
              //更新地图视野 下钻效果
              this.map.setFitView(districtExplorer.getAllFeaturePolygons());
            });
          });
    
          //AMap.DistrictSearch 行政区查询服务,提供行政区相关信息    这里实际上就是挖一个只有浙江省的空白覆盖区域,外部不让点击
          // new AMap.DistrictSearch({
          //   extensions: "all",
          //   subdistrict: 0
          // }).search("浙江省", (status, result) => {
          //   // 外多边形坐标数组和内多边形坐标数组
          //   var outer = [
          //     new AMap.LngLat(-360, 90, true),
          //     new AMap.LngLat(-360, -90, true),
          //     new AMap.LngLat(360, -90, true),
          //     new AMap.LngLat(360, 90, true)
          //   ];
          //   var holes = result.districtList[0].boundaries;
    
          //   var pathArray = [outer];
          //   pathArray.push.apply(pathArray, holes);
          //   var polygon = new AMap.Polygon({
          //     pathL: pathArray,
          //     strokeColor: "#0d4f50",
          //     strokeWeight: 1,
          //     fillColor: "#0d4f50",
          //     fillOpacity: 0.5
          //   });
          //   polygon.setPath(pathArray);
          //   this.map.add(polygon); //添加多边形 外部区域不让点了
          // });
        },
    
        /**各市级地图***这里要想渲染点标记就需要后台接口给你全部数据来循环里面的详细内容或者自己点出来*****/
        initCity(feature) {
          
          if (
            feature.properties.adcode == undefined ||
            feature.properties.adcode == null ||
            feature.properties.adcode == ""
          ) {
            adcode = "";
          }
          this.removeArea(); //清空文字点标记
          this.marker = new AMap.Marker({
            content: `<h1 class ="markerCss">${feature.properties.name} </h1>`,
            position: [feature.properties.center[0], feature.properties.center[1]],
            offset: new AMap.Pixel(0, 0)
          });
          this.markers.push(this.marker);
          this.map.add(this.markers);
        },
        //多个县级名称
        initTown(AreaNode) {
          
          if (
            AreaNode.adcode == undefined ||
            AreaNode.adcode == null ||
            AreaNode.adcode == ""
          ) {
            adcode = "";
          }
          this.removeArea(); //清空文字点标记
          if (AreaNode._data.geoData.lngLatSubList) {
            AreaNode._data.geoData.lngLatSubList.forEach(item => {
              this.marker = new AMap.Marker({
                content: `<h1 class ="markerCss">${item.properties.name} </h1>`,
                position: [item.properties.center[0], item.properties.center[1]],
                offset: new AMap.Pixel(0, 0)
              });
              this.markers.push(this.marker);
            });
          }else{
            this.initCity(AreaNode._data.geoData.parent)
          }
    
          this.map.add(this.markers);
        },
        /******清空省市区域坐标**/
        removeArea() {
          this.map.remove(this.markers);
          this.markers = [];
        },
        
    
      },
      mounted() {
        setTimeout(() => {
          this.initMap();
        }, 2000);
      },
      beforeDestroy() {}
    };
    </script>
    <style lang="less">
    #container {
      height: calc(100% - 100px);
      width: 100%;
      background-color: pink;
    }
    .markerCss {
      font-size: 16px;
      font-weight: 700;
      color: #fff;
    }
    </style>
    

    最后:

    有啥看不明白的或者有更好得方法朋友,可以评论留言,欢迎交流

    效果图

    最外层
    在这里插入图片描述
    点击一层
    在这里插入图片描述
    再点击一层
    在这里插入图片描述

    展开全文
  • 参数说明 参数说明示例 coordinates经纬度坐标点数据,coordinates对应的内存会拷贝,调用者负责该内存的释放,最少3个点 countcoordinates对应的个数 customID与围栏关联的自有业务ID 示例代码 NSInteger count = 4;...

    以下内容自 iOS 定位SDK V2.3.0 后支持。

    第 1 步,引入头文件

    在调用地理围栏功能的类中引入AMapFoundationKit.h和AMapLocationKit.h这两个头文件,注意Swift需要在桥接文件中引入头文件:

    #import

    #import

    //在桥接文件中引入头文件

    #import

    #import

    第 2 步,配置Key

    在调用定位时,需要添加Key,需要注意的是请在 SDK 任何类的初始化以及方法调用之前设置正确的 Key。

    如果您使用的是定位SDK v2.x版本需要引入基础 SDK AMapLocationKit.framework ,设置apiKey的方式如下:

    iOS 定位SDK v2.x版本设置 Key:

    [AMapServices sharedServices].apiKey =@"您的key";

    AMapServices.shared().apiKey = "您的key"

    第 3 步:创建地理围栏

    地理围栏没有最大个数限制,您可以无限制的创建围栏。但请您根据业务需求合理的创建围栏,控制围栏个数可以有效的保证程序执行效率。定位 SDK 提供根据高德POI、行政区划,自定义圆形、自定义多边形四种方式创建地理围栏。

    1、初始化地理围栏管理manager

    self.geoFenceManager = [[AMapGeoFenceManager alloc] init];

    self.geoFenceManager.delegate = self;

    self.geoFenceManager.activeAction = AMapGeoFenceActiveActionInside | AMapGeoFenceActiveActionOutside | AMapGeoFenceActiveActionStayed; //设置希望侦测的围栏触发行为,默认是侦测用户进入围栏的行为,即AMapGeoFenceActiveActionInside,这边设置为进入,离开,停留(在围栏内10分钟以上),都触发回调

    self.geoFenceManager.allowsBackgroundLocationUpdates = YES; //允许后台定位

    self.geoFenceManager = AMapGeoFenceManager()

    self.geoFenceManager.delegate = self

    self.geoFenceManager.activeAction = [AMapGeoFenceActiveAction.inside , AMapGeoFenceActiveAction.outside , AMapGeoFenceActiveAction.stayed ]//进入,离开,停留都要进行通知

    self.geoFenceManager.allowsBackgroundLocationUpdates = true //允许后台定位

    2、创建高德POI地理围栏

    提供两个创建高德POI围栏的接口,一个是根据关键字创建POI围栏,另一个是根据经纬度进行周边搜索创建POI围栏。

    根据关键字创建围栏:

    - (void)addKeywordPOIRegionForMonitoringWithKeyword:(NSString *)keyword POIType:(NSString *)type city:(NSString *)city size:(NSInteger)size customID:(NSString *)customID;

    参数说明

    参数说明示例

    keywordPOI关键字北京大学

    typePOI类型高等院校

    cityPOI所在的城市名称北京

    customID与围栏关联的自有业务ID

    示例代码

    [self.geoFenceManager addKeywordPOIRegionForMonitoringWithKeyword:@"北京大学" POIType:@"高等院校" city:@"北京" size:20 customID:@"poi_1"];

    self.geoFenceManager.addKeywordPOIRegionForMonitoring(withKeyword: "北京大学", poiType: "高等院校", city: "北京", size: 20, customID: "poi_1")

    根据周边POI创建围栏:

    - (void)addAroundPOIRegionForMonitoringWithLocationPoint:(CLLocationCoordinate2D)locationPoint aroundRadius:(NSInteger)aroundRadius keyword:(NSString *)keyword POIType:(NSString *)type size:(NSInteger)size customID:(NSString *)customID;

    参数说明

    参数说明示例

    locationPoint周边区域中心点的经纬度,以此中心点建立周边地理围栏(39.908692, 116.397477)

    aroundRadius周边半径,0-50000米,默认为3000米,这个是搜索半径,不是建立的围栏的半径

    keywordPOI关键字肯德基

    typePOI类型050301

    customID与围栏关联的自有业务ID

    示例代码

    CLLocationCoordinate2D coordinate = CLLocationCoordinate2DMake(39.908692, 116.397477); //天安门

    [self.geoFenceManager addAroundPOIRegionForMonitoringWithLocationPoint:coordinate aroundRadius:10000 keyword:@"肯德基" POIType:@"050301" size:20 customID:@"poi_2"];

    let coordinate = CLLocationCoordinate2DMake(39.908692, 116.397477) //天安门

    self.geoFenceManager.addAroundPOIRegionForMonitoring(withLocationPoint: coordinate, aroundRadius: 10000, keyword: "肯德基", poiType: "050301", size: 20, customID: "poi_2")

    3、创建行政区域围栏

    根据行政区域关键字创建行政区域围栏:

    - (void)addDistrictRegionForMonitoringWithDistrictName:(NSString *)districtName customID:(NSString *)customID;

    参数说明

    参数说明示例

    districtName行政区域关键字海淀区

    customID与围栏关联的自有业务ID

    示例代码

    [self.geoFenceManager addDistrictRegionForMonitoringWithDistrictName:@"海淀区" customID:@"district_1"];

    self.geoFenceManager.addDistrictRegionForMonitoring(withDistrictName: "海淀区", customID: "district_1")

    4、创建自定义圆形围栏

    需要提供中心点和半径来创建圆形围栏,一次创建一个

    - (void)addCircleRegionForMonitoringWithCenter:(CLLocationCoordinate2D)center radius:(CLLocationDistance)radius customID:(NSString *)customID;

    参数说明

    参数说明示例

    center围栏中心点的经纬度

    radius要创建的围栏的半径,半径大于0,单位米

    customID与围栏关联的自有业务ID

    示例代码

    CLLocationCoordinate2D coordinate = CLLocationCoordinate2DMake(39.908692, 116.397477); //天安门

    [self.geoFenceManager addCircleRegionForMonitoringWithCenter:coordinate radius:300 customID:@"circle_1"];

    let coordinate = CLLocationCoordinate2DMake(39.908692, 116.397477) //天安门

    self.geoFenceManager.addCircleRegionForMonitoring(withCenter: coordinate, radius: 300, customID: "circle_1")

    5、创建自定义多边形围栏

    根据经纬度坐标数据添加一个闭合的多边形围栏,点与点之间按顺序尾部相连, 第一个点与最后一个点相连,一次创建一个

    - (void)addPolygonRegionForMonitoringWithCoordinates:(CLLocationCoordinate2D *)coordinates count:(NSInteger)count customID:(NSString *)customID;

    参数说明

    参数说明示例

    coordinates经纬度坐标点数据,coordinates对应的内存会拷贝,调用者负责该内存的释放,最少3个点

    countcoordinates对应的个数

    customID与围栏关联的自有业务ID

    示例代码

    NSInteger count = 4;

    CLLocationCoordinate2D *coorArr = malloc(sizeof(CLLocationCoordinate2D) * count);

    coorArr[0] = CLLocationCoordinate2DMake(39.933921, 116.372927); //平安里地铁站

    coorArr[1] = CLLocationCoordinate2DMake(39.907261, 116.376532); //西单地铁站

    coorArr[2] = CLLocationCoordinate2DMake(39.900611, 116.418161); //崇文门地铁站

    coorArr[3] = CLLocationCoordinate2DMake(39.941949, 116.435497); //东直门地铁站

    [self.geoFenceManager addPolygonRegionForMonitoringWithCoordinates:coorArr count:count customID:@"polygon_1"];

    free(coorArr);

    coorArr = NULL;

    var coordinates: [CLLocationCoordinate2D] = [

    CLLocationCoordinate2D(latitude: 39.933921, longitude: 116.372927),

    CLLocationCoordinate2D(latitude: 39.907261, longitude: 116.376532),

    CLLocationCoordinate2D(latitude: 39.900611, longitude: 116.418161),

    CLLocationCoordinate2D(latitude: 39.941949, longitude: 116.435497)]

    self.geoFenceManager.addPolygonRegionForMonitoring(withCoordinates: &coordinates, count: 4, customID: "polygon_1")

    第 4 步,开始定位

    当围栏创建完毕,且围栏创建成功时会启动定位,这部分无需您来设置,SDK内部执行。 定位机制:通过“远离围栏时逐渐降低定位频率”来降低电量消耗,“离近围栏时逐渐提高定位频率”来保证有足够的定位精度从而完成围栏位置检测。

    需要注意,在iOS9及之后版本的系统中,如果您希望程序在后台持续检测围栏触发行为,需要保证manager的allowsBackgroundLocationUpdates为YES,设置为YES的时候必须保证 Background Modes 中的 Location updates 处于选中状态,否则会抛出异常。

    第 5 步,获取围栏创建后的回调和围栏状态改变时的回调

    创建围栏后的信息和围栏状态改变时的信息均会通过AMapGeoFenceManagerDelegate进行回调,设置内容如下:

    self.geoFenceManager.delegate = self;

    self.geoFenceManager.delegate = self

    1、获取围栏创建后的回调

    在如下回调中知道创建的围栏是否成功,以及查看所创建围栏的具体内容。

    - (void)amapGeoFenceManager:(AMapGeoFenceManager *)manager didAddRegionForMonitoringFinished:(NSArray *)regions customID:(NSString *)customID error:(NSError *)error {

    if (error) {

    NSLog(@"创建失败 %@",error);

    } else {

    NSLog(@"创建成功");

    }

    }

    func amapGeoFenceManager(_ manager: AMapGeoFenceManager!, didAddRegionForMonitoringFinished regions: [AMapGeoFenceRegion]!, customID: String!, error: Error!) {

    if let error = error {

    let error = error as NSError

    NSLog("创建失败 %@",error);

    }

    else {

    NSLog("创建成功")

    }

    }

    2、围栏状态改变时的回调

    在如下回调中知道围栏的状态是否发生改变,或者定位是否失败。围栏的状态表示的就是用户和围栏的关系,有未知、进入围栏、退出围栏、在围栏内停留。回调触发的条件需同时满足:1.围栏的状态从A变成B;2.B符合您在第一步设置的需要侦测的行为的范围内。当然如果self.geoFenceManager.activeAction在监听的过程中改变了,所有符合侦测范围的围栏即使状态没有改变也会再次触发回调。

    - (void)amapGeoFenceManager:(AMapGeoFenceManager *)manager didGeoFencesStatusChangedForRegion:(AMapGeoFenceRegion *)region customID:(NSString *)customID error:(NSError *)error {

    if (error) {

    NSLog(@"status changed error %@",error);

    }else{

    NSLog(@"status changed success %@",[region description]);

    }

    }

    func amapGeoFenceManager(_ manager: AMapGeoFenceManager!, didGeoFencesStatusChangedFor region: AMapGeoFenceRegion!, customID: String!, error: Error!) {

    if error == nil {

    print("status changed \(region.description)")

    } else {

    print("status changed error \(error)")

    }

    }

    最后,移除围栏

    当不再需要使用围栏时,可以调用以下几个函数对已经设定的围栏进行移除操作。

    - (void)removeTheGeoFenceRegion:(AMapGeoFenceRegion *)region; //移除指定围栏

    - (void)removeGeoFenceRegionsWithCustomID:(NSString *)customID; //移除指定customID的围栏

    - (void)removeAllGeoFenceRegions; //移除所有围栏

    展开全文
  • 高德地图 鼠标点击后 地图地图标记跟着变化吐槽下,什么鬼标题高德地图marker 类中有方法 setPosition 只要在点击地图的时候 将地图经纬度传递到该方法中即可另外,主要查看官方手册中关于marker类的介绍 ...

    高德地图marker 类中有方法 setPosition 只要在点击地图的时候 将地图经纬度传递到该方法中即可

    另外,主要查看官方手册中关于marker类的介绍 marker介绍

    draggable Boolean 设置点标记是否可拖拽移动,默认为false
    raiseOnDrag Boolean 设置拖拽点标记时是否开启点标记离开地图的效果
    cursor String 指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持
    clickable Boolean 点标记是否可点击

    Html代码:

    <input id="address" id="address">
    <!--keywords用于搜索-->
    <input id="keywords" type="text">
    <div id="map">
    </div>
    <!--隐藏域用于保存当前经纬度-->
    <input type="hidden" id="longitude"/ >
    <input type="hidden" id="latitude"/ >

    JS代码:

    //初始化地图
    function initGDmap(){
              var longitude     =   "121.503396";
              var latitude      =   "31.277239";
              var map = new AMap.Map("map", {
                    resizeEnable: true,
                    zoom: 13,//地图显示的缩放级别
                    center: [longitude, latitude]
                });
                var marker    =   new AMap.Marker({
                    map: map,
                    position: [longitude, latitude]
                });                 
              //为地图注册click事件获取鼠标点击出的经纬度坐标
              var clickEventListener = map.on('click', function(e) {
                    document.getElementById("longitude").value = e.lnglat.getLng(); 
                    document.getElementById("latitude").value = e.lnglat.getLat();
                    lnglatXY = [e.lnglat.getLng(),e.lnglat.getLat()]; //已知点坐标   
                    marker.setPosition(lnglatXY); 
                    regeocoder(lnglatXY);
              });
              AMap.plugin('AMap.Autocomplete',function(){   
              var auto = new AMap.Autocomplete({
                  input: "keywords"
              });
              AMap.event.addListener(auto, "select", select);//注册监听,当选中某条记录时会触发
              function select(e) {
                  if (e.poi && e.poi.location) {
                      map.setZoom(15);
                      map.setCenter(e.poi.location);
                  }
                }
              })    
          }
    
        //逆地理编码
        function regeocoder(lnglatXY) {  
              AMap.plugin('AMap.Geocoder',function(){   
               var geocoder = new AMap.Geocoder({
                    radius: 1000,
                    extensions: "all"
                });        
                geocoder.getAddress(lnglatXY, function(status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                          var address = result.regeocode.formattedAddress; //返回地址描述
                          document.getElementById("address").value = address;
                    }
                });        
                var marker = new AMap.Marker({  //加点
                    map: map,
                    position: lnglatXY
                });
                map.setFitView();
              })    
        }
    展开全文
  • Vue中使用高德地图历史轨迹回放-中途加速不回到开始位置 思路:要想轨迹运动途中点击加速还得不回到原来位置,说明点击加速之后运动轨迹的数组lineArr里面的坐标数量变了=>而且变了之后还得把原来运动过的轨迹画...
  • - (void)createBrokenLine {   CLLocationCoordinate2D commonPolyLineCoords[2];   for (int i = 0; i self.dataParkLaneArr.count; i ++) { // 的信息Model   ParkInfo *parkInfo = self.dataPar
  • 在学习高德地图JS API的过程中,发现高德地图提供的、线等API并不能满足我的需求,还好它开放了自定义图层CustomLayer,官方说自定义图层支持canvas、svg、甚至dom,这里我用的是svg,多说无益,上代码。...
  • 工具: 高德地图API 问题: 移动端设备取后,需要在浏览器做路径回溯和实时监控,现在遇到一种情况,当用户在移动过程中进入了一段无法接受到gps信号或网络信号断开,导致这一段路程无法取到轨迹,如果用表示...
  • 这里面有两个关键是必须要解决的:1、如何实现地点标记在地图上移动进行选点,2、如何实现获取到点标记图标选择的坐标(经纬度)。 三、解决方案 首先来解决第一个问题。在打车软件中我们选择地图中的的...
  • 自定义算法过滤定位,实现高德轨迹纠偏

    万次阅读 多人点赞 2018-04-18 09:27:41
    做户外出行轨迹记录的时候,往往因为基站切换,导致定位偏差过大,于是需要纠偏。
  • 前一段时间我应公司的需求开发了类似链家地图找房的功能,然而我发现现在市面上,对于链家地图找房功能的完整实现相关的文章还是比较稀缺的,亦或是功能还不够完善,出于这个方面,我觉得把自己对于链家地图找房功能...
  • 上面是高德地图高德地图的实现是基于canvas进行实现的,显示效果都在这个画板上显示。接下来我们看一下谷歌地图是怎么实现的? 可以发现谷歌地图是由一张张图片拼接而成的,两者之间谁优谁劣不说,但是实现...
  • leaflet坐标系的设置 提示: 文章目录leaflet坐标系的设置前言一、如何设置leaflet坐标系?扩充:图片的数据叠加坐标系问题二、如何切换leaflet坐标系1.引入库2.读入数据总结 前言 本篇文章主要是leaflet的应用...
  • Vuevue递归组件实现多级列表信息的分类展示列表这次我们主要是实现一个信息的分类展示列表存在二级/三级的分类,如下如所示:看到这个很多人会想到这个实现起来很简单啊,来个嵌套循环不就完事了。对,你说的没...
  • 区域等值面、热力图

    2021-06-30 13:54:11
    热力图绘制方案echarts + canvas高德地图kriging + canvas代码分享 讲讲项目背景,大屏专题图要绘制一个地区区域环境扩散效果,初步一开始感觉是一个热力图,后面经过描述确认不是,而是一个根据点位进行区域绘制的...
  • 其中有个项目叫做文化体验桌,里面有一项是青岛地图的展示,在地图上有几个后台传过来的坐标点,点击坐标点就会显示出详细信息。 如果屏幕前面的你是青岛人或者恰好身处青岛地区 可以去青岛银行看看 里面的文化体验...
  • 网络地图服务面面观

    千次阅读 2019-09-13 19:02:54
    现今网络地图服务已经非常流行,对于经常开发或者使用网络地图服务的人而言,那真是言必称OGC标准、行必用rest地图服务,至于rest服务是啥,OGC标准源起,则毫无知情,能套用就行。 rest网络地图服务源自于rest服务...
  • vue 笔记一

    千次阅读 2019-10-08 17:51:50
    // 带查询参数,变成 /backend/order?selected=2 this.$router.push( { path: '/backend/order', query: { selected : "2" } } ) ; // 命名的路由 --- 路由的名称 router.push( { name: 'user', params: { ...
  • 如果要查看echarts的详细引入步骤,请查看文档《vue中使用echarts(1)》。此处只分享echarts初始化遇到的一些问题和配置项的使用。 在一个页面的两个不同组件都用到echarts时会出现一个问题,第一个echarts可以正常...
  • 数据可视化canvassvg项目矢量图svgCanvas与SVG的主要区别d3zrenderthreeAntvAntv--g2g6L7HighchartsEchart系列组件坐标系样式管理数据维度映射移动端自适应事件和行为拖拽自定义系列v-chartsvue-echarts canvas ...
  • 前端基础必备知识

    2019-06-02 10:58:01
    前端基础必备知识 二、静态页阶段 内容、元素、高度居中 a)块级元素水平使用margin:0 auto; b)内联文本居中在父级使用text-align:center; c)绝对定位居中(子绝父相),居中元素left:50%,margin-left: -元素...
  • HbuilderX 2.6.15 版本说明

    千次阅读 2020-04-25 10:36:13
    HBuilder X - Release Notes =================================...新增 内置web服务器 支持自定义端口 (菜单【设置】【运行配置】) 新增 FTP插件 支持通过commands在【自定义快捷键】中配置快捷键 详情 新增 项目...
  • 前段时间公司打算做一款基于线下服务的小程序,涉及到扫码支付,地图,充值,会员体系等功能。由于公司暂时没有新招小程序开发人员,而我之前又有过开发小程序的经验。所以,这个小程序开发自然而然也就交给我来做了...
  • Hbuilder 历次版本更新记录

    万次阅读 2016-11-18 09:41:22
    HBuilder - Release Notes 7.6.0.201611071800 IDE ...【重要】Mac版HBuilder支持iOS10真机运行,解决32位Windows系统下iOS真机...添加px转rem的提示功能,可在工具>>选项或右键项目>>属性下的代码助手设置中配置。
  • 这里就举一个高德地图的栗子,来看看 Forest 是如何优雅的声明 HTTP 请求接口的: /** * 高德地图服务客户端接口 */ @BaseRequest(baseURL = "http://ditu.amap.com") public interface Amap { /** * 根据经纬度...
  • 转自 静心梦工厂

    千次阅读 2018-05-08 10:47:35
    将Comment中的字符COPY至Name中 时,表名也会变成中文名,如果要保持表名为英文名则需要 删去  tab.name = tab.comment 以及  view.name = view.comment 这两行代码。 作者:andyliulin 发表于 2018/01/25 12:...
  • 这里就举一个高德地图的栗子,来看看 Forest 是如何优雅的声明 HTTP 请求接口的: /** * 高德地图服务客户端接口 */ @BaseRequest(baseURL = "http://ditu.amap.com") public interface Amap { /** * 根据经纬度...
  • HubilderX更新记录

    千次阅读 2021-12-20 09:53:54
    iOS平台 修复 视频播放控件 VideoPlayer 设置 poster 后播放按钮封面消失后播放器可能出现黑屏的Bug 详情 iOS平台 修复 显示模态弹窗如 actionSheet 引起系统状态栏文字颜色会自动变成黑色的Bug 详情 iOS平台 修复...
  • uniapp + HbuliderX更新日志

    千次阅读 2021-09-07 13:55:54
    action 修复 跨页面修改组件数据 ,导致不能滑动的问题 hello-uniapp 新增 同时适配 vue2 和 vue3(HBuilder X 3.2.0+ 支持 vue3) uniCloud admin 新增 同时适配 vue2 和 vue3(HBuilder X 3.2.0+ 支持 vue3) ...

空空如也

空空如也

1 2
收藏数 29
精华内容 11
关键字:

vue高德地图如何设置地图中心变成坐标点

vue 订阅
友情链接: Mysql练习攻略.zip