根据地址让高德地图显示多个点

最新推荐文章于 2023-09-11 15:48:07 发布
最新推荐文章于 2023-09-11 15:48:07 发布
阅读量4.1k 收藏 11
点赞数 2
分类专栏： other
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37933545/article/details/100783074
版权

需求：首次进入页面的时候，所有医院的地点标注并显示在地图上；
在这里插入图片描述
当搜索城市的时候，该城市所有医院的地址标注显示在地图上；
在这里插入图片描述
当搜索区、县的时候，该区、县所有医院的地址标注显示在地图上；
在这里插入图片描述
当点击医院的名字的时候，给该医院的地址标注。
在这里插入图片描述
解决：
1：高德地图申请 key （这个就不说了，百度一下）
2：高德地图文档，根据需求我需要的是 ：自适应显示多个点标记
在这里插入图片描述
修改html和jq代码：把自适应去掉
3：放到自己项目中 html代码如下
在这里插入图片描述
在这里插入图片描述
4：解决首次进入加载代码 js代码如下

<script>
    $(document).ready(function(){
        function init() {
            $.ajax({
                url:"{:url('index/allhospital')}",
                type:"POST",
                dataType: 'text',
                dataType:"json",
                success: function(data){
                    if(data!=undefined&&data!=null&&data!=""){
                        var map = new AMap.Map('container', {
                            resizeEnable: true,
                            center: [data[0][0], data[0][1]],
                            zoom: 13
                        });
                        map.clearMap();  // 清除地图覆盖物

                        var markers = [];
                        for(var i=0;i<data.length;i++){
                            markers.push({
                                icon:'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                                position:data[i]
                            })
                        }
                        // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
                        markers.forEach(function(marker) {
                            new AMap.Marker({
                                map: map,
                                icon: marker.icon,
                                position: [marker.position[0], marker.position[1]],
                                offset: new AMap.Pixel(-13, -30)
                            });
                        });
                        var newCenter = map.setFitView();
                        document.getElementById('centerCoord').innerHTML = '当前中心点坐标：' + newCenter.getCenter();
                        document.getElementById('tips').innerHTML = '通过setFitView，地图自适应显示到合适的范围内,点标记已全部显示在视野中！';
                    }
                }
            });
        }
        init();    // 调用
    });
</script>

其中主要用到的是如下代码：表示页面刷新就会自动执行：

<script>
    $(document).ready(function(){
        function init() {
        }
        init();    // 调用
    });
</script>

5：城市改动地图改动、区县改动城市改动、点击城市名地图改动。

<script>
    //城市改动
    $("#city").change(function(){
        city = $(this).children('option:selected').val();
        $("#county option").remove();
        $.ajax({
            url:"{:url('index/index')}",
            type:"POST",
            dataType: 'text',
            data:{
                city:city
            },
            dataType:"json",
            success: function(data){
                if(data!=undefined&&data!=null&&data!=""){
                    //添加下拉框县
                    countys = data.countys;
                    if(countys!=undefined&&countys!=null&&countys!=""){
                        var html="";
                        html+="<option value=''>请选择县</option>";
                        for(var i=0;i<countys.length;i++){
                            html+="<option value="+countys[i]["city_id"]+">"+countys[i]["city_name"]+"</option>";
                        }
                        $("#county").html(html);
                    }
                    //添加医院
                    hospitals = data.hospitals;
                    if(hospitals!=undefined&&hospitals!=null&&hospitals!=""){
                        $("#cont1 option").remove();
                        $("#cont2 option").remove();
                        $("#cont3 option").remove();
                        var html1="";
                        var html2="";
                        var html3="";
                        for(var i=0;i<hospitals.length;i++){
                            if(hospitals[i]['hospital_type']=='ContRAst1'){
                                html1+="<option value=\"" + hospitals[i]["id"] + "\">"+hospitals[i]["hospital_name"]+
                                    hospitals[i]["hospital_department"]+hospitals[i]["hospital_tel"]+"</option>";
                            }
                            if(hospitals[i]['hospital_type']=='ContRAst2'){
                                html2+="<option value=\"" + hospitals[i]["id"] + "\">"+hospitals[i]["hospital_name"]+
                                    hospitals[i]["hospital_department"]+hospitals[i]["hospital_tel"]+"</option>";
                            }
                            if(hospitals[i]['hospital_type']=='ContRAst3'){
                                html3+="<option value=\"" + hospitals[i]["id"] + "\">"+hospitals[i]["hospital_name"]+
                                    hospitals[i]["hospital_department"]+hospitals[i]["hospital_tel"]+"</option>";
                            }
                        }
                        $("#cont1").html(html1);
                        $("#cont2").html(html2);
                        $("#cont3").html(html3);
                    }
                    //地图改点
                    positions = data.positions;
                    if(positions!=undefined&&positions!=null&&positions!=""){
                        var map = new AMap.Map('container', {
                            resizeEnable: true,
                            center: [positions[0][0], positions[0][1]],
                            zoom: 13
                        });
                        map.clearMap();  // 清除地图覆盖物
                        var markers = [];
                        for(var i=0;i<positions.length;i++){
                            markers.push({
                                    icon:'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                                    position:positions[i]
                            })
                        }
                        // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
                        markers.forEach(function(marker) {
                            new AMap.Marker({
                                map: map,
                                icon: marker.icon,
                                position: [marker.position[0], marker.position[1]],
                                offset: new AMap.Pixel(-13, -30)
                            });
                        });
                        // 添加事件监听, 使地图自适应显示到合适的范围
                        var newCenter = map.setFitView();
                        document.getElementById('centerCoord').innerHTML = '当前中心点坐标：' + newCenter.getCenter();
                        document.getElementById('tips').innerHTML = '通过setFitView，地图自适应显示到合适的范围内,点标记已全部显示在视野中！';

                    }
                }else{
                    alert.msg(data.message);
                }
            }
        });
    })
    //区、县改动
    $("#county").change(function(){
        county = $(this).children('option:selected').val();
        $.ajax({
            url:"{:url('index/index')}",
            type:"POST",
            dataType: 'text',
            data:{
                county:county
            },
            dataType:"json",
            success: function(data){
                if(data!=undefined&&data!=null&&data!=""){
                    //添加医院
                    hospitals = data.hospitals;
                    if(hospitals!=undefined&&hospitals!=null&&hospitals!=""){
                        $("#cont1 option").remove();
                        $("#cont2 option").remove();
                        $("#cont3 option").remove();
                        var html1="";
                        var html2="";
                        var html3="";
                        for(var i=0;i<hospitals.length;i++){
                            if(hospitals[i]['hospital_type']=='ContRAst1'){
                                html1+="<option value=\"" + hospitals[i]["id"] + "\">"+hospitals[i]["hospital_name"]+hospitals[i]["hospital_department"]+hospitals[i]["hospital_tel"]+"</option>";
                            }
                            if(hospitals[i]['hospital_type']=='ContRAst2'){
                                html2+="<option value=\"" + hospitals[i]["id"] + "\">"+hospitals[i]["hospital_name"]+hospitals[i]["hospital_department"]+hospitals[i]["hospital_tel"]+"</option>";
                            }
                            if(hospitals[i]['hospital_type']=='ContRAst3'){
                                html3+="<option value=\"" + hospitals[i]["id"] + "\">"+hospitals[i]["hospital_name"]+hospitals[i]["hospital_department"]+hospitals[i]["hospital_tel"]+"</option>";
                            }
                        }
                        $("#cont1").html(html1);
                        $("#cont2").html(html2);
                        $("#cont3").html(html3);
                    }
                    //地图改点
                    positions = data.positions;
                    if(positions!=undefined&&positions!=null&&positions!=""){
                        var map = new AMap.Map('container', {
                            resizeEnable: true,
                            center: [positions[0][0], positions[0][1]],
                            zoom: 13
                        });
                        map.clearMap();  // 清除地图覆盖物

                        var markers = [];
                        for(var i=0;i<positions.length;i++){
                            markers.push({
                                icon:'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                                position:positions[i]
                            })
                        }
                        // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
                        markers.forEach(function(marker) {
                            new AMap.Marker({
                                map: map,
                                icon: marker.icon,
                                position: [marker.position[0], marker.position[1]],
                                offset: new AMap.Pixel(-13, -30)
                            });
                        });
                        // 添加事件监听, 使地图自适应显示到合适的范围
                        var newCenter = map.setFitView();
                        document.getElementById('centerCoord').innerHTML = '当前中心点坐标：' + newCenter.getCenter();
                        document.getElementById('tips').innerHTML = '通过setFitView，地图自适应显示到合适的范围内,点标记已全部显示在视野中！';
                    }
                }else{
                    alert.msg(data.message);
                }
            }
        });
    })
    //点击医院出现地址
    $("#cont1").change(function(){
        var city_id = $(this).children('option:selected').val();
        $.ajax({
            url:"{:url('index/findhospttal')}",
            type:"POST",
            dataType: 'text',
            data:{
                city_id:city_id
            },
            dataType:"json",
            success: function(data){
                if(data!=undefined&&data!=null&&data!=""){
                    //地图改点
                    if(data!=undefined&&data!=null&&data!=""){
                        var map = new AMap.Map('container', {
                            resizeEnable: true,
                            center: [data[0], data[1]],
                            zoom: 13
                        });
                        map.clearMap();  // 清除地图覆盖物
                        markers = [{
                            icon: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                            position: data
                        }]
                        // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
                        markers.forEach(function(marker) {
                            new AMap.Marker({
                                map: map,
                                icon: marker.icon,
                                position: [marker.position[0], marker.position[1]],
                                offset: new AMap.Pixel(-13, -30)
                            });
                        });
                        // 添加事件监听, 使地图自适应显示到合适的范围
                        var newCenter = map.setFitView();
                        document.getElementById('centerCoord').innerHTML = '当前中心点坐标：' + newCenter.getCenter();
                        document.getElementById('tips').innerHTML = '通过setFitView，地图自适应显示到合适的范围内,点标记已全部显示在视野中！';
                    }
                }else{
                    alert.msg(data.message);
                }
            }
        });
    })
     //点击医院出现地址
    $("#cont2").change(function(){
        var city_id = $(this).children('option:selected').val();
        $.ajax({
            url:"{:url('index/findhospttal')}",
            type:"POST",
            dataType: 'text',
            data:{
                city_id:city_id
            },
            dataType:"json",
            success: function(data){
                if(data!=undefined&&data!=null&&data!=""){
                    //地图改点
                    if(data!=undefined&&data!=null&&data!=""){
                        var map = new AMap.Map('container', {
                            resizeEnable: true,
                            center: [data[0], data[1]],
                            zoom: 13
                        });
                        map.clearMap();  // 清除地图覆盖物

                        markers = [{
                            icon: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                            position: data
                        }]
                        // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
                        markers.forEach(function(marker) {
                            new AMap.Marker({
                                map: map,
                                icon: marker.icon,
                                position: [marker.position[0], marker.position[1]],
                                offset: new AMap.Pixel(-13, -30)
                            });
                        });
                        var newCenter = map.setFitView();
                        document.getElementById('centerCoord').innerHTML = '当前中心点坐标：' + newCenter.getCenter();
                        document.getElementById('tips').innerHTML = '通过setFitView，地图自适应显示到合适的范围内,点标记已全部显示在视野中！';
                    }
                }else{
                    alert.msg(data.message);
                }
            }
        });
    })
     //点击医院出现地址
    $("#cont3").change(function(){
        var city_id = $(this).children('option:selected').val();
        console.log(city_id)
        $.ajax({
            url:"{:url('index/findhospttal')}",
            type:"POST",
            dataType: 'text',
            data:{
                city_id:city_id
            },
            dataType:"json",
            success: function(data){
                console.log(data)
                if(data!=undefined&&data!=null&&data!=""){
                    //地图改点
                    if(data!=undefined&&data!=null&&data!=""){
                        var map = new AMap.Map('container', {
                            resizeEnable: true,
                            center: [data[0], data[1]],
                            zoom: 13
                        });
                        map.clearMap();  // 清除地图覆盖物

                        markers = [{
                            icon: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                            position: data
                        }]

                        console.log(markers)
                        // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
                        markers.forEach(function(marker) {
                            new AMap.Marker({
                                map: map,
                                icon: marker.icon,
                                position: [marker.position[0], marker.position[1]],
                                offset: new AMap.Pixel(-13, -30)
                            });
                        });
                        // 添加事件监听, 使地图自适应显示到合适的范围
                        var newCenter = map.setFitView();
                        document.getElementById('centerCoord').innerHTML = '当前中心点坐标：' + newCenter.getCenter();
                        document.getElementById('tips').innerHTML = '通过setFitView，地图自适应显示到合适的范围内,点标记已全部显示在视野中！';
                    }
                }else{
                    alert.msg(data.message);
                }
            }
        });
    })
</script>

6：后台需要用到的是根据医院详细地址计算出医院经纬度

    /**
     * 根据地址计算经纬度
     * @param $address
     * @return array|bool
     */
    function addresstolatlag($address)
    {
        $address = trim($address);
        $url = 'http://restapi.amap.com/v3/geocode/geo?address=' . $address . '&key=我的高德地图的 key ';
        if ($result = file_get_contents($url)) {
            $result = json_decode($result, true);
            //判断是否成功
            if (!empty($result['count'])) {
                return explode(',', $result['geocodes']['0']['location']);
            } else {
                return false;
            }
        }
    }
红尘007
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用高德地图实现实时天气预报功能
总结前端开发中遇到的问题，分享前端知识
05-31 2033
需求：根据手机定位功能，使用高德地图实现定位当前城市的天气预报功能。
高德地图显示多个标注点 弹跳效果 title
11-02
使用高德地图显示多个标注点 有 弹跳效果 可自定义 title
php 高德地图创建标注,自适应显示多个点标记
weixin_39603327的博客
03-11 251
自适应显示多个点标记html, body, #container {height: 100%;width: 100%;}.amap-icon img{width: 25px;height: 34px;}地图自适应src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值">var map = new AMap.Map('container', {...
使用高德Web JS api 展示海量点数据和海量线数据
D_lunar的博客
04-15 1751
web端开发，移动开发涉及到数据展示与查询， 以前都是使用的Arcgis api for js ， 最近才尝试将点和线数据导入数据库， 使用高德web js api来展示数据。 超过1w的点数据和线数据，使用点标记和覆盖物群组的方法已然不可以解决问题。 目前测试数据是6w条点数据，6w条线数据， 可以使用海量点展示来展示点数据， 使用轨迹展示来展示线数据。 数据展示非常迅速，高德还...
高德地图实现根据多个坐标 获取多个标点
weixin_42707543的博客
06-13 3738
<div id="container"></div> <select style="display: none;" id="identity2"></select> <select style="display: none;" id="identity1"></select> <script src="https://...
高德API JS 地图获取多个坐标点的中心点
学习笔记
06-01 5831
我需要在地图上展示多个地点，并且展示的同时，地图缩放到合适的大小，要求刚好能显示全部点位，并且边缘留有一部分间隔。做成如图所示这样。
Android实现高德地图显示及定位
08-25
Android实现高德地图显示及定位是Android开发中非常重要的一个知识点，涉及到地图显示、定位、权限申请等多个方面。在本文中，我们将详细介绍Android实现高德地图显示及定位的步骤和知识点。 高德地图显示 高德...
YisingleMarkerView:可以在高德地图上显示多个infoWindow的库
05-11
可以在地图上显示多个InfoWindow框架 这个框架可以在地图上的marker上显示多个infoWindow(高德默认只能同时显示一个infoWindow) 效果图如下: 使用 !!!!! 请在使用前 将高德地图的sdk加到工程中 allprojects { ...
高德地图多个经纬度定位和标记
06-03
这个代码可以实现多个经纬度坐标点的定位和在高德地图上的显示
web端高德地图显示坐标点
04-11
总结起来，要在Web端实现“高德地图显示坐标点”并具备交互功能，需要掌握高德地图API的基本用法，包括地图初始化、标记的创建与管理、事件监听等。同时，结合jQuery可以优化用户交互体验，例如动态生成地标名称列表...
附近商家多门店地图导航 1.4.7,地图怎么添加门店导航,PHP
09-11
附件商家多门店地图前后端源码，要的速度下了，喜欢的可以加我好友
利用高德地图实现经销商或门店的分布地址定位显示
01-08
首先根据地址获得经纬度，然后利用高德地图的开放平台二次开发，使用海量点、标注图层实现定位显示，可点击定位点显示详细，也可在地图放大到一定级别后显示详细地址，需要去高德地图注册申请key
基于高德地图，标多个点，画多个区域
西夏伏地魔
09-22 1989
1. 渲染地图 var map = new AMap.Map("container", { resizeEnable: true, center: [109.780925,19.163534], //海南省 mapStyle:"amap://styles/whitesmoke", zoom: 9, //地图显示的缩放级别 zooms:[3,22] }); 2. 在地图上获取现有的网格区域 //街镇区域的颜色 .
百度地图多个兴趣点（经纬度、坐标点）需要同时显示在地图上，如何设置自动缩放等级
boyStray的博客
07-29 6900
如果有多个兴趣点（经纬度、坐标点）需要同时显示在地图上，如何设置缩放比例。如果缩放太细，那么一个屏幕放不下，如果缩放太粗，显示就太密集。需要在程序中根据点的分布来设置。 百度地图Android SDK v3.5.0从3.5版本开始，它的缩放级别从3-20，总共18个级别，如下： {"10m", "20m", "50m", "100m", "200m", "500m", "1km", "2km"
vue3 + 高德地图 实现多个标点和窗体，超详细，开箱即用
最新发布
css_javascrpit的博客
09-11 1941
在高德API的使用中，有很多比较实用的技术，今天就整理一下高德地图实现标点与点击标点展示弹出框的写法。开箱即用
通过后台数据在百度地图标记多个点
qq_38856773的博客
12-05 1477
最近有功能需求，需要在百度地图上将所有的网点进行显示。建立后台数据库将所有机构的名称及经纬度信息进行存储，通过Jquery后台交互得到数据，参照 [https://www.cnblogs.com/wanf/p/7448725.html](https://www.cnblogs.com/wanf/p/7448725.html) 中设置方案很好实现，其中遇到的问题就是如何解决 var markerArr = [{ title: “名称：武汉光谷”, point: “114.4204800000, 30.4.
vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件
热门推荐
Start2019
01-06 1万+
使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件，解决在信息窗口中添加事件不生效的问题
Kotlin 实现高德地图点聚合、平滑移动、轨迹等功能
小小子的博客
08-02 1956
本文demohttps://github.com/hfyqsy/Kotlin_Gd_Map 整个APP使用kotlin语言的方式实现高德地图，地图点选、点聚合、地图截图、地图文字标注、地图基本操作、地图Marker自定义，Marker自定义弹窗、地图轨迹管理、轨迹平滑处理、Marker平滑移动、多类型路径规划、定位、导航功能 效果图如下： 小车轨迹移动另一种实现点聚合方式利用了 googl...
Android 高德地图，N个经纬度点(线)，刚好显示地图中
这片海的博客
03-30 4726
自定义的Overlay,目的是使所有的点，和连线能刚好的显示在当前地图屏幕区域中 使其自动调整地图的图层层级 点的个数是不确定 如：假设共有100个Latlng,其中，50个点在郑州，20个点在北京，30个点在济南， 当前的地图层级应自动调整为刚好显示出这100个点的最小层级，且视角移动到所有点的相对中心经纬度角度 效果图如下 首先进行，自定义图层 MyPointOverlay 注释 P
高德地图多个marker标记点 移入显示label详细信息
05-20
你可以在高德地图的Marker对象中添加鼠标事件监听器，来实现鼠标移入显示label详细信息的功能。具体的实现步骤如下： 1. 创建Marker对象时，设置label属性为一个AMap.Text对象，用于显示详细信息。 ```javascript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值