1、腾讯地图DEMO
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 6 <title>门店管理</title> 7 <link rel="stylesheet" href="__CSS__/bootstrap.min.css"> 8 <script src="__JS__/jquery.min.js"></script> 9 <style type="text/css"> 10 *{ 11 margin:0px; 12 padding:0px; 13 } 14 body, button, input, select, textarea { 15 font: 12px/16px Verdana, Helvetica, Arial, sans-serif; 16 } 17 18 .div-container{ 19 left: 66%; 20 32%; 21 height: 68%; 22 position: absolute; 23 background-color: rgb(229, 227, 223); 24 overflow: hidden; 25 transform: translateZ(0px);" 26 } 27 #container { 28 min-350px; 29 min-height:350px; 30 } 31 .table_body th{ 32 font-weight: normal; 33 font-size: small; 34 } 35 .width_title{ 36 17.5%; 37 text-align: left; 38 } 39 .width_contnet{ 40 8%; 41 } 42 .width_item{ 43 66%; 44 } 45 46 .category_item{ 47 12%; 48 } 49 .form-control{ 50 20%; 51 } 52 .panel-body { 53 height: 75%; 54 } 55 </style> 56 </head> 57 <body onload="init()"> 58 <div class="row bg-info text-center"> 59 60 </div><br> 61 <div class="container-fluid" style="min-height: 900px;margin-left: 10px;margin-right: 10px;"> 62 <div class="panel-body"> 63 <input type="text" class="form-control" id="address" onblur="codeAddress()"> 64 <input type="text" class="form-control" name="longitude" placeholder="纬度" id="longitude"> 65 <input type="text" class="form-control" id="latitude" name="latitude" placeholder="经度"> 66 <div class="div-container" id="container"></div> 67 </div> 68 </div> 69 </body> 70 71 72 <script> 73 74 window.qq = window.qq || {}; 75 qq.maps = qq.maps || {}; 76 window.soso || (window.soso = qq); 77 soso.maps || (soso.maps = qq.maps); 78 (function () { 79 function getScript(src) { 80 var protocol = (window.location.protocol == "https:") ? "https://" : "http://"; 81 src = src && (src.indexOf("http://") === 0 || src.indexOf("https://") === 0) ? src : protocol + src; 82 document.write('<' + 'script src="' + src + '"' +' type="text/javascript"><' + '/script>'); 83 } 84 qq.maps.__load = function (apiLoad) { 85 delete qq.maps.__load; 86 apiLoad([["2.4.94","",0],["3gimg.qq.com/","lightmap/api_v2/2/4/94/mods/","3gimg.qq.com/lightmap/api_v2/2/4/94/theme/",true],[1,18,34.519469,104.461761,4],[1531469613137,"pr.map.qq.com/pingd","pr.map.qq.com/pingd"],["apis.map.qq.com/jsapi","apikey.map.qq.com/mkey/index.php/mkey/check","sv.map.qq.com/xf","sv.map.qq.com/boundinfo","sv.map.qq.com/rarp","apis.map.qq.com/api/proxy/search","apis.map.qq.com/api/proxy/routes/","confinfo.map.qq.com/confinfo","overseactrl.map.qq.com"],[[null,["rt0.map.gtimg.com/tile","rt1.map.gtimg.com/tile","rt2.map.gtimg.com/tile","rt3.map.gtimg.com/tile"],"png",[256,256],3,19,"114",true,false],[null,["m0.map.gtimg.com/hwap","m1.map.gtimg.com/hwap","m2.map.gtimg.com/hwap","m3.map.gtimg.com/hwap"],"png",[128,128],3,18,"110",false,false],[null,["p0.map.gtimg.com/sateTiles","p1.map.gtimg.com/sateTiles","p2.map.gtimg.com/sateTiles","p3.map.gtimg.com/sateTiles"],"jpg",[256,256],1,19,"101",false,false],[null,["rt0.map.gtimg.com/tile","rt1.map.gtimg.com/tile","rt2.map.gtimg.com/tile","rt3.map.gtimg.com/tile"],"png",[256,256],1,19,"",false,false],[null,["sv0.map.qq.com/hlrender/","sv1.map.qq.com/hlrender/","sv2.map.qq.com/hlrender/","sv3.map.qq.com/hlrender/"],"png",[256,256],1,19,"",false,false],[null,["rtt2.map.qq.com/rtt/","rtt2a.map.qq.com/rtt/","rtt2b.map.qq.com/rtt/","rtt2c.map.qq.com/rtt/"],"png",[256,256],1,19,"",false,false],null,[["rt0.map.gtimg.com/vector/","rt1.map.gtimg.com/vector/","rt2.map.gtimg.com/vector/","rt3.map.gtimg.com/vector/"],[256,256],3,18,"114",["rt0.map.gtimg.com/icons/","rt1.map.gtimg.com/icons/","rt2.map.gtimg.com/icons/","rt3.map.gtimg.com/icons/"]],null],["s.map.qq.com/TPano/v1.1.2/TPano.js","map.qq.com/",""]],loadScriptTime); 87 }; 88 var loadScriptTime = (new Date).getTime(); 89 getScript("3gimg.qq.com/lightmap/api_v2/2/4/94/main.js"); 90 })(); 91 92 var geocoder,map,marker = null; 93 function init(){ 94 var center = new qq.maps.LatLng(30.58203,114.02919); 95 map = new qq.maps.Map(document.getElementById('container'),{ 96 center: center, 97 zoom: 15 98 }); 99 //调用地址解析类 100 geocoder = new qq.maps.Geocoder({ 101 complete : function(result){ 102 map.setCenter(result.detail.location); 103 var marker = new qq.maps.Marker({ 104 map:map, 105 position: result.detail.location, 106 }); 107 var lat = result.detail.location.lat; 108 var lng = result.detail.location.lng; 109 document.getElementById('longitude').value=lng; 110 document.getElementById('latitude').value=lat; 111 qq.maps.event.addListener(map, 'click', function(event) { 112 var marker=new qq.maps.Marker({ 113 position:event.latLng, 114 map:map 115 }); 116 var lat = event.latLng.lat; 117 var lng = event.latLng.lng; 118 document.getElementById('longitude').value=lng; 119 document.getElementById('latitude').value=lat; 120 qq.maps.event.addListener(map, 'click', function(event) { 121 marker.setMap(null); 122 }); 123 }); 124 } 125 }); 126 } 127 function codeAddress() { 128 var address = document.getElementById("address").value; 129 document.getElementById('longitude').value=""; 130 document.getElementById('latitude').value=""; 131 //通过getLocation();方法获取位置信息值 132 geocoder.getLocation(address); 133 } 134 </script> 135 136 </html>
2、marker为添加标记，setCenter为根据经纬度定位
3、container类样式里可以改min-width、min-height、left、宽高及位置等
注：代码可以直接粘贴到txt文档，把扩展名改成html显示。