精华内容
下载资源
问答
  • 高德地图搜索获取坐标转换地图添加标记 记得换成自己申请的KEY值。
  • java script 搜索服务 输入提示并自动搜索 标记 信息框
  • 定位-搜索-周边检索-路径规划-导航.html——浏览器定位,搜索地点定位,定位点周边搜索,自定义信息窗体,步行路径规划 标记bjdemo.html——标记点,显示坐标 鼠标绘制点线面.html——地图上绘制多边形,右键编辑...
  • 首先需要在index.html中引入高德地图js链接,key需要换成你自己的key 最近有个需求是实现一个使用地图搜索定位的功能,在网上参考了下其他的文章,感觉不是很完善,自己整理了一下,可以实现点击定位,搜索列表...
  • 近来由于工作需要,需要提取某些城市的经纬度坐标,稍微搜索了一下,发现百度地图和高德地图都提供了相关的函数和例子.那么剩余的工作也就比较简单了,保存坐标,然后转换为WGS坐标,这样才能和现有的GPS数据以及地图匹配....
  • 概述刚好有一个项目,需要定位,并且需要可以手动设置地址,为了提高用户体验,需要加入搜索框的自动完成功能。第一步 引用api脚本<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=**...

    概述

    刚好有一个项目,需要定位,并且需要可以手动设置地址,为了提高用户体验,需要加入搜索框的自动完成功能。

    第一步 引用api脚本

    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=**appid**"></script>

    第二步 布局要实现自动完成的文本框

    <input id="complete" type="text" placeholder="输入您要定位的地址" />

    第三步 代码实现

    AMap.plugin('AMap.Autocomplete',function(){//回调函数
        var autoOptions = {
            city: "", //城市,默认全国
            input:"complete"//使用联想输入的input的id
        };
        var autocomplete= new AMap.Autocomplete(autoOptions);
    
        AMap.event.addListener(autocomplete, "select", function(data){
            //TODO 选择后的处理程序,data的格式见 附录
        }); 
    });

    附录

    {
        "type": "select",
        "poi": {
            "id": "B000A80X4B",
            "name": "北京市建设工程专业劳务发包承包交易中心(西城区政协北)",
            "district": "北京市西城区",
            "adcode": "110102",
            "location": {
                "I": 39.873013,
                "C": 116.351675,
                "lng": 116.351675,
                "lat": 39.873013
            },
            "address": "广安门南街甲68号",
            "typecode": "130100"
        }
    }
    展开全文
  • 集成高德地图实现定位 获取周边信息 拖动地图更新周边信息 搜索更新信息
  • 高德地图的基本使用过程,创建过程,配置过程,定位及附件区域的POI搜索Recyclerview列表展示
  • var mapObj = new AMap.Map("mapContainer", {resizeEnable: true,center: [116.397428, 39.90923],//地图中心点zoom: 13,//地图显示的缩放级别keyboardEnable: false});AMap.plugin(['AMap.A...

    var windowsArr = [];

    var marker = [];

    var mapObj = new AMap.Map("mapContainer", {

    resizeEnable: true,

    center: [116.397428, 39.90923],//地图中心点

    zoom: 13,//地图显示的缩放级别

    keyboardEnable: false

    });

    AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){

    var autoOptions = {

    city: "北京", //城市,默认全国

    input: "keyword"//使用联想输入的input的id

    };

    autocomplete= new AMap.Autocomplete(autoOptions);

    var placeSearch = new AMap.PlaceSearch({

    city:'北京',

    map:mapObj

    })

    AMap.event.addListener(autocomplete, "select", function(e){

    //TODO 针对选中的poi实现自己的功能

    placeSearch.search(e.poi.name)

    console.log(e);

    document.getElementById("zuobiao").value = e.poi.location.lng + ',' + e.poi.location.lat;

    document.getElementById("weizhi").value = e.poi.district;

    });

    });

    //s

    展开全文
  • 高德地图demo

    2017-11-03 11:34:46
    实现的功能:搜索提示;点击可以获取地区经纬度,地名,点击搜索的Mark可以获取相应的经纬度和地名。
  • html:搜索框,搜索提示,搜索下拉菜单 JS:上下键移动提示内容,选取提示内容,ArcGIS API for JavaScript显示地图与POI信息 服务:高德地图POI服务 可用!
  • 创建 loadMap.js/*** 动态加载高德地图** @export* @param {*} key 高德地图key* @param {*} plugins 高德地图插件* @param {string} [v='1.4.14'] 高德地图版本* @returns*/export default function loadMap(key, ...

    创建 loadMap.js

    /**

    * 动态加载高德地图

    *

    * @export

    * @param {*} key 高德地图key

    * @param {*} plugins 高德地图插件

    * @param {string} [v='1.4.14'] 高德地图版本

    * @returns

    */

    export default function loadMap(key, plugins, v = '1.4.14') {

    return new Promise(function(resolve, reject) {

    if (typeof AMap !== 'undefined') {

    // eslint-disable-next-line no-undef

    resolve(AMap)

    return true

    }

    window.onCallback = function() {

    // eslint-disable-next-line no-undef

    resolve(AMap)

    }

    let script = document.createElement('script')

    script.type = 'text/javascript'

    script.src = `https://webapi.amap.com/maps?v=${v}&key=${key}&plugin=${plugins}&callback=onCallback`

    script.onerror = reject

    document.head.appendChild(script)

    })

    }

    在.vue页面中引入loadMap.js

    import loadMap from "../assets/js/loadMap";

    html模板

    用到的2个插件  "AMap.Autocomplete", "AMap.PlaceSearch",

    import loadMap from "../assets/js/loadMap";

    export default {

    name: "barChart",

    data() {

    return {

    inputContent: "",

    // 地图实例

    GDMap: null,

    // 加载的一些插件

    // 更多参考:https://lbs.amap.com/api/javascript-api/guide/abc/plugins#plugins

    plugins: [

    "AMap.Autocomplete",

    "AMap.PlaceSearch",

    "AMap.OverView",

    "AMap.MouseTool",

    "AMap.PolyEditor",

    "AMap.RectangleEditor",

    ="AMap.DistrictLayer",

    "AMap.CustomLayer"

    ],

    // key

    key: "3862bb74758c8d185100ed5df030949d",

    //key: "64c880093eda5bd293e4d5c324e5131b", Autocomplete没有效果

    // 地图版本

    v: "1.4.4"

    };

    },

    mounted() {

    loadMap(this.key, this.plugins, this.v)

    .then(AMap => {

    this.GDMap = new AMap.Map("GDMap", {

    zoom: 10

    //center: [119.947, 31.7728]

    });

    this.GDMap.on("complete", () => {

    console.log("completed");

    var auto = new AMap.Autocomplete({

    input: "tipinput"

    });

    var placeSearch = new AMap.PlaceSearch({

    map: this.GDMap

    }); //构造地点查询类

    AMap.event.addListener(auto, "select", select); //注册监听,当选中某条记录时会触发

    AMap.event.addListener(placeSearch,"markerClick",(e)=>{

    console.log(e.data.location.lng,e.data.location.lat) // 经纬度

    })

    function select(e) {

    placeSearch.setCity(e.poi.adcode);

    placeSearch.search(e.poi.name); //关键字查询查询

    }

    });

    })

    .catch(() => {

    console.log("地图加载失败!");

    });

    },

    methods: {}

    };

    #panel {

    position: absolute;

    background-color: white;

    max-height: 90%;

    overflow-y: auto;

    top: 10px;

    right: 10px;

    width: 280px;

    }

    遇到的问题:有的key会使输入提示无效,换个key 就好了。官网的例子回调函数要改成箭头函数,否则this指向会有问题。

    展开全文
  • vue高德地图搜索功能

    2020-12-19 18:51:28
    vue版本:v2.5.2vue-cli版本:v2.9.3webpack版本:3.6.0高德地图api版本:JavaScript API V1.4.12二、直入主题首先在,index.html文件中引入高德地图api然后,更改webpack配置文件 build/webpack.base.conf.js,...

    一、开发环境:

    vue版本:v2.5.2

    vue-cli版本:v2.9.3

    webpack版本:3.6.0

    高德地图api版本:JavaScript API V1.4.12

    二、直入主题

    首先在,index.html文件中引入高德地图api

    然后,更改webpack配置文件 build/webpack.base.conf.js,在module.exports中添加externals字段

    module.exports = {

    ....

    externals: {

    'AMap': 'AMap'

    }

    }

    如果是vue-cli3版本,请在项目的根目录的vue.config.js文件中修改webpack配置

    // vue.config.js

    module.exports = {

    chainWebpack: config => {

    config.externals: {

    'AMap': 'AMap'

    }

    }

    }

    代码:

    请输入关键字:

    搜索

    初始化结果:

    搜索地点:

    地点经纬度:

    接下来根据经纬度可以实现其他功能。

    三、总结

    高德地图api接口比较丰富,只要开动脑筋组合使用起来,大多的需求都能实现。本次主要使用了POI搜索插件AMap.PlaceSearch,原官方的Demo中使用了AMap.AutoComplete,本次根据实际项目需求去掉了,结合了带列表的POI搜索的这个Demo,再将监听事件改为列表点选的selectChange事件,获得当前点选地点经纬度,这样将二者进行了组合一下实现了以上的搜索以及展现方式,查看AMap.PlaceSearch全部属性和方法,查看AMap.Autocomplete全部属性和方法。

    THE END

    展开全文
  • 关键字检索#panel {position: absolute;background-color: white;max-height: 90%;overflow-y: auto;top: 10px;right: 10px;width: 280px;}var map = new AMap.Map("container", {resizeEnable: true});...
  • 楼主实战,根据自身需求加在对应位置即可——...不包含开发者Key,地图标点等其他高德地图API提供接口技术功能,只适用加进自身开发中项目,添加逆向地理编码功能。个别地方加了注释,不懂自行搜索或遇到问题联系楼主。
  • 多关键字检索#panel {position: absolute;background-color: white;max-height: 90%;overflow-y: auto;top: 10px;right: 10px;width: 280px;}var map = new AMap.Map("container", {resizeEnable: true});...
  • 包含了高德地图JavaScriptAPI中的一些功能,主要是,定位,获取坐标,POI搜索,WGS与GCJ02坐标转换几个部分。仅供参考。
  • //搜索 map对象需要初始化,初始化方法查看前面几篇 function Search(e) {//e:限定城市 AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () { var autoOptions = { // 城市,默认全国 city: ...
  • 第一次写文章,写得不好各位看官见谅~(pσ_σ)P首先这是一个vue里面的项目,高德地图api是直接CDN进来的,所以使用了global来调用,默认已经初始化了一个地图,为了实现一个输入框搜索功能和将搜索的结果清除掉,...
  • //引入高德js <scripttype="text/javascript"src="https://webapi.amap.com/maps?v=1.3&key=xxxxxxxxxxxxxxxxxxxx&plugin=AMap.Autocomplete,AMap.PlaceSearch"> <script type="text/javascript" src=...
  • 代码如下,高德地图搜索后默认会放大至搜索点,但我现在想在获取到的坐标位置添加遮罩所以必须要缩放地图,但设置map.setZoom(10)无效 这是怎么回事? ``` AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete']...
  • 高德地图实现拖拽选址、搜索、定位,可以嵌套小程序webview不被拦截 请不要忘记换成你的高德Key钥匙 写这篇文章的时候我也很纠结,因为有一些参数我也不太明白,但是呢因为配同事加班无聊,所以就写了。先看一下...
  • 高德地图,输入关键词输入提示(autocomplete), 按照选择的关键词执行地点搜索placesearch在地图上生成标记点marker, 点击标记点弹出自定义信息窗口infowindow 点击信息窗体确定按钮,根据经纬度+地址更新当前行数据. ...
  • 关键字检索#panel {position: absolute;background-color: white;max-height: 90%;overflow-y: auto;top: 10px;right: 10px;width: 280px;}var map = new AMap.Map("container", {resizeEnable: true});...
  • var city = $('#city')[0 ... <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>   转载于:https://www.cnblogs.com/lgh344902118/p/8676703.html
  • 1.在index.html引入高德地图jsapi2.地图dom3.js实现export default {data() {},methods:{initmap(){let map = new amap.map('container', {features: ['bg', 'road'],resizeenable: true,center: [116.397428, 39....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,226
精华内容 1,290
关键字:

高德地图js搜索