zoukankan      html  css  js  c++  java
  • webapp-地图

    webapp-地图

    高德地图

    • 我的第一个地图应用

      • 注册账号并申请key
      • 准备页面
      • 创建地图应用
          var map = new AMap.Map("container", {
            zoom: 11,//级别
          }) 
      
          // console.log(map.getZoom())
          // console.log(map.getCenter().toString())
      
          map.on('moveend',function () {
            console.log(map.getZoom())
            console.log(map.getCenter().toString())
          })
      
        //	每次移动结束
          map.on('zoomend', function () {
              console.log(map.getZoom())
              console.log(map.getCenter().toString())
            })
        // 级别改变触发 
      
      // 设置地图的层级
      
      btn.onclick = function () {
      	map.setZoom(zoomVal.value)
      }
      

      zoom 的数字越大 显示的越精细 越小显示的范围越大 setZoom 手动设置级别

    设置地图的中心点

    // 设置地图的层级
    
    btn.onclick = function () {
    	map.setZoom(xNode.value,yNode.value)
    }
    

    既能设置zoom和center的方法

    btn.onclick = function () {
    	map.setZoomAndCenter(12,[121,20])
    }
    

    获取当前行政区

    // 这是一个异步操作
    map.getCity(function (info) {
    	console.log(info)
    })
    

    设置当前行政区

    btn.onclick = function() {
    	map.setCity(cityNode.value)
    }
    

    设置当下的行政区,map.setCity('字符串') 想要到达的中心点

    获取地图显示范围

    console.log(map.getBounds)
    

    获取 地图范围 .getBounds().northeast // 右上角坐标,.getBounds().northeast // 左下角坐标

    设置地图显示范围

    var myBounds = new AMap.Bounds([116,23],[123,52])
    map.setBounds(myBounds)
    

    不是特别精准

    限制地图显示范围

    var bounds = map.getBounds()
    bounds.northeast.R = 118
    
    map.setLimitBounds()
    map.clearLimitBounds()
    

    地图的平移

    setInterval(() => {
    	map.panBy(50,300*Math.random())
    }, 3000);
    
    setTimeout(() => {
    	map.panTo([120,23])
    }, 3000);
    

    地图的平移, panBy(x,y)panTo(x,y) x代表向左平移多少像素 / y代表向上平移多少像素

    获取鼠标的经纬度

    map.on('click',function (e) {
    	console.log(e)
    })
    

    longitude 经度

    latitude 纬度

    map.on('click',function (e) {
    	console.log(e.lnglat.lat, e.lnglat.lng)
    })
    

    获取鼠标的经纬度,利用事件对象

    设置鼠标的样式

    map.setDefaultCursor('pointer')
    

    值选项:很多!

    地图搜索

    • 地图搜索

      输入提示

      AMap.plugin("AMap.Autocomplete",function() {
      	new AMap.Autocomplete().search("要搜索的地点",function(status,data) {
      		console.log(data) //搜索出来的数据
      	}) 
      })
      

      在加载的key后面加上你想加上的插件!

      以下简洁写法

      new AMap.Autocomplete({
      	input: 'searchText'
      })
      
    • 添加标记

    • 缩放比例尺控件

    • 地图类型转换

    如何知道地图加载完成?

    AMap.plugin('AMap.Autocomplete',function () {
    	new AMap.Autocomplete().search("北京",function(status,data) {
    		console.log(data)
    	})
    })
    

    POI

    兴趣点

    AMap.service(['AMap.PlaceSearch'],function() {
    			new AMap.PlaceSearch({
    				city:'0550', // 搜索城市
    				map:map, // 地图对象
    				panel:"setCenterNode" ,//在哪个容器中显示
    				pageSize: 5,//控制页数显示的条数
    				pageIndex: 1, //默认显示的页数
    				cityLimit: true, // 限定城市显示
    			}).search('电影院') // 搜索关键词
    		})
    

    先添加一个服务,然后在函数里创建服务并配置参数! 图片想要出来必须在服务器下!

    		var palceSearch = new AMap.PlaceSearch({
    			map: map
    		})
    		
    		AMap.event.addListener(search,'select', function(e)  {
    			console.log(e)
    			palceSearch.search(e.poi.name)
    		}) // 给地图添加事件
    
  • 相关阅读:
    CSS教程:div垂直居中的N种方法
    .NET中Flags枚举的使用
    C# 两种方法实现HTTP协议迷你服务器
    百度面试题:求绝对值最小的数
    单点登录
    三范式
    hibernate cascade
    debugview trace 调试
    面向模式的软件体系结构
    待研究
  • 原文地址:https://www.cnblogs.com/daixixi/p/11306010.html
Copyright © 2011-2022 走看看