精华内容
下载资源
问答
  • HTML高德地图标点

    2020-01-06 14:00:45
    代码内容 输入: 一堆经纬度坐标,例如: [[104.104527, 30.659551], [104.084189, ...在地图上标出这些经纬度坐标 代码: 输入在46行 <!DOCTYPE html> <html> <head> <meta charset="utf-8"...

    代码内容

    输入:

    一堆经纬度坐标,例如:
    [[104.104527, 30.659551], [104.084189, 30.663919], [104.079991, 30.678775]]

    输出:

    在地图上标出这些经纬度坐标

    代码:

    输入在46行

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
      <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
      <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
      <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=a2240106a62525c7221253bb7a180f65"></script>
      <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <style type="text/css">
      #container {
        height: 800px;
        width: 100%;
      }
    
      .amap-icon img{
        width: 25px;
        height: 34px;
      }
    </style>
    
    <body>
      <div >
        <div data-role="page" id="mainpage" class="ui-content">
        <div data-role="header">
          <div data-role="navbar">
          </div>
        </div>
          <div id="container"></div>
    
     </div> 
      </div>
    
      <script type="text/javascript">
        //加载地图
        var map = new AMap.Map('container', {
            resizeEnable: true, //是否监控地图容器尺寸变化
            zoom:11, //初始化地图层级
        });
    
        //坐标数组 
        //var path = [[104.104527, 30.659551], [104.086479187012, 30.6557445526123], [104.110291, 30.71844], [104.080457, 30.668807], [104.080457, 30.668807], [104.090585, 30.671722], [104.08572252856, 30.662840563632], [104.08572252856, 30.662840563632], [104.076434, 30.67328], [104.081108, 30.66643], [104.09315694081, 30.670072326943], [104.088012, 30.657429], [104.075574, 30.672195], [104.113449, 30.641524], [104.092319, 30.655403], [104.092319, 30.655403], [104.088151, 30.655153], [104.08581, 30.658125], [104.08581, 30.658125], [104.085815, 30.662834], [104.083815565742, 30.6627484299404], [104.083815565742, 30.6627484299404]];
        var path = [[104.104527, 30.659551], [104.084189, 30.663919], [104.079991, 30.678775], [104.078404, 30.656772], [104.089517, 30.668019], [104.078018, 30.654471], [104.085704, 30.664888], [104.078018, 30.654471], [104.07990255983, 30.663601659943], [104.117503, 30.676797], [104.102088, 30.656456], [104.102088, 30.656456], [104.081108, 30.66643], [104.0721, 30.61139], [104.090191, 30.65433], [104.11801, 30.643378], [104.080754, 30.668583], [104.066259, 30.682756]]
    
        var polyline = new AMap.Polyline({
            path: path,
            isOutline: true,
            outlineColor: '#ffeeff',
            borderWeight: 3,
            strokeColor: "#FF3000", 
            strokeOpacity: 1,
            strokeWeight: 6,
            strokeStyle: "solid",
            strokeDasharray: [10, 5],
            lineJoin: 'round',
            lineCap: 'round',
            zIndex: 50,
        })
    
        polyline.setMap(map)
        // 缩放地图到合适的视野级别
        map.setFitView([ polyline ])
    
    
       //绘制坐标点    
       AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
            for (var i = 0, len = path.length; i < len; i++) {
            new SimpleMarker({
            //前景文字
            iconLabel: {
                    innerHTML: i+1,
                    style: {
                      color: '#fff',
                      fontSize: '120%',
                      marginTop: '2px'
                    }
                  },
            //图标主题
            iconTheme: 'default',
            //背景图标样式
            iconStyle: 'green',
            map: map,
            position: path[i]
            });
          }
      });
    
       
        
          
    
    </script>
    
    </body>
    
    </html>
    
    展开全文
  • 有的电脑正常 有的电脑显示不了 显示不了的报这个错 <p style="text-align:center"><img alt="" src="https://img-ask.csdnimg.cn/upload/1614161367017.jpg" /></p>  </p>
  • 这是效果图,点一个点就会在input框刷新一次,首先当然需要给地图添加点击事件了 mapClick(e) { // 地图点击事件 if (this.map !== undefined) { if (this.projectMapMarker !== undefined) { // 如果点标记已...

    之前我教了大家用element文当中的远程搜索进行搜索地点

    element远程搜索
    在这里插入图片描述
    这是效果图,点一个点就会在input框刷新一次,首先当然需要给地图添加点击事件了

    mapClick(e) {
          // 地图点击事件
          if (this.map !== undefined) {
            if (this.projectMapMarker !== undefined) {
              // 如果点标记已存在则先移除原点
              this.map.remove(this.projectMapMarker);
              this.projectInput.lonLat = ''
              this.projectInput.position = ''
            }
            // 定义点标记对象
            this.projectMapMarker =  new AMap.Marker({
              position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat)
            })
            this.projectInput.lonLat = e.lnglat.lng+','+e.lnglat.lat
            // 添加点标记在地图上
            this.map.add(this.projectMapMarker)
            // 逆地址解析
            axios.get('/maprestapi/v3/geocode/regeo', {
              params: {
                key: '6bfac3160868f2eacbde16c6f99f6522',
                location: this.projectInput.lonLat
              }
            }).then(res => {
              if (res.status === 200) {
                //将res.data......赋值给this.projectInput.position
                this.projectInput.position = res.data.regeocode.formatted_address
                this.$emit('clickMap',this.projectInput)
              }
              // const dataPosition = Object.assign(this.projectInput.position,this.projectInput.lonLat)
            })
          }
        },
    

    在这里插入图片描述
    在地图初始化的时候给它设置一个点击事件
    远程搜索代码:
    这里涉及到一个this的指向问题,我可以给大家解释一下,看这个方法中的this可以打印出来试一下,
    这个this.tips是打印出来的undefined,原因就是this的指向不明,解决的办法可以是that=this,也可以用箭头函数,这里我用的是that

    //远程搜索
        remoteMethod(query) {
          if (query !== '') {
            this.loading = true;
            //this指代的是这整个map所以需要解决指代不明的问题
            console.log(window)
            console.log(this)
            const that = this
            AMap.plugin('AMap.Autocomplete', function(){
              // 实例化Autocomplete
              const autoOptions = {
                city: '长沙'
              }
              const autoComplete = new AMap.Autocomplete(autoOptions);
              autoComplete.search(query, function(status, result) {
                // 搜索成功时,result即是对应的匹配数据
                that.tips = result.tips || []
                that.loading = false;
              })
            })
          } else {
            this.tips = [];
          }
        }
    

    在这里插入图片描述
    然后再上一个远程搜索的时候,返回对应的匹配数据,并且进行切换地图
    这里的方法是绑定在这个下拉框上,这个value打印出来的是一串字母,input框输入值得一个唯一标识
    在这里插入图片描述

    所以可以判断value=tip.id的时候对地图进行切换

    tipChange(value) {
          //打印出来搜索的十条数据并且定位跳转到搜索的地点
          for (const tip of this.tips) {
            if (value === tip.id) {
              this.map.setZoom(18)
              this.map.setCenter(tip.location)
              break
            }
          }
        },
    

    这样就可以达到一个效果

    展开全文
  • &lt;%@ page contentType="text/html;charset=UTF-8" %&gt; &lt;%@ include file="/webpage/include/taglib.jsp" %&...地图&lt;/title&gt; &lt;meta
    <%@ page contentType="text/html;charset=UTF-8" %>
    <%@ include file="/webpage/include/taglib.jsp" %>
    <html>
    <head>
        <title>地图</title>
        <meta name="decorator" content="ani"/>
    </head>
    <body class="bg-white">
    <form:form id="inputForm" modelAttribute="eddChargeStation" class="form-horizontal">
        <form:hidden path="id"/>
        <table class="table table-bordered">
            <tbody>
            <tr>
                <td class="width-15 active"><label class="pull-right">地图:</label></td>
                <td class="width-35">
                        <%--	<form:input path="address" htmlEscape="false"    class="form-control "/>--%>
                    <div id="addr" style="height: 200px;width: 100%"></div>
                </td>
                <td class="width-15 active"><label class="pull-right">地址:</label></td>
                <td class="width-35">
                    <form:input path="address" htmlEscape="false" class="form-control " id="address"/>
                </td>
            </tr>
            <tr>
                <td class="width-15 active"><label class="pull-right">纬度:</label></td>
                <td class="width-35">
                    <form:input path="lat" htmlEscape="false" class="form-control " id="lat"/>
                </td>
                <td class="width-15 active"><label class="pull-right">经度:</label></td>
                <td class="width-35">
                    <form:input path="lon" htmlEscape="false" class="form-control " id="lng"/>
                </td>
            </tr>
            </tbody>
        </table>
    </form:form>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.10&key="你申请的key"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <%--地图控件--%>
    <script type="text/javascript">
        //初始化地图对象,加载地图
        var map = new AMap.Map("addr", {
            resizeEnable: true
        });
        //获取定位标记
        var marker = new AMap.Marker({
            position: map.getCenter(),
            //draggable: true,
            cursor: 'move',
            raiseOnDrag: true
        });
    
        marker.setMap(map);
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        var clickEventListener = map.on('click', function(e) {
            //alert(e.lnglat.getLng());
            document.getElementById("lng").value = e.lnglat.getLng();
            document.getElementById("lat").value = e.lnglat.getLat();
            marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()]); //
        });
    
        var clickEventListener = map.on('click', function(e) {
            var lng = e.lnglat.getLng();
            var lat = e.lnglat.getLat();
            console.log("经度:"+lng+"纬度"+lat);
            var lnglatXY = [lng, lat];//地图上所标点的坐标
            AMap.service('AMap.Geocoder',function() {//回调函数
                geocoder = new AMap.Geocoder({
                });
                geocoder.getAddress(lnglatXY, function (status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        //获得了有效的地址信息:
                        //即,result.regeocode.formattedAddress
                       // alert(result.regeocode.formattedAddress)
                        document.getElementById("address").value=result.regeocode.formattedAddress;//将获取到的地址信息赋值给文本框,保存进数据库
                        var address = result.regeocode.formattedAddress;
                    } else {
                        //获取地址失败
                    }
                });
            })
        });
        /*var auto = new AMap.Autocomplete({
            input: "tipinput"
        });
    */
        AMap.event.addListener(auto, "select", select);//注册监听,当选中某条记录时会触发
    
        function select(e) {
            if (e.poi && e.poi.location) {
                map.setZoom(15);
                map.setCenter(e.poi.location);
            }
        }
    </script>
    </body>
    </html>
    
    展开全文
  • //引入高德地图js <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=高德地图key&plugin=AMap.Adaptor,AMap.DistrictSearch"></script> <div id=...

    注释:海量标点比多点添加信息窗体要快得多

    //引入高德地图js
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=高德地图key&plugin=AMap.Adaptor,AMap.DistrictSearch"></script>
    
    
    <div id="container"></div>
    
    
    <script>
    var mass;
    var map = new AMap.Map('container', {
        showIndoorMap: false,
        viewMode: '3D'
    });
    
    // JSAPI 2.0 支持显示设置 zIndex, zIndex 越大约靠前,默认按顺序排列
    //不同状态使用不同图标
    var style = [
        {
            url: '/map/2.png',
            anchor: new AMap.Pixel(14, 25),
            size: new AMap.Size(25, 25),
            zIndex: 1,
        },
        {
            url: '/map/1.png',
            anchor: new AMap.Pixel(14, 25),
            size: new AMap.Size(25, 25),
            zIndex: 4,
        },{
            url: '/map/3.png',
            anchor: new AMap.Pixel(14, 25),
            size: new AMap.Size(25, 25),
            zIndex: 3,
        }
    ];
    maplist(0)
    
    function maplist(status){
    	if(status>0){
    		map.remove(mass);//清除地图上的海量点
    	}
    	
    	$.get("",
    		function(res){
    			if(status==1){
    				status=0;
    			}
    			if(res.length==0){
    				layer.msg('商铺数量0',{icon:5})
    				return false;
    			}
    			let data=[];
    			for(let item of res){
    				data.push({lnglat:{Q:item.lat,R:item.lng},shop_name:item.shop_name,principal:item.principal,phone:item.phone,address:item.address,id:item.id,style:status})
                    //海量点数据
    			}
    			mass = new AMap.MassMarks(data, {
    		        opacity: 0.8,
    		        zIndex: 111,
    		        cursor: 'pointer',
    		        style: style
    		    });
    		    mass.on('click', function (e) {
                //信息窗体数据 openInfo(e.data.id,e.data.shop_name,e.data.principal,e.data.phone,e.data.address,e.data.lnglat.R,e.data.lnglat.Q);
    		    });
    		    
    			mass.setMap(map);
    			var sw = getSW(res) // 循环所有的点标记,返回最西南的一个经纬度
    		    var ne = getNE(res) // 循环所有的点标记,返回最东北的一个经纬度
    		    let mybounds = new AMap.Bounds(sw, ne)
    		    map.setBounds(mybounds)//定位中心点
    		    map.setZoom(12)
    		}
    	);
    }
    
    function getSW(list){
    	// console.log(list)
    	let south = null
    	let west = null
    	for (let item of list) {
    	if ((west && item.lng < west) || !west) {
    	  west = item.lng
    	}
    	if ((south && item.lat < south) || !south) {
    	  south = item.lat
    	}
    	}
    	return [west, south]
    }
    function getNE(list){
    	let north = null
    	let east = null
    	for (let item of list) {
    		if ((east && item.lng > east) || !east) {
    		  east = item.lng
    		}
    		if ((north && item.lat > north) || !north) {
    		  north = item.lat
    		}
    	}
    	
    	return [east, north]
    }
    
    //信息窗体
    function openInfo(spid,shopname,principal,phone,address,lng,lat) {
        //构建信息窗体中显示的内容
        var info = [];
        info.push("<div style='padding:7px 0px 0px 0px;min-width:300px;max-width:400px;text-align:center'><h3 class='input-item'>"+shopname+"</h3>");
        info.push("<p class='input-item'>负责人 : "+principal+"</p>");
        info.push("<p class='input-item'>联系电话 : "+phone+"</p>");
        info.push("<p class='input-item'>地址 :"+address+"</p>");
        info.push('<p style="width:100%;height: 2em;line-height: 2em;background: #f2f4f5;color:#01AAED;cursor:pointer" onclick="openSpInfo(\''+spid+'\')">'+shopname+'</p></div>')
    
        infoWindow = new AMap.InfoWindow({
            content: info.join("")  //使用默认信息窗体框样式,显示信息内容
        });
    
        infoWindow.open(map, [lng,lat]);
    }
    </script>

    官方文档:https://lbs.amap.com/api/javascript-api/example/marker/massmarks

    展开全文
  • 1.产品概述产品解读高德地图与百度地图均属地图导航类APP,两家slogan如下: 高德:精准地图,旅游出行必备百度:路线规划,出行必备 地图导航类APP的核心价值即为用户提供位置及路线服务。笔者认为,位置及路线服务...
  • 高德地图API 添加标点 自定义标点 在我们创建完地图实例后,就可以在地图中添加遮盖物,覆盖物有多种类型,今天只说点标记 首先构造一个点标记 添加默认样式点标记 // 构造点标记 var marker = new AMap.Marker({ ...
  • 自定义了地图标点,然后想添加一个点聚合功能,聚合功能可以实现,但是自定义的标点还在地图上, <code>var data_point_x = 116.306771, data_point_y = 31.653254; var ...
  • 直接上代码!!! <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;...地图经纬度描点工具</title> <!-- <script type="tex...
  • 怎么在高德地图上面用循环标多个点,每个标注点在上面都要有不同的文本显示?
  • 虽然高德地图用了很多了,不过一直没在意的一个问题,今天又出现了,让我费了一番脑筋。那就是打在地图上的覆盖物标点,随着地图缩放的时候,发生了偏移。本来在路这边的标点,缩放以后,可能就显示到路对面去了。 ...
  • 输入框输入经纬度再打开地图不定位到此经纬度 在addons/address/view/index/amap.html 的relocation方法下面添加 if ("{$lng}" != '' && "{$lat}" != '') { var obj = { Q:parseFloat({$lat}),
  • //关键字查询查询 } //地图标点 标记当前位置 删除上一个标记点 var markers = []; //创建一个空数组存储每次标记的marker map.on('click', function(e) { map.remove(markers); var marker = new AMap.Marker({ ...
  • 对uni-app 也用了一段时间了,做项目的时候就对着文档撸,但这次要集成高德地图,我就开始对高德地图各种,“高德地图引入uni-app”,"高德地图中集成高德地图"等各种关键字的搜索,网上的答案也各种花样,如果要集成...
  • 手机地图的竞争版图中,阿里的高德地图、百度地图两骑绝尘,拥有绝对的市场份额,腾讯地图虽然做过很多努力,也不愁流量和入口,但依然被高德和百度远远的甩在身后。根据前瞻产业研究院的统计数据显示,2018年我国...
  • 信息窗口就是点击地图标点后,出现在地图旁边的信息框。 具体实现: 是基于海量点实现的,首先用两个全局变量用来记录点击地图的次数和点击标点的次数。 只要点击地图的次数大于点击标点的次数,就说明鼠标左键...
  • //自定义标点的图片 markerOption.title("福建").snippet("25.983831, 119.247362"); markerOption.draggable(true);//是否平铺,这里设置为平铺 Marker marker = aMap.addMarker(markerOption); marker.setObject(...
  • 创建地图 layout文件 Activity 源码:https://github.com/zzjdreams/gaode_map_track 截图:(这个是我叫我弟截图的,所以不是我的所在地《~……~》) 请忽视部分:MainActive及其相关的布局文件:这部分是我...
  • 产品概述高德开放平台URI ...开发者可以调用H5地图的各种功能来使自己的产品具备地图相关的功能,同时还可以通过URI API直接调起高德地图app来实现对应的地图功能。使用URI API开发的优势在于调用便捷,实时展现。例...
  • 高德地图官方API:https://lbs.amap.com/api/javascript-api/reference/map 一、js中  /*初始化数据*/ function initData() { var list = []; for (var i = 0; i < 3; i++) { li...
  • 先说下需求吧,我就不往外一段一段的摘了: 分全部和三家运营商,按钮点击,地图中的标点变化 鼠标移入标点,显示此标点的详细信息 ...1、加载高德脚本 <!-- 加载地图JSAPI脚本 --> <script src...
  • 高德地图——标记

    万次阅读 2016-06-20 19:25:37
    高德地图——标记
  • 高德地图 地理编码,根据地址获取经纬度坐标 地址 经纬度 鼠标拖拽点标记试试
  • 功能实现:搜所查询标点,及标记拖拽事件 1.安装插件 API链接: https://developer.amap.com/api/javascript-api/reference/map import VueAMap from 'vue-amap' Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 537
精华内容 214
关键字:

高德地图标点