精华内容
下载资源
问答
  • 高德地图搜索获取坐标转换地图添加标记 记得换成自己申请的KEY值。
  • //搜索 map对象需要初始化,初始化方法查看前面几篇 function Search(e) {//e:限定城市 AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () { var autoOptions = { // 城市,默认全国 city: ...
    //搜索 map对象需要初始化,初始化方法查看前面几篇
            function Search(e) {//e:限定城市
                AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
                    var autoOptions = {
                        // 城市,默认全国
                        city: e,
                        // 使用联想输入的input的id (输入框的id)
                        input: "search_input"
                    }
                    var autocomplete = new AMap.Autocomplete(autoOptions)
                    var placeSearch = new AMap.PlaceSearch({
                        city: e,
                        map: map
                    })
                    AMap.event.addListener(autocomplete, 'select', function (e) {
                        //下拉框的选项点击事件
                        console.log(e.poi.name);
                        placeSearch.search(e.poi.name);
                    })
                    AMap.event.addListener(placeSearch, 'markerClick', function (e) {
                        //结果标记点的点击事件
                        let lng = e.data.location.lng;
                        let lat = e.data.location.lat;
                        
                    })
                })

    ps:位置搜索时地图对象需要和初始化的地图对象保持一致,否则更新过地图对象后 搜索的对象未更新则找不到原始对象 绘制标点会提示这个错误;

    展开全文
  • java script 搜索服务 输入提示并自动搜索 标记 信息框
  • 高德地图 js api

    千次阅读 2014-06-19 09:16:57
    本文就详细讲解了如何制作附近实体店的地图,并调起高德地图进行导航,调起打电话功能。 本文还详细讲解了如何设置支付宝服务、微信公众号、微博官方账号的地图功能。 ------------------------

    摘要:

    附近连锁店地图与全国连锁店地图,最大的区别就是:

    1、附近连锁店地图需要先定位,然后搜索附近的店铺。

    2、全国连锁店地图,是先选择城市,然后检索某城市内的全部门店信息。

    本文就详细讲解了如何制作附近实体店的地图,并调起高德地图进行导航,调起打电话功能。

    本文还详细讲解了如何设置支付宝服务、微信公众号、微博官方账号的地图功能。

    ------------------------------------------------------------------------

     

    一、支付宝设置

    登录支付宝服务窗:https://fuwu.alipay.com/platform/queryMenu.htm

    自定义菜单 -> 主菜单 -> 有子级菜单

    填写子菜单名称,设置为跳转网页,并且放入网址。比如菜鸟物流:http://zhaoziang.com/amap/cainiao.html

    最后点击发布。

     

    二、微信设置

    登录微信公众平台:https://mp.weixin.qq.com

    功能->高级功能->编辑模式->自定义菜单-> 菜单管理->添加->设置动作

    设置为跳转网页,并且放入网址。比如菜鸟物流:http://zhaoziang.com/amap/cainiao.html

    最后点保存。

     

    三、微博设置

    登录微博:http://weibo.com/

    管理中心->粉丝服务->高级功能->编辑模式->自定义菜单-> 菜单管理->添加->设置动作

    设置为跳转网页,并且放入网址。比如菜鸟物流:http://zhaoziang.com/amap/cainiao.html

    最后点保存。

     

    四、云图设置

    登录云图管理台:http://yuntu.amap.com/datamanager/index.html

    新建地图

    导入CSV数据。(支持UTF8和GBK 编码,数据不超过10,000 条)

    点击预览,即可看到自己的云图。

     

    五、代码与获取网址

    将以下代码复制下来,替换keytableID、图标,然后生成自己的网址。

    获取key的地址:http://api.amap.com/key

    获取tableID的地址:

    进入你的云图->获取tableID

     

    全部源代码:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>菜鸟物流全国站点</title>
    <style>
    /** reset **/
    body,html,div,p,li,ul,ol,p,select,h3
    {padding:0;margin:0;}
    body,html
    {width:100%;height:100%;}
    img
    {border:none;}
    a
    {text-decoration:none;}
    a:hover
    {color:#FF7F27;}
    body
    {color:#333;font-family:"Microsoft YaHei";text-align:center;font-size:14px;}
    img:hover
    {filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity: 0.9;opacity: 0.9;}
    ul,li
    {list-style:none;}
    /** clearfix **/
    .clearfix
    {display:block;zoom:1;}
    .clearfix:after
    {content:".";display:block;height:0;clear:both;visibility:hidden;}
    /** weixin **/
    .header
    {width:100%;height:10%;background:#b3ffd7;float:left;}
    .header a
    {width:49%;height:100%;float:left;font-size:16px;line-height:3.5em;}
    #map,#list
    {height:90%;width:100%;}
    #list
    {text-align:left;}
    .item
    {border-bottom:1px dashed #ccc;padding:10px;}
    </style>
    <script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=【您的key"></script>
    </head>
    <body onLoad="mapInit()">
    <div class="header clearfix">
    <a id="iListBtn" onclick="display('list','iMapBtn');" href="javascript:void(0);">列表模式</a>
    <a id="iMapBtn" onclick="display('map','iListBtn');" href="javascript:void(0);">地图模式</a>
    </div>
    <div id="map" class="clearfix"></div>
    <div id="list" style="display:none;">正在读取数据……</div>
    </body>
    <script language="javascript">
    function display(id1,id2){
    document.getElementById('map').style.display = 'none';
    document.getElementById('list').style.display = 'none';
    document.getElementById(id1).style.display = 'block';
    document.getElementById(id2).style.display = 'block';
    if (id1 === 'map' && mapObj) {
    mapObj.setFitView();
    }
    }
    var mapObj;
    var cloudDataLayer;
    var cloudSearch;
    var cpoint;
    //初始化地图对象,加载地图
    function mapInit(){
    mapObj = new AMap.Map("map");
    mapObj.plugin('AMap.Geolocation', function () {
    geolocation = new AMap.Geolocation({
    enableHighAccuracy: true,//是否使用高精度定位,默认:true
    timeout: 10000, //超过10秒后停止定位,默认:无穷大
    maximumAge: 0, //定位结果缓存0毫秒,默认:0
    convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
    showButton: true, //显示定位按钮,默认:true
    buttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角
    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
    showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
    showCircle: false, //定位成功后用圆圈表示定位精度范围,默认:true
    panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
    zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
    });
    mapObj.addControl(geolocation);
    geolocation.getCurrentPosition();
    AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息-成功
    AMap.event.addListener(geolocation, 'error', function(){
    alert('哟,定位失败啦!');
    }); //返回定位信息-失败
    });
    }
    function onComplete(data) {
    var lngX = data.position.getLng();
    var latY = data.position.getLat();
    cpoint = new AMap.LngLat(lngX,latY);
    //cpoint = new AMap.LngLat(116.38298,39.955543);
    myCloudList();  
    }
    //云图加载列表
    function myCloudList(){
    //列表
    var search; 
        var searchOptions = {
    pageSize:20
    };
    mapObj.plugin(["AMap.CloudDataSearch"], function() {
    cloudSearch = new AMap.CloudDataSearch('【您的tableID', searchOptions); //构造云数据检索类
    AMap.event.addListener(cloudSearch, "complete", cloudSearch_CallBack); //查询成功时的回调函数
    AMap.event.addListener(cloudSearch, "error", errorInfo); //查询失败时的回调函数
    cloudSearch.searchNearBy(cpoint, 10000); //周边检索 
    });
    }
    var markers = new Array();
    var windowsArr = new Array();
    //添加markerinfowindow
    function addmarker(i, d){
    var lngX = d._location.getLng();
    var latY = d._location.getLat();
    var IconOptions = {
    image : "cainiao.png", //您的小图标33*33
    size : new AMap.Size(33,33),
    imageSize : new AMap.Size(33,33),
    imageOffset : new AMap.Pixel(-16,0)
    };
    var myIcon = new AMap.Icon(IconOptions);
    var markerOption = {
    map:mapObj,
    icon: myIcon,
    offset: new AMap.Pixel(-15,-30),
    position:new AMap.LngLat(lngX, latY)
    };
    var mar = new AMap.Marker(markerOption);
    markers.push(new AMap.LngLat(lngX, latY));

    var infoWindow = new AMap.InfoWindow({
    content: "<h3>" + d._name + "</h3>" + "<img style=\"width:280px;height:180px;overflow:hidden;\" src='cainiao2.png' /><p>地址:" + d._address + "</p>" + "<p>电话:<a href=\"tel:" + d.telephone + "\">" + d.telephone + "</a></p><p style=\"text-align:right\"><a href='http://mo.amap.com/?q=" + d._location.getLat() + "," + d._location.getLng() + "&name=" + d._name + "'>到这儿去</a></p>",
    size:new AMap.Size(280, 0),
    autoMove:true,
    offset:new AMap.Pixel(0,-30),
    closeWhenClickMap: true
    });
    windowsArr.push(infoWindow);
    var aa = function(){infoWindow.open(mapObj, mar.getPosition());};
    AMap.event.addListener(mar, "click", aa);
    }
    //回调函数-成功
    function cloudSearch_CallBack(data) {
    clearMap();
    var resultStr="";
    var resultArr = data.datas;
    var resultNum = resultArr.length;
    for (var i = 0; i < resultNum; i++) {
    resultStr += "<div class=\"item\">";
    resultStr += "<h3>" + (i+1) + "、" + resultArr[i]._name + "</h3>";
    resultStr += "<p>地址:" + resultArr[i]._address + "</p>";
    resultStr += "<p>电话:<a href=\"tel:" + resultArr[i].telephone + "\">" + resultArr[i].telephone + "</a></p>";
    resultStr += "<p>地图:<a href='http://mo.amap.com/?q=" + resultArr[i]._location.getLat() + "," + resultArr[i]._location.getLng() + "&name=" + resultArr[i]._name + "'>到这里去</a></p>";
    resultStr += "</div>";
    addmarker(i, resultArr[i]); //添加大标注
    }
    if (document.getElementById('map').style.display !== 'none') {
    mapObj.setFitView();
    }
    document.getElementById("list").innerHTML = resultStr;
    }
    //回调函数-失败
    function errorInfo(data) {
    resultStr = data.info;
    document.getElementById("list").innerHTML = resultStr;
    }
    //清空地图
    function clearMap(){
    mapObj.clearMap();
    document.getElementById("list").innerHTML = '正在读取数据……';
    }
    </script>
    </html>

     

    demo网址(请用手机浏览器查看):http://zhaoziang.com/amap/cainiao.html

     

    效果图:

     

    六、其他云图教程

    【支付宝中的全国家乐福地图】http://www.cnblogs.com/milkmap/p/3786144.html

    【微信中的全国AMF海水农场地图】http://www.cnblogs.com/milkmap/p/3780417.html

    【官网中的全国AMF海水农场地图】http://www.cnblogs.com/milkmap/p/3778398.html

    【应用中webview形式的全国KTV地图】http://www.cnblogs.com/milkmap/p/3765925.html

     

    【三甲医院】http://www.cnblogs.com/milkmap/p/3637899.html

    【东莞地图】http://www.cnblogs.com/milkmap/p/3657829.html

    【贪官落马图】http://www.cnblogs.com/milkmap/p/3678377.html

     

    七、从零开始学高德JS API系列教程

    【地图展现】http://www.cnblogs.com/milkmap/p/3687855.html

    【控件】http://www.cnblogs.com/milkmap/p/3707711.html

    【覆盖物】http://www.cnblogs.com/milkmap/p/3727842.html

    【搜索服务】http://www.cnblogs.com/milkmap/p/3745701.html

    【路线规划】http://www.cnblogs.com/milkmap/p/3755257.html

    【坐标转换】http://www.cnblogs.com/milkmap/p/3768379.html

     

    本文链接:【云图】如何制作附近实体店的地图?-微信微博支付宝,转载请注明。

    展开全文
  • 定位-搜索-周边检索-路径规划-导航.html——浏览器定位,搜索地点定位,定位点周边搜索,自定义信息窗体,步行路径规划 标记bjdemo.html——标记点,显示坐标 鼠标绘制点线面.html——地图上绘制多边形,右键编辑...
  • 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

    展开全文
  • 代码如下,高德地图搜索后默认会放大至搜索点,但我现在想在获取到的坐标位置添加遮罩所以必须要缩放地图,但设置map.setZoom(10)无效 这是怎么回事? ``` AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete']...
  • 创建 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指向会有问题。

    展开全文
  • var city = $('#city')[0 ... <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js">   转载于:https://www.cnblogs.com/lgh344902118/p/8676703.html
  • 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,...
  • 先看效果,我做的是这样的,可以按地图位置来返回当前你点的位置(图一,二),也可以根据输入框的自动搜索(图三,四) HTML的代码: <div> <input type="text" id="keyword" name="keyword" ...
  • 高德地图自定义搜索

    2019-09-15 08:45:02
    最近在开发E都市地图功能,其中用到 了[高德地图]关键字查询 脚本依赖如下: <script src="lib/jquery.js"></script> <script src="http://webapi.amap.com/maps?v=1.4.0&...
  • PS:请把js引入部分的key值换成你申请下来的密钥,要不然不能用(无法进行定位搜索) 申请地址:http://lbs.amap.com/ <!DOCTYPE HTML> <html> <head> <meta ...
  • 今天小编为您推荐的,则是高德地图打开以后的附近搜索功能了。当我们进入首页点击“附近”功能后,可以看到您所在的区域附近提供的相关信息,其中包含了美食、酒店、景点、休闲甚至是加油站、银行、洗车等等功能。...
  • 上几章我们研究了百度地图SDK的用法,虽然不难但是配置起来也是相当的繁琐,现在高德LBS开放平台推出了基于HTML5的地图组件,我们可以通过WebView直接用URL 以GET方式进行请求就可以实现位置标注,路线规划,周边搜索的...
  • 高德室内地图 JavaScript API,是由 JavaScript 语言编写的应用程序接口,它能够帮助您在网站或移动端中构建功能丰富、交互性强的室内地图应用程序。除了基本地图功能的接口外,室内地图JavaScript API还提供了诸如...
  • vue 调用高德地图API发布时间:2018-08-06 16:56,浏览次数:2799, 标签:vueAPI(说明:之前第三条忘记说明了,现在补上第三条,道歉!)一、功能:定位;精准定位;拖拽选点;编辑遮罩物;工具条二、实现过程:1、...
  • 高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口,移动端、PC端一体化设计,一套 API 兼容众多系统平台。目前 JS API 免费开放使用。 JS API 提供了2D、3D地图模式,满足绝大多数开发者对地图展示...
  • 高德地图web端js

    2017-05-05 15:30:47
    下面是一些高德地图使用例子,自定义展示,右击拖动,搜索,画圆,定位等功能,没有整理仅供参考 var infoWindow = new AMap.InfoWindow({ isCustom:true,//使用自定窗口0909; content: "" + ...
  • 首先需要在index.html中引入高德地图js链接,key需要换成你自己的key 最近有个需求是实现一个使用地图搜索定位的功能,在网上参考了下其他的文章,感觉不是很完善,自己整理了一下,可以实现点击定位,搜索列表...
  • 1.啰嗦几句去年写了一个功能简单的高德地图插件给flutter_deer使用,当时支持了Android与iOS两端。前一阵子有一个issue问是否会支持Flutter Web,当时我有点懵,毕竟js我都不熟。。。不过先记下这个需求,等着有时间...
  • 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公交导航,驾车导航,步行导航,道路查询(交叉口),行政区划等等。如果说覆盖物Marker是地图的骨骼,那么服务,就是地图的气血。有个各种各样的...
  • //是否强制限制在设置的城市内搜索 map: map, // 展现结果的地图实例 panel: "panel", // 结果列表将在此容器中进行展示。 autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围 }); /...
  • vue+高德地图实现地图搜索及点击定位

    千次阅读 热门讨论 2019-06-18 13:34:31
    首先需要在index.html中引入高德地图js链接,key需要换成你自己的key 最近有个需求是实现一个使用地图搜索定位的功能,在网上参考了下其他的文章,感觉不是很完善,自己整理了一下,可以实现点击定位,搜索列表...
  • 前提:在使用Hbuilder+高德JS,开发APP的时候,希望在使用高德地图的POI检索地址,并在地图上定位,当中使用了高德地图js文件, 参考高德官网提供 demo,发现js一直报错 【 AMapUI is not defined】,按照网上搜索...
  • 我通过高德api搜索道路信息发现没有权限,各种网上教程也都是几年前的了,也无法获取道路信息 然后我通过抓包发现了最新的获取道路信息的api https://www.amap.com/service/poiInfo?query_type=TQUERY&...

空空如也

空空如也

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

高德地图js搜索