跳轉百度地圖鏈接:http://api.map.baidu.com/marker?location=緯度,經度&title=定位目標&content=百度奎科大廈&output=html
先上效果圖:
其他的html代碼我就不碼了只把關鍵地圖和js的代碼放上來了:
<tr> <td style="width:75px;text-align: right;padding-top: 13px;">是否地圖定位:</td> <td > <div class="col-sm-9"> <label style="float:left;padding-left: 8px;padding-top:7px;"> <input name="form-field-radio2" type="radio" class="ace" id="form-field-radio3" onclick="sethidden('no');"/> <span class="lbl"> 顯示</span> </label> <label style="float:left;padding-left: 5px;padding-top:7px;"> <input name="form-field-radio2" type="radio" class="ace" id="form-field-radio4" onclick="sethidden('yes');"/> <span class="lbl"> 隱藏</span> </label> <span class="lbl" style="margin-left:5px;color:red;font-size:10px;">地圖定位顯示后下方的跳轉鏈接是給新聞內容地圖定位添加的超鏈接!!!</span> </label> </div> </td> </tr> <tr class="map" style="display:none;"> <td style="width:75px;text-align: right;padding-top: 13px;">地圖:</td> <td> <div style="width:100%;height:340px;border:1px solid gray" id="container"></div> <script> var is_empty =0 lng = 116.404; lat = 39.915; var map = new BMap.Map("container");//在指定的容器內創建地圖實例 map.setDefaultCursor("crosshair");//設置地圖默認的鼠標指針樣式 map.enableScrollWheelZoom();//啟用滾輪放大縮小,默認禁用。 var point =new BMap.Point(lng,lat) map.centerAndZoom(point, 15); map.addControl(new BMap.NavigationControl()); var marker = new BMap.Marker(point); // 創建標注 this.map.addOverlay(marker); map.addEventListener("click", function(e){//地圖單擊事件 var geocoder = new BMap.Geocoder(); var point = new BMap.Point(e.point.lng,e.point.lat); geocoder.getLocation(point,function(geocoderResult,LocationOptions){ map.clearOverlays() map.addControl(new BMap.NavigationControl()); var marker = new BMap.Marker(point); // 創建標注 this.map.addOverlay(marker); //定位成功 var address = geocoderResult.address; document.getElementById("where").value =address layer.msg('定位成功'); // $('#suggestId').val(geocoderResult.address); }); console.log(e.point); document.getElementById("LONGITUDE").value = e.point.lng; document.getElementById("LATITUDE").value = e.point.lat; document.getElementById("src").value="http://api.map.baidu.com/marker?location="+e.point.lat+e.point.lng+"&title="+city_name+"&content=百度奎科大廈&output=html"; }); function iploac(result){//根據IP設置地圖中心 var cityName = result.name; map.setCenter(cityName); } if(is_empty ==0){ // var myCity = new BMap.LocalCity(); // myCity.get(iploac); dingwei() } function dingwei() { var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ var mk = new BMap.Marker(r.point); map.addOverlay(mk); map.panTo(r.point); console.log(r); document.getElementById("LONGITUDE").value = r.point.lng; document.getElementById("LATITUDE").value = r.point.lat; document.getElementById("src").value="http://api.map.baidu.com/marker?location="+r.point.lat+r.point.lng+"&title="+city_name+"&content=百度奎科大廈&output=html"; var city_name =r.address.province + r.address.city; document.getElementById("where").value = city_name } else { console.log('獲取失敗'); } }); } function sear(result){//地圖搜索 if(result.length ==0){ dingwei(); return false } var local = new BMap.LocalSearch(map, { renderOptions:{map: map} }); local.search(result); } </script> </td> </tr> <tr class="map" style="display:none;"> <td style="width:75px;text-align: right;padding-top: 13px;">經度:</td> <td > <input name="LONGITUDE" value=""id="LONGITUDE" class="case_text" type="text"> </td> </tr> <tr class="map" style="display:none;"> <td style="width:75px;text-align: right;padding-top: 13px;">緯度:</td> <td > <input name="LATITUDE" value=""id="LATITUDE" class="case_text" type="text"> </td> </tr> <tr class="map" style="display:none;"> <td style="width:75px;text-align: right;padding-top: 13px;">地址:</td> <td > <input name="where" value="" id="where" class="case_text" type="text"> </td> </tr> <tr class="map" style="display:none;"> <td style="width:75px;text-align: right;padding-top: 13px;">跳轉鏈接:</td> <td > <input name="src" value=""id="src" class="case_text" type="text"> </td> </tr> <tr> <td style="text-align: center;" colspan="10"> <a class="btn btn-mini btn-primary" onclick="save();">保存</a> <a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a> </td> </tr>
然后把定位后的跳轉鏈接加到你想要的位置上就可以實現點擊某個鏈接跳轉到百度地圖定位成功!