精华内容
下载资源
问答
  • 2021-06-27 02:44:43

    直接代码吧:

    自定义地图

    html,body,#container{height:100%;width:100%;font-size:14px;font-family:"Chinese Quote",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}

    .content-window-card{position:relative;box-shadow:none;bottom:0;left:0;width:auto;padding:0;border-radius:5px;overflow:hidden;}

    .info-top{padding:10px 15px;position:relative;background:#fff;border-bottom:1px solid #ebebeb;}

    .closeX{position:absolute;right:10px;top:2px;font-size:22px;cursor:pointer}

    .info-middle{padding:15px 15px;border-radius:0 0 5px 5px;}

    .info-bottom{height:12px;position:relative}

    .sharp{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid #fff;position:absolute;left:50%;top:0;transform:translate(-50%,0)}

    var map = new AMap.Map('container', {

    resizeEnable: true,

    zoom: 5,

    center: [114.047614, 22.600735],

    mapStyle: 'amap://styles/ac617ee5ac942dc438bc8ae1b99b7939',

    viewMode: '3D', //开启3D视图,默认为关闭

    buildingAnimation: true, //楼块出现是否带动画

    //前往创建自定义地图样式:https://lbs.amap.com/dev/mapstyle/index

    });

    var capitals = [{

    adcode: "",

    center: [114.063185, 22.60495],

    citycode: "1853",

    name: "星河word",

    text: '这是星河word小区',

    content: "

    星河word
    "

    }, {

    adcode: "",

    center: [114.384129, 30.508543],

    citycode: "3803",

    name: "保利华都",

    text: '这是保利华都小区',

    content: "

    保利华都
    "

    }]

    //实例化信息窗体

    var title = '提示';

    var infoWindowArr = [],

    facilities = [];

    for (var i = 0; i < capitals.length; i++) {

    var marker = new AMap.Marker({

    position: new AMap.LngLat(capitals[i].center[0], capitals[i].center[1]),

    offset: new AMap.Pixel(-10, -10),

    icon: 'http://vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL

    title: capitals[i].name,

    });

    facilities.push(marker);

    var infoWindow = new AMap.InfoWindow({

    isCustom: true, //使用自定义窗体

    content: createInfoWindow(title, capitals[i].content),

    offset: new AMap.Pixel(0, -20)

    });

    infoWindowArr.push(infoWindow);

    }

    map.add(facilities);

    for (var i = 0; i < facilities.length; i++) {

    (function(i) {

    facilities[i].on('click', function(event) {

    infoWindowArr[i].open(map, event.target.getPosition());

    });

    })(i)

    }

    //构建自定义信息窗体

    function createInfoWindow(title, content) {

    var info = document.createElement("div");

    info.className = "custom-info input-card content-window-card";

    //可以通过下面的方式修改自定义窗体的宽高

    info.style.width = "300px";

    // 定义顶部标题

    var top = document.createElement("div");

    var titleD = document.createElement("div");

    var closeX = document.createElement("span");

    top.className = "info-top";

    titleD.innerHTML = title;

    closeX.innerHTML = "×";

    closeX.className = "closeX";

    closeX.onclick = closeInfoWindow;

    top.appendChild(titleD);

    top.appendChild(closeX);

    info.appendChild(top);

    // 定义中部内容

    var middle = document.createElement("div");

    middle.className = "info-middle";

    middle.style.backgroundColor = 'white';

    middle.innerHTML = content;

    info.appendChild(middle);

    // 定义底部内容

    var bottom = document.createElement("div");

    bottom.className = "info-bottom";

    var sharp = document.createElement("span");

    sharp.className = "sharp";

    bottom.appendChild(sharp);

    info.appendChild(bottom);

    return info;

    }

    //关闭信息窗体

    function closeInfoWindow() {

    map.clearInfoWindow();

    }

    更多相关内容
  • vue 集成高德地图进行批量标注和信息窗体展示  高德地图进行地理位置的标注和信息窗体展示是我们很常用的一个功能,其实高德api里面已经清楚的说明怎么用了,但是自己总结一下记录在自己的笔记里,也是有些许好处...

                                        vue 集成高德地图进行批量标注和信息窗体展示

              高德地图进行地理位置的标注和信息窗体展示是我们很常用的一个功能,其实高德api里面已经清楚的说明怎么用了,但是自己总结一下记录在自己的笔记里,也是有些许好处的。高德api 样列展示地址是:https://lbs.amap.com/api/javascript-api/example/infowindow/add-infowindows-to-multiple-markers,以及点击窗体监听事件https://lbs.amap.com/api/amap-ui/demos/amap-ui-simpleinfowindow/events,两个样列基本就实现了我们的功能,可以点击参考。

    首先我们看一下所运行的效果如图所示:(图片稍后补上,因为现在接口地址已经变动,暂未部署服务器)

    其次我们看一下实现思路:

    一、vue引入原生高德地图

    1、index.html里面加入,高德js一定要放在头部而不是尾部,否则就会报 “AMap is not defined”

    <!-- 高德地图 -->
    
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=26bf121b06524b0657b09gkjklgjkeeb3990c"></script>
    
    <script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

    2、build 的webpack.base.conf.js文件里面加入

    externals: {
        AMap: 'AMap',
        AMapUI: 'AMapUI'
      }

    3、引用高德地图界面加入以下内容即可以使用地图

    import AMap from 'AMap'
    import AMapUI from 'AMapUI'

    二、高德地图界面vue代码参考,主要看getToliteList()这个方法里面的实现

    <template>
      <div class="scenicTolietWrapper">
        <v-header :title="title">
        </v-header>
        <div id="container" :style="{height: heightTemp + 'px', width: widthTemp + 'px'}"></div>
        <div class="guideWrapper" style="display: flex; justify-content: space-between;">
          <div></div>
          <div><i class="icon iconfont icon-daohang"/></div>
        </div>
        <actionsheet v-model="showMap" :menus="menusMap" :show-cancel="true" @on-click-menu="clickMapMenu"></actionsheet>
        <div class="alertWrapper">
                <div>
                  <confirm v-model="showGaoDei"
                  title="操作提示"
                  @on-cancel="onCancelGaoDei"
                  @on-confirm="onConfirmGaoDei">
                      <p style="text-align:center;">您尚未安装常用地图,小嗨为您推荐安装高德地图</p>
                  </confirm>
                </div>
            </div>
      </div>
    </template>
    <script>
    import VHeader from '@/components/v-header/v-header'
    import AMap from 'AMap'
    import AMapUI from 'AMapUI'
    import { isIphoneX, isAndroid, isIOS } from '@/assets/js/brower'
    import { Actionsheet, Confirm } from 'vux'
    import axios from '@/api/axiosApi'
    var map
    
    export default {
      data () {
        return {
          title: '旅游厕所',
          heightTemp: 500,
          widthTemp: 1000,
          tolietList: [],
          // 跳转地图
          showMap: false,
          menusMap: {},
          showGaoDei: false,
          showCancel: true,
          latitude: '',
          longitude: '',
          address: ''
        }
      },
      directives: {
      },
      components: {
        VHeader,
        AMap,
        AMapUI,
        Actionsheet,
        Confirm
      },
      computed: {
      },
      mounted() {
        if (isIphoneX()) {
          this.heightTemp = window.innerHeight - 73
        } else {
          this.heightTemp = window.innerHeight - 63
        }
        this.widthTemp = window.innerWidth
        this.init()
      },
      created() {
      },
      methods: {
        // 获取厕所数据
        getToliteList () {
          axios.get(this, '/v1/toiletInfo/getToiletInfo?pageNum=1&pageSize=50', null, (data) => {
            this.tolietList = data
            let _self = this
            // 地图初始化
            map = new AMap.Map('container', {
              resizeEnable: true,
              zoom: 10
            })
            AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
              map.addControl(new AMap.ToolBar())
              map.addControl(new AMap.Scale())
            })
            // 覆盖默认的dom结构
            AMapUI.loadUI(['overlay/SimpleInfoWindow'], function(SimpleInfoWindow) {
              var marker
              // 循环进行图标标注marker
              _self.tolietList.forEach(element => {
                marker = new AMap.Marker({
                  map: map,
                  zIndex: 9999999,
                  position: [element.longitude, element.latitude]
                })
                // 自定义弹出信息窗体样式和数据绑定
                var infoWindow = new SimpleInfoWindow({
                  infoTitle: '<strong style="font-size: 15px">' + element.name + '</strong>',
                  infoBody: ['<div class="guideWrapper" style="display: flex; justify-content: space-between;">',
                    '<div style="font-size: 14px">' + element.address + '</div>&nbsp;',
                    '<div><i class="icon iconfont icon-daohang"/></div>',
                    '</div>'].join(''),
                  // 基点指向marker的头部位置(信息窗体的具体位置)
                  offset: new AMap.Pixel(0, -31)
                })
                // maker标注点击事件后弹信息窗体
                marker.on('click', openInfoWin)
                // 点击弹出信息窗体上面的导航图标事件
                infoWindow.get$Container().on('click', '.icon-daohang', function(event) {
                  event.stopPropagation()
                  _self.toNativeMap(element.latitude, element.longitude, element.address)
                })
                function openInfoWin(e) {
                  infoWindow.open(map, e.target.getPosition())
                }
              })
            })
          })
        },
        init () {
          const _self = this
          _self.getToliteList()
        },
        // 跳转导航
        toNativeMap (latitude, longitude, address) {
          if (isIOS()) {
            window.webkit.messageHandlers.NativeMethod.postMessage({'methodName': 'openMapNavi', 'latitude': latitude, 'longitude': longitude})
          } else {
            // android
            this.menusMap = JSON.parse(window.android.isInstallByread())
            if (this.menusMap == null || Object.getOwnPropertyNames(this.menusMap).length === 1) {
              this.showCancel = false
              this.showGaoDei = true
              return
            }
            if (this.menusMap.baiDu === '2') {
              this.menusMap.baiDu = '百度地图'
            }
            if (this.menusMap.gaoDei === '1') {
              this.menusMap.gaoDei = '高德地图'
            }
            if (this.menusMap.tenXun === '3') {
              this.menusMap.tenXun = '腾讯地图'
            }
            this.showMap = true
            this.latitude = latitude
            this.longitude = longitude
            this.address = address
          }
        },
        clickMapMenu (value) {
          if (isAndroid()) {
            if (value === 'baiDu') {
              window.android.makeUpMap(this.latitude, this.longitude, this.address, '', 2, 1, '')
            } else if (value === 'gaoDei') {
              window.android.makeUpMap(this.latitude, this.longitude, this.address, '', 1, 1, '')
            } else if (value === 'tenXun') {
              window.android.makeUpMap(this.latitude, this.longitude, this.address, '', 3, 1, '')
            }
          }
        },
        // 确认弹框友好提示
        onCancelGaoDei () {
        },
        onConfirmGaoDei () {
          window.android.makeUpMap(this.latitude, this.longitude, this.address, 0, 1, '')
        }
      }
    }
    </script>
    
    <style lang="stylus" scoped>
    @import '~@/assets/css/variable.styl'
    @import '~@/assets/css/mixins.styl'
    .scenicTolietWrapper {
        #container {
            width: 500px;
            height: 800px;
        }
        .guideWrapper {
          display flex
          justify-content space-between
        }
    }
    </style>
    

    查看getToliteList()该方法即可知道怎么实现。

    展开全文
  • C#调用高德地图api解析经纬度源码 源码描述: 一、源码特点 1、调用高德地图开放接口实现将经纬度解析成中文位置.有需要的欢迎下载 二、注意事项 1、开发环境为Visual Studio 2010,使用.net 4.0开发
  • 所以高德就比较方便了。只需引用下面的几句 定位 地图 导航 全都ok!compile 'com.amap.api:3dmap:5.6.0'compile 'com.amap.api:location:3.7.0'compile 'com.amap.api:search:5.5.0'然后设置an...

    本人也有做过百度地图的marker,但是百度地图的引用实在很麻烦,各种导包,so,jar,还有配置。所以高德就比较方便了。

    只需引用下面的几句  定位  地图 导航  全都ok!

    compile 'com.amap.api:3dmap:5.6.0'compile 'com.amap.api:location:3.7.0'compile 'com.amap.api:search:5.5.0'

    然后设置

    android:name="com.amap.api.v2.apikey"android:value="官网申请的value"/>

    首先我们得写一个mapView和Amap

    privateMapView mapView;privateAMap aMap;

    然后对地图进行设置

    aMap= mapView.getMap();MyLocationStyle myLocationStyle = newMyLocationStyle();myLocationStyle.strokeColor(Color.TRANSPARENT);// 设置圆形的边框颜色myLocationStyle.radiusFillColor(Color.argb(0,0,0,0));// 设置圆形的填充颜色myLocationStyle.strokeWidth(1.0f);// 设置圆形的边框粗细aMap.setMyLocationStyle(myLocationStyle);aMap.getUiSettings().setMyLocationButtonEnabled(true);aMap.moveCamera(CameraUpdateFactory.newLatLngZoom(HEXIN,4));aMap.setMapType(MAP_TYPE_NORMAL);

    从服务器拿到的肯定是一组数据,我们把它转化为一个实体类的集合

    Listlist=new ArrayList;

    接下来我们就在地图上marker了

    for(inti = 0;i < list.size();i++) {

    MarkerOptions markerOption = newMarkerOptions();markerOption.position(newLatLng(Double.parseDouble(list.get(i).getLat()),

    Double.parseDouble(list.get(i).getLng())));

    markerOption.draggable(false);//设置Marker可拖动

    markerOption.title(String.valueOf(i));markerOption.icon(BitmapDescriptorFactory.fromView(getMyView(list.get(i).getTitle )));aMap.addMarker(markerOption);}

    注意我的代码,我设置了一个markerOption.title(String.valueOf(i));其实是给每个marker一个标识点,到时候,你点击marker就知道是哪个marker了。里面的 return true 的意思是点击marker,marker不成为地图的中心坐标,反之,成为中心坐标。

    aMap.setOnMarkerClickListener(newAMap.OnMarkerClickListener() {@Overridepublic booleanonMarkerClick(Marker marker) {

    String id=marker.getTitle();

    MarkerListEntity listEntity=list.get(Integer.valueOf(id));//拿到这个实体类了 就可以做操作了

    return true;}

    });

    在marker点的时候我们需要自定义marker点,有时候可以通过一个布局来动态设置,我把getMyView代码也给贴出来吧,

    我这里的布局仅仅是一个TextView,你可以根据不同的需求设置不同的自定义marker图标.

    markerOption.icon(BitmapDescriptorFactory.fromView(getMyView(mFootPrintEntityList.get(i).getTitle )));

    protectedView getMyView(String pm_val) {

    View view = getActivity().getLayoutInflater().inflate(R.layout.mymarker, null);TextView tv_val = (TextView) view.findViewById(R.id.marker_tv_val);tv_val.setText(pm_val);returnview;}

    感谢大家的支持,接下来是效果图了,有兴趣加我QQ(971873592),一起学习。

    9ecc97a88e65a83ff50c2f4148f0cbd6.png

    展开全文
  • 由于数据量大,如果一个一个添加marker会造成页面卡顿,所以在此就使用了批量标记,特此研究出一下几种方法 在高德平台获取key高德开放平台 | 高德地图API 二、批量添加marker标记 1、海量点标记 MassMarks ...

    一、前言

              由于数据量大,如果一个一个添加marker会造成页面卡顿,所以在此就使用了批量标记,特此研究出一下几种方法  在高德平台获取key 高德开放平台 | 高德地图API

    二、批量添加marker标记

            1、海量点标记  MassMarks

                    优点:当需要在地图展示数量为十万以内的点并且需要较好的性能表现时

                    缺点:只能使用图片标点,不能自定义标点

            用法:

    var styleObject = { // 样式
        url: '//vdata.amap.com/icons/b18/1/2.png',  // 图标地址
        size: new AMap.Size(11,11),      // 图标大小
        anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量,基准点为图标左上角
    } 
    var styleObject2 = { // 样式
        url: '//vdata.amap.com/icons/b18/1/1.png',  // 图标地址
        size: new AMap.Size(11,11),      // 图标大小
        anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量,基准点为图标左上角
    } 
    
    // 样式对象数组
    var styleObjectArr = [ styleObject, styleObject2];
    
    // 实例化 AMap.MassMarks
    var massMarks = new AMap.MassMarks({
      zIndex: 5, 	// 海量点图层叠加的顺序
      zooms: [3, 19],	 // 在指定地图缩放级别范围内展示海量点图层
      style: styleObjectArr 	//多种样式对象的数组
    });
    
    // 设置了样式索引的点标记数组
    var data = [{
      lnglat: [116.405285, 39.904989],
      name: 'beijing',
      id:1,
      style: 0  // 该数据的样式取值styleObjectArr对应的样式索引
    },{
      lnglat: [116.405285, 39.904989],
      name: 'beijing',
      id:1,
      style: 1
    } //, …,{}, …
    ];
    
    // 将数组设置到 massMarks 图层
    massMarks.setData(data);
    
    // 将 massMarks 添加到地图实例
    massMarks.setMap(map);

    具体可看官方用例:加载海量点-点标记-示例中心-JS API 示例 | 高德地图API

            2、点聚合 MarkerClusterer

                       优点:在不同的地图缩放级别对海量的数据点进行聚合展示,可以通过renderClusterMarker自定义marker样式

                       由于本数据不需要聚合显示,而且还需要指定一marker样式内容,所以具体用法请看官方示例:点聚合-点标记-示例中心-JS API 示例 | 高德地图API

            3、map.add(markers)

                        优点:可以批量添加marker,并且可以自定义marker样式,刚好满足本人需求😀

                         用法:

        
     addCluster(arr) { // 当获取到后台数据时 把参数传到该方法 arr 内容必须包含 lon 与 lat
          this.map.remove(this.markers) // 清除所有的marker标记
          this.markers = [] // 清空
          // 添加marker标记
          arr.forEach(item => {
            this.markers.push(this.getGraphicMarker(item))
          })
          this.map.add(this.markers) // 动态添加数据
     },
     getGraphicMarker(item) {
          // 指定单个marker 标记的内容
          let markerContent = '<div>自定义内容</div>' // 自定义marker样式及内容
    
          let marker = new AMap.Marker({
            position: new AMap.LngLat(item.lon, item.lat),
            content: markerContent, // 添加自定义内容
            // icon: require('../../assets/houseIcon.png'), // 也可以添加图片
            offset: new AMap.Pixel(-12, -10)
          })
          marker.on('click', e => { // 添加点击事件
            this.addMarkerTip(item, e)
          })
          return marker
      },
    
    

    注意:如果在css中设置自定义内容的div样式 请使用 /deep/ 穿刺,否则无效

    效果图

    三、InfoWindow提示框

            结合这上个代码片段,为每个marker添加点击事件中的addMarkerTip方法,直接上代码展示

     addMarkerTip(item) { // item 为当前点击的内容
          // 添加点击marker时的提示
          if (this.markerTip) {
            this.markerTip.close()  // 关闭提示
          }
          let markerTipContent = "<div id='btn'>自定义内容</div>" // 自定义提示框内容
          this.markerTip = new AMap.InfoWindow({ // 提示插件
            position: new AMap.LngLat(item.lon, item.lat), // 经纬度
            content: markerTipContent,
            offset: new AMap.Pixel(2, -6) // 便宜位置
          })
          this.markerTip.open(this.map)
           // 为markerTipContent中的元素绑定事件
          setTimeout(() => {
            // 为了获取到 动态添加的元素 用延迟来获取 动态绑定事件
            document.querySelector('#btn').addEventListener('click', () => {
              // 添加详情事件
              consloe.log(item)
            })
          }, 100)
        },

    四、清除左下角的高德地图的logo

            1、实在本组件中动态添加script标签映入地图,就在本组件中使用/deep/穿刺添加如下样式

    ::v-deep .amap-logo {
      display: none;
      opacity: 0 !important;
    }
    ::v-deep .amap-copyright {
      opacity: 0;
    }

         2、如果是在html页面中引入的地图,就直接在html中的style标签中添加

    .amap-logo {
      display: none;
      opacity: 0 !important;
    }
    .amap-copyright {
      opacity: 0;
    }

    五、动态添加清除地图图层

            本文已卫星图层为例

    satellite = new AMap.TileLayer.Satellite() // 实例化得到卫星图层
    satellite.setMap(map) // 动态添加到地图中
    satellite.setMap(null) // 删除该图层

    结语:

            欢迎大家与小编一起多多探讨,共同进步噢😊

    展开全文
  • 直接上代码!!! <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;...地图经纬度描点工具</title> <!-- <script type="tex...
  • 一、设置初始值,绘制矢量图形 二、绘制路径 三、批量标记点 四、路线设置 五、打开信息窗体
  • 使用python语句,通过百度地图API,对已知的地名抓取经纬度 使用百度地图API官网的html例程,修改数据部分,实现呈现效果 一、使用python语句,通过百度地图API,获取经纬度读取文件信息 import pandas as pd data ...
  • 2、选中复选框, 在地图上简标注marker, 取消选中复选框和不选中复选框, 则地图上没有标注对应地名的marker。3、不使用坐标, 而是使用的地名, 比如说通过"银河SOHO"字符串, 转化出坐标, 然后在地图标注...
  • 高德地图的应用中,地图上展示我们自己自定义覆盖物是很常见的应用,前提是需要覆盖物相应的定位点以及图标即可,但矢量图形不能直接展示图标,可以在信息框中展示;这里我就弄一个标记点的初始化,并且添加上信息...
  • 地图标注工具

    2017-02-12 23:09:27
    在谷歌地图,百度地图,高德地图上面标注信息
  • 我们想要在地图批量标注某一类的大量点位,该怎么操作呢?没有它的坐标数据,就没有办法批量标注。今天给大家介绍下,来自图新地球用户王泽的原创教程——利用Python获取数据,并在地图批量标注的方法! 以...
  • 移动互联网的发展让我们越来越离不开智能手机,尤其是在出行方面,现在大多数车主驾车出行时都习惯使用手机导航软件来指路导航,手机地图已经成为了人们日常出行和生活中越来越重要的应用,也日益成为了连接消费者与...
  • 官方示例中setFitView()对AMap.Marker可以生效,但对海量点标记 AMap.MassMarks 似乎无效 ... 中引入高德地图 import AMap from 'AMap' var map // 页面上 <div id="my-aMap" style="width: 500px;he
  • vue + 高德地图 + 标记点

    千次阅读 2022-04-08 14:07:49
    高德地图引入及使用 可参考:vue + 高德地图 + 图例 增加标记点: // 绘制地图 this.map = new AMap.Map('map', { resizeEnable: true, center: [120, 35], // 经纬度 zoom: 12 // 远近 }) // 绘制标记点点 ...
  • 在实现JavaScript与Android交互的基础上,增加fragment与ViewPager,将高德地图组件的位置标注、路线规划、周边搜索、选址组件全部实现在AndroidAPP的应用!
  • 1.marker标记,Text多点文本标记,标记信息窗体 效果: 代码: <...-- vue引入高德地图实现多点标记,点击标记点出现信息窗体 --> <link rel="stylesheet" href="https://cache.amap.com/lbs/
  • 高德地图 批量获取坐标 转载于:https://www.cnblogs.com/stillstep/p/11199111.html
  • vue+高德地图实现点击地图添加多个点标记 点击标记出现弹窗 点击标点显示对应弹框 进行修改名称 效果图: 1.首先是新增我这里点击绘制新的燃气管道 data() { return { map: null,//地图 markers: [], ...
  • 高德地图-删除多个点标记

    千次阅读 2017-02-23 17:55:06
     高德地图上有自己创建的marker,单击删除按钮,可以删除多个标记 2、实现源码 [html] view plain copy  print? >  html>   head>   meta charset="UTF-8">   meta http-equiv="X-
  • 1.高德地图引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key="您的key"&plugin=AMap.Geocoder"> </script> 2.根据地名获取经纬度(批量获取) var ...
  • 根据地名实现地图标记定位,主要依赖高德地图的:地理编码与逆地理编码。下面来看具体的实现代码:1. HTML (地图容器)2. JAVASCRIPTfunction markLocation(mapId, address) {AMap.plugin('AMap.Geocoder', function...
  • 高德地图POI数据下载工具是一款能够让用户在不写代码的前提下实现高德地图POI数据批量下载的工具软件。
  • 高德 JS api 总结简介此次是对最近使用高德地图的JS api做一个总结,关于各个类可以实现什么效果,以及如何使用。之后会总结一些常见问题的优化思路和解决办法。Vue 中引入高德地图 apinpm 包引入npm i amap-js -S...
  • 摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧。在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊。聚合marker里面还有...
  • 地图批量标注功能原来使用sqlite数据库的一个支持文件,由于不同操作系统有时候不兼容、出错,现更换为Firebird数据库支撑。标注功能目前仅支持高德地图。近期修改程序将支持其他地图类型。 Firebird3数据库下载...
  • 基于高德地图开发 Web 应用

    千次阅读 2021-08-17 19:38:51
    对比腾讯、百度、OpenLayersOpenLayers腾讯地图百度地图高德地图基本的开发步骤,开始实现自己的地图应用快速掌握 API 模块、架构、知识点思维导图使用高德地图实现常见的地图效果使用一个 URL,自动调取地图导航...
  • 高德地图加载海量点

    万次阅读 2017-01-20 19:25:02
    高德地图 海量麻点标注
  • 高德地图开放平台的使用
  • 坐标转换是一类简单的HTTP接口,能够将用户输入的非高德坐标(GPS坐标、mapbar坐标、baidu坐标)转换成高德坐标。 JS函数封装 /* * coordsys,原坐标系,可选值:gps;mapbar;baidu;autonavi(不进行转换) * */ ...

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 366
精华内容 146
关键字:

高德地图批量标注地点