zoukankan      html  css  js  c++  java
  • 高德地图关于搜索后marker点击事件

     
    简介:功能说明:输入内容后高德地图会出现一些地点提示,提示后涉及两方面,一是你选择提示的地点进行搜索定位。二是点击软键盘上的搜索进行定位。定位后都会出现很多个定位点在地图上,这时候用户会选择图上的定位点。
    1.按照提示进行定位

    2.点击软键盘上的搜索进行定位,


    无论哪一种方式,地图上都会出现多个marker,但是用户会去选择想要的定位点。

     

    // 搜索查询 输入提示
    function searchPosition() {
    AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
    var markers = {};
    var autoOptions = {
    // city: "北京", //城市,默认全国
    input: "tipInput"//使用联想输入的input的id
    };
    autocomplete = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
    // city: '北京',
    map: map
    })
    AMap.event.addListener(autocomplete, "select", function (e) {
    //TODO 针对选中的poi实现自己的功能
    placeSearch.setCity(e.poi.adcode);
    placeSearch.search(e.poi.name);
    // 根据地址转化经纬度
    railCenter = [e.poi.location.lng, e.poi.location.lat];
    });
    AMap.event.addListener(autocomplete, "click", function (e) {
    //TODO 针对选中的poi实现自己的功能
    placeSearch.setCity(e.poi.adcode);
    placeSearch.search(e.poi.name);
    // 根据地址转化经纬度
    railCenter = [e.poi.location.lng, e.poi.location.lat];
    });
    var pointMark;
    // AMap.event.addListener(autocomplete,"keypress",function(e){
    $('#tipInput').on('keypress', function (e) {
    if (e.keyCode == '84' || e.keyCode == '13') {
    var text = $(this).val();
    // placeSearch.setCity(e.poi.adcode);
    placeSearch.search(text, function (status, result) {
    console.log(status, result)
    if (status == 'complete' && result.info == 'OK') {
    railCenter = [result.poiList.pois[0].location.lng, result.poiList.pois[0].location.lat];
    pointMark = result.poiList.pois;
    // for(var i=0;i<data.length;i++){
    // markers[i]= ([data[i].location.lng,data[i].location.lat]);
    // }
    // markers = result.poiList;
    }
    });
    $('.amap-sug-result').hide();
    // 根据地址转化经纬度
    // railCenter = [e.poi.location.lng,e.poi.location.lat];
    // alert(e.keyCode)
    }
    // alert(e)
    });
    AMap.event.addListener(placeSearch, 'markerClick', function (e) {
    railCenter = [e.data.location.lng, e.data.location.lat];
    })
    });
    }
    

      

  • 相关阅读:
    python-pycharm中使用anaconda部署python环境
    Spring Boot 整合 Redis 实现缓存操作
    Spring中的ThreadPoolTaskExecutor
    Redis-基本数据类型与内部存储结构
    Redis如何存储对象与集合示例详解
    redis存储对象
    java在注解中绑定方法参数的解决方案
    spring boot整合JMS(ActiveMQ实现)
    springboot集成activemq
    NodeJS、NPM安装配置步骤(windows版本)
  • 原文地址:https://www.cnblogs.com/DebbieBlog/p/9104177.html
Copyright © 2011-2022 走看看