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

需求：首次进入页面的时候，所有医院的地点标注并显示在地图上；

当搜索城市的时候，该城市所有医院的地址标注显示在地图上；

当搜索区、县的时候，该区、县所有医院的地址标注显示在地图上；

当点击医院的名字的时候，给该医院的地址标注。

解决：
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;}}}

根据地址让高德地图显示多个点相关推荐

【android高德地图显示】
android 高德地图显示及注意事项开发环境高德地图开发准备注意事项: 1.关于调试版SHA1 2.关于定位开发环境 android studio版本信息如下: SDK版本如下: 高德地图开 ...
BUG集合-高德地图显示空白
高德地图显示空白,可能是导入的高德sdk有问题,需要重新找有效能用的sdk包导入,或者是申请的appkey无效,需重新申请应用,申请key
根据地址获得高德地图点标记
如何根据地址获取该地址在高德地图上的点标记呢,跟我一起来看看吧. 一.在高德地图开发者平台申请一个key.点击http://lbs.amap.com进入高德开发平台.注册登录就不用说了.登入后在我的应 ...
android 逆地址,Android高德获取逆地址编码(经纬度坐标-地址描述如省市区街道)
Android高德获取逆地址编码(经纬度坐标-地址描述如省市区街道) 可以在非地图视图下直接获取,只要传入当前位置的经纬度当然也可以在地图模式下获取详细信息在非第三方地图集成下(系统自带功能)获取 ...
java后端根据经纬度获取地址（高德地图）
1.申请高德地图key 2.逆地理编码(坐标->地址)-地理X: https://lbs.amap.com/demo/jsapi-v2/example/geocoder/regeocoding ...
iOS开发：高德地图显示、定位、反地理编码
iOS 高德地图 1.前期准备: 申请Key: 成为开发者 2.开发环境配置: (1).手动配置 (2).cocoa Pods集成:开发环境配置 3.代码实现: 主要功能有: (1).地图的显示: ...
vue高德地图显示世界地点信息分布的多窗口问题
效果图 <template><div class="home"><div class="map" id="contain ...
深圳ncov肺炎疫情分布点高德地图显示
一.简介如题,通过深圳市政府数据开放平台查询到的疫情分布点地址数据,批量请求高德API,将查询到坐标显示到网页地图上,先上效果(挺愕然的,本主自己的住处附近就有好几个点),如下: 二.实现工具: ( ...
H5App Web端定位当前位置，获取GPS和地址信息 (高德API)
仅支持高级浏览器首先注册高德地图开发者账号,建立应用,获取key 页面中引入: <script type="text/javascript" src="http: ...

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

根据地址让高德地图显示多个点相关推荐

最新文章

热门文章