精华内容
下载资源
问答
  • h5我想做一个地图---输入关键字提示匹配信息,点击要选择的信息获取该位置的信息,如图所示功能: 点击上图所示的----重庆西站(地铁站),出现如下图所示: 打印出如图地理位置信息: 本个页面功能代码如下:使用高德...

    h5我想做一个地图---输入关键字提示匹配信息,点击要选择的信息获取该位置的信息,如图所示功能:

     点击上图所示的----重庆西站(地铁站),出现如下图所示:

    打印出如图地理位置信息:

    本个页面功能代码如下:使用高德的 AMap.Autocomplete构造函数

    <!doctype html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    		<title>浏览器定位</title>
    		<link rel="stylesheet" type="text/css" href="../assets/css/mui.min.css" />
    		<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
    		<style type="text/css">
    			.mui-bar {
    				background-color: #1BCBBE;
    			}
    			.mui-pull-left,
    			.mui-title {
    				color: #fff;
    			}
    
    			html,
    			body,
    			#container {
    				width: 100%;
    				height: 100%;
    			}
    
    			#container {
    				margin-top: 12%;
    				height: 93%;
    			}
    
    			.info {
    				position: absolute;
    				left: 0;
    				right: 0;
    				top: 44px;
    				width: 100%;
    				display: flex;
    				background-color: #1BCBBE;
    				justify-content: center;
    				align-items: center;
    				height: 60px;
    			}
    
    			#keyword {
    				border-radius: 30px;
    				font-size: 14px;
    				width: 80%;
    				height: 40px;
    				margin-bottom: 0;
    			}
    
    			#result1 {
    				width: 80%;
    				margin: auto;
    				height: 100px;
    				margin-top: 104px;
    			}
    		</style>
    	<body>
    		<header class="mui-bar mui-bar-nav">
    			<span class="index-left">
    				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    			</span>
    			<h1 class="mui-title">搜索地址</h1>
    		</header>
    		<div id='mui-content'>
    			<div id="container"></div>
    			<div class="info autoclass">
    				<input id='keyword' type="text" placeholder="请输入关键字" name="keyword">
    			</div>
    			<div id="result1" class="autobox" name="result1"></div>
    		</div>
    		<script src="../assets/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="../assets/js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=高德创建的web端key值&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
    		<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    		<script type="text/javascript">
    			$.ajaxSetup({
    				async: false
    			});
    			//地图加载
    			var map = new AMap.Map("container", {
    				resizeEnable: true
    			});
    			//输入提示
    			var autoOptions = {
    				input: "keyword"
    			};
    			var auto = new AMap.Autocomplete(autoOptions);
    			var placeSearch = new AMap.PlaceSearch({
    				map: map
    			}); //构造地点查询类
    			AMap.event.addListener(auto, "select", select); //注册监听,当选中某条记录时会触发
    			AMap.event.addListener(auto, "error", onError); //注册监听,当选中某条记录时会触发
    			//解析定位正确信息
    			function select(e) {
    				placeSearch.setCity(e.poi.adcode);
    				placeSearch.search(e.poi.name); //关键字查询查询
    				var info = e.poi;//地理信息
    				console.log(info)
    			}
    			//解析定位错误信息
    			function onError(data) {
    				console.log("定位失败")
    				mui.alert(data.info)
    			}
    		</script>
    	</body>
    
    </html>
    

    主要调用的js和css为:

    js引入:
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=高德创建web端的key值&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    
    css引入:
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />

     

    展开全文
  • createMap() { // 创建地图 const map = new AMap.Map('map-container', { resizeEnable: true, zoom: 4 }) const _this = this const markers = [] map.on...
    <template>
      <div>
        <el-button type="primary" size="mini" @click="openMap">打开地图</el-button>
        <!--地图弹框-->
        <el-dialog title="地图弹框" :visible.sync="mapDialog" width="50%" @opened="createMap">
          <div id="tip">
            <input id="keyword" type="text" name="keyword" value="请输入关键字:(选定后搜索)" onfocus="this.value=''">
          </div>
          <div id="map-container" style="width: 100%;height: 500px; margin-top: -30px;" />
          <div style="margin-top: 10px">
            <div>当前经纬度: <span style="color: #1482f0">{{ location }}</span></div>
            <div style="margin: 10px 0;">当前位置: <span style="color: #1482f0">{{ this.formData.detailAddress }}</span></div>
          </div>
        </el-dialog>
      </div>
    </template>
    <script>
    import AMap from 'AMap'
    
    export default {
      data() {
        return {
          formData: { detailAddress: '', longitude: '', latitude: '', location: '' }, mapDialog: false
        }
      },
      computed: {
        location() {
          return this.formData.longitude && this.formData.latitude ? this.formData.longitude + ',' + this.formData.latitude : null
        }
      },
      methods: {
        openMap() {
          this.mapDialog = true
          this.createMap()
        },
        createMap() { // 创建地图
          const _this = this
          const markers = []
          const map = new AMap.Map('map-container', { // 创建Map地图实例
            resizeEnable: true, // 是否监控地图容器尺寸变化
            center: [106.628831, 26.645246], // 初始地图中心点
            zoom: 10 // 初始化地图显示的缩放级别
          })
    
          AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function() { // 引入输入提示[根据输入关键字提示匹配信息]插件(AMap.Autocomplete)和POI搜索[地点搜索服务插件,提供某一特定地区的位置查询服务]插件(AMap.PlaceSearch)
            const autocomplete = new AMap.Autocomplete({ // 将input输入的值传入到Autocomplete输入提示插件中
              city: '全国', // 输入提示时限定城市,默认全国,支持传入格式有:城市名、citycode和adcode
              input: 'keyword' // 用来指定一个input输入框,设定后,在input输入文字将自动生成下拉选择列表。支持传入输入框DOM对象的id值,或直接传入输入框的DOM对象
            })
            const placeSearch = new AMap.PlaceSearch({ // 将input输入的值传入到Autocomplete POI搜索插件中
              city: '全国', // 指定搜索所在城市,默认全国,支持传入格式有:城市名、citycode和adcode
              map: map // AMap.Map对象,展现结果的地图实例。当指定此参数后,搜索结果的标注、线路等均会自动添加到此地图上
            })
            AMap.event.addListener(autocomplete, 'select', function(e) { // 选择提示插件给出的提示后,在地图上进行相应定位并得到相应的值
              // 针对选中的poi实现自己的功能
              placeSearch.setCity(e.poi.adcode)
              placeSearch.search(e.poi.name)
              _this.formData.longitude = e.poi.location.lng
              _this.formData.latitude = e.poi.location.lat
              _this.formData.detailAddress = e.poi.district + e.poi.name + e.poi.address
            })
          })
    
          const trafficLayer = new AMap.TileLayer.Traffic({ // 创建实时路况图层
            zIndex: 10
          })
          map.add(trafficLayer) // 添加并显示实时路况图层到地图
          // trafficLayer.setMap(map) // 添加实时路况图层到地图
          // trafficLayer.show() // 显示实时路况图层到地图
    
          map.on('click', function(e) { // 点击地图进行的触发操作
            _this.formData.longitude = e.lnglat.getLng()
            _this.formData.latitude = e.lnglat.getLat()
    
            AMap.plugin('AMap.Geocoder', function() { // 引入 Geocoder 逆向地理编码插件,把经纬度转为地址
              const geocoder = new AMap.Geocoder({
                radius: 1000, // 以给定坐标为中心点,单位:米。取值范围:0-3000。默认值:1000
                extensions: 'base' // 返回信息的详略。默认值:base,返回基本地址信息;取值为:all,返回地址信息及附近poi、道路、道路交叉口等信息
              })
              const lnglat = [e.lnglat.getLng(), e.lnglat.getLat()]
              geocoder.getAddress(lnglat, function(status, result) { // 传入经纬度,根据给定坐标进行解析,把经纬度转为地址
                if (status === 'complete' && result.info === 'OK') {
                  _this.formData.detailAddress = result.regeocode.formattedAddress // result为对应的地理位置详细信息
                }
              })
            })
    
            map.remove(markers) // 移除地图上已创建的点标记
            const marker = new AMap.Marker({ // 创建 Marker 点标记
              position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), // 点标记在地图上显示的位置,默认为地图中心点
              title: '当前位置' // 鼠标滑过点标记时的文字提示,不设置则鼠标滑过点标无文字提示
            })
            markers.push(marker) // 将marker标注用markers数组存起来,便于移除上次点击地图产生的点标记
            map.add(marker) // 将创建的点标记添加到已有的地图
          })
        }
      }
    }
    </script>
    <style>
      #tip {
        background-color: #ddf;
        color: #333;
        border: 1px solid silver;
        box-shadow: 3px 4px 3px 0px silver;
        position: absolute;
        top: 60px;
        right: 30px;
        border-radius: 5px;
        overflow: hidden;
        line-height: 30px;
        z-index: 1;
      }
      #tip input[type="text"] {
        height: 30px;
        border: 0;
        padding-left: 5px;
        width: 280px;
        border-radius: 3px;
        outline: none;
      }
      .amap-sug-result {
        z-index: 9999;
      }
    </style>

     

    点击打开地图按钮,弹出显示页面

    随便点击地图上的一点,得到经纬度与地址

     根据输入的关键字提示匹配信息

    选择其中一个提示信息,得到经纬度与地址

    展开全文
  • 一般的操作顺序是,对地图截屏,photoshop处理截屏图片覆盖图片,这中间要进行一些人工计算,如级别的确定等,有点复杂。 使用配准法就简单多了,只要点击几次鼠标就完成了。而且现在使用了新技术,可以处理...

        工具下载

     

        原来的图片切片工具,在对图片切片之前,需要制作源图,在源图中进行图片缩放、旋转等操作,这就是顺序法切图。一般的操作顺序是,对地图截屏,photoshop处理截屏图片和覆盖图片,这中间要进行一些人工计算,如级别的确定等,有点复杂。

        使用配准法就简单多了,只要点击几次鼠标就完成了。而且现在使用了新技术,可以处理photoshop打不开的大图,覆盖地图上更大的地理面积,处理更高的地图级别,清晰度也比原来有提高。

        下载的压缩包中,包含故宫平面图,故宫.jpg,这图边角分明,容易操作。

    1、新增加一个项目。

    2、定义源图片位置,切片输出路径等。红框内必须定义,其余可以默认。部分地图需要输入自己申请的地图key,否则看不到结果展示,但是不影响切片生成。

     

     

    3、点击配准法设置选项卡设置,进入配准操作。

    点图片重置。这一步的作用是把图像缩小后放到视图中央。

    4、 增加2对配准点。

        地图缩放到正好可以看到全部故宫。

        图像也缩放一下,方便点击配准点。

        配准点的选取原则:一是尖角,二是交叉点。因为这样的点位置相对精确,容易选择。(注意:不需要选对角啊!)

        增加配准点的过程,中间提示一般选是。

    第一对:

    第二对:

    5、配准切图。至此,配准法设置完成,可以关闭当前配置界面,到主界面设置好切图级别进行配准切图操作了。

    一般先切比较低的级别试一试。定好级别好,直接点配准切图。

    熟悉操作后,一般点击十来次鼠标就完成配准。

     

     

     

     

    展开全文
  • manifest.cld NaviConfig.txt NaviLog.cld navimap.cld supcfg.txt NaviUpdateInfo.cld 都是些引导文件!
  • 地点输入提示 用户可通过该服务,匹配用户输入关键词的地点推荐列表。 在应用方面,可将地点推荐列表展示给用户,用户可通过点击等交互方式,结合地点检索服务,检索用户点击的POI信息,实现地点详情检索功能。 ...
    • 地点输入提示
      用户可通过该服务,匹配用户输入关键词的地点推荐列表。
      在应用方面,可将地点推荐列表展示给用户,用户可通过点击等交互方式,结合地点检索服务,检索用户点击的POI信息,实现地点详情检索功能。
    http://api.map.baidu.com/place/v2/suggestion?query=天安门&region=北京&city_limit=true&output=json&ak=你的ak //GET请求
    

    API详情参照官网文档

    http://lbsyun.baidu.com/index.php?title=webapi/place-suggestion-api

    1、根据官方文档创建返回值对象

    创建CityAddress.java 实体类,使用idea开发可以直接在类上边添加@Data注解,就可以省去添加get 和set代码了。使用eclipse和myeclipse的记得添加下get、set 方法。

    @Data
    public class CityAddress {
    
        private String stauts;
        private String message;
        private List<ResultDetail> result;
        @Data
        public class ResultDetail {
            /*地址名称*/
            private String name;
    
            private Location location;
    
            @Data
            public class Location{
                private String lat;
                private String lng;
            }
    
            /*uid*/
            private String uid;
    
            /*所属省*/
            private String province;
    
            /*所属省市*/
            private String city;
    
            /*所属省市区*/
            private String district;
    
            /*商业*/
            private String business;
    
            /*城市code*/
            private String cityid;
        }
    

    2、编写百度输入提示API接口调用方法

    public static List<CityAddress.ResultDetail>cityLimit(String region, String query){
            if(StringUtils.isEmpty(query))return null;
            String ak = "你的ak";
            // query:输入的地址
            // region: 需要限制的城市,例如:region = '北京',输入火车站的时候提示的是北京市的火车站信息
            String resultJson = HttpClientUtil
                    .doGet("http://api.map.baidu.com/place/v2/suggestion?query="+query+"&region="+region+"&city_limit=true&output=json&ak="+ak);
            System.out.println(resultJson);
            //GSON直接解析成对象
            CityAddress resultBean = new Gson().fromJson(resultJson,CityAddress.class);
            //对象中拿到集合
            List<CityAddress.ResultDetail> BeanList = resultBean.getResult();
            //将拿到的集合进行处理,获取省市区和具体地理信息
            for(CityAddress.ResultDetail detail : BeanList){
                detail.setName(detail.getProvince()+detail.getCity()+detail.getDistrict()+detail.getName());
            }
            return BeanList;
        }
    

    3、测试

    在这里插入图片描述
    在这里插入图片描述
    成功!!

    展开全文
  • 该应用程序包括餐厅地图,并在提示时提供前往餐厅的路线。 运行项目说明 为了运行项目,只需加载google_places_api.html并按照提示进行操作。 注意:如果运行不止一次,则应用程序可能会输出前5个餐厅作为前5个餐厅...
  • //输入提示,并实现搜索开始========= AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){ var autoOptions = { city: "", //城市,默认全国 input: "searchipt"//...
  • 在开发模式中使用地图功能时提示“用户MD5安全码未通过”,查看高德官方文档,给予下面提示:*使用云图检索、附近功能出现“key错误”、“用户MD5安全码未通过”、1008错误如何解决? 云图目前只支持使用发布版SHA1...
  • 这几天在写android高德地图相关的项目,遇到实现乘客选择上下车地点的功能,其中涉及到搜索界面中文本框的地点输入的自动提示模块,先来看下滴滴上该功能的效果图: 从图中分析并划分一下简单功能需求:  1).主...
  • 那么剩余的工作也就比较简单了,保存坐标,然后转换为WGS坐标,这样才能现有的GPS数据以及地图匹配. 主要问题解决方法 本地保存文件跨浏览器支持 由于安全的原因,JavaScript本地保存文件的方式通常都只有IE支持...
  • 每次打开编辑要素,总会有弹框提示“空间参考与数据框不匹配”,一般就直接忽略,然后不管,接着编辑要素去了,然后这两天一直遇到一个问题,首先,在合并要素的时候,要素的弧线变成直线了 看上去全是这种方方正...
  • 上一小节链接. 目录1、多边形地图1.1 多边形地图的相关概念1.2 英国国家公园多边形地图2、设置地理信息2.1 自定义地理码导入(1)扩展现有角色:(2...导入 国家公园地理数据 ,将维度经度由数值型转换成地理信息,.
  • 登录百度地图开放平台 注册百度地图开发者,填写相关信息 提交成功后收到邮件 点击链接弹出如下提示就算激活成功了 申请密钥 点击申请密钥或者创建应用 填入应用相关信息 Android Studio获取SHA...
  • 笔者近2天在 Android Studio上玩了一下百度地图,碰到了常见的"230错误 APP Scode校验失败",下面我来介绍一下具体的解决办法
  • 如下数据中“北京”要和地图的json或js文件中的“北京”相匹配,以确定坐标等信息(不然echarts怎么知道北京是那一块): { name : '北京', value : 0 } 自定义地图数据中没有“南海诸岛”选项,只需: ...
  • 小程序中打开地图选择店铺位置,地图定位选择地点实现方法如下,(仿美团外卖商家入驻店铺地址选择页面制作) 功能如下: 1. 默认地位显示地图,下面显示附近场所 ...4. 拖动地图自动匹配选择中心位置 5. 可重新定位
  • 百度地图 在用户输入的省市区范围内进行关键字智能提示搜索
  • 高德地图2----输入提示、关键字查询

    千次阅读 2017-01-22 20:35:47
    高德地图搜索服务
  • 本案例采用腾讯位置服务中关键词输入提示方法,对用户输入的关键词进行补齐,并弹出返回匹配度高的结果,用户点击任意一个结果,打开此位置,之后可以借助于微信内置地图来实现导航等后续功能。 主要代码 wxml页面...
  • //高德地图的输入的自动提示,代码在后面 InputTipTask.getInstance(this).setAdapter(autotext).searchTips(s.toString().trim(), ""); } } @Override public void afterTextChanged(Editable editable) { } ...
  • 很多小伙伴想知道为什么每次进csgo的原地图就显示VPK文件与服务器不匹配怎么办。下面小编就为大家带来csgovpk不匹配服务器文件原因及处理方案,一起来看看吧。csgo客户端文件与服务器不匹配解决方法方案一:在steam...
  • 1.使用百度地图SDK的应用需要申请应用(AK) 官网网址为:http://lbsyun.baidu.com/apiconsole/key/create 如图下: 需要获取开发版本SHA1发布版本SHA1,参考文章: ...将AK加入到AndroidManifest.xml中:...
  • 在已经有BaiduMap的APIKey后使用AndroidStudio导入Baidu地图的as版的demo,提示key验证错误!错误码:230; 首先,因为百度地图demo中用自己的keystore文件,所以将你自己的.android 文件夹下的debug.keystore文件...
  • 当用户与匹配的元素进行交互时,显示高度可定制的工具提示。 从clueTip 1.1版开始,此插件为 。 完整文档:[ ] 演示:[ ] 已知的问题 从图像地图<area>元素调用.cluetip() ,插件将忽略postionBy选项。 通过...
  • Android错误码1008、327;错误提示invalid_user_scode;返回key鉴权失败的解决办法 检查SHA1值:第一步:获取APK当前签名文件的SHA1a.请参考工单高频问题提供的SHA1值获取方式取得您APK当前使用的SHA1值。b.也...
  • power bi 地图 该项目 (The project) This is the first article of a series dedicated to discovering geographic maps in Power BI using Bubble Map and Filled Map. 这是致力于使用Bubble MapFilled ...
  • 输入提示是指根据用户输入的关键词,给出相应的提示信息,将最有可能的搜索词呈现给用户,以减少用户输入信息,提升用户体验。如:输入“方恒”,提示“方恒国际中心A座”,“方恒购物中心”等。 实现输入提示的...
  • 1.2在使用高德地图的lib库时,最好使用导航和地图的合成库,如果导航库和地图库不匹配的话,在导航页面上就会出现不同步的情况(自己就遇到过两个包不匹配地图库版本比较老,导致导航页面最后只有声音而图标不走...
  • POI检索, 根据地址输入提示检索 Sug 参考百度地图官方文档:http://lbsyun.baidu.com/index.php?title=androidsdk/guide/search/suggestion 地点检索输入提示服务(也被称为POI热词建议检索、在线建议检索、...
  • 百度地图地图已标记POI点搜索POI点的获取利用

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,650
精华内容 4,260
关键字:

匹配信息和地图的提示