|
| xqd
@@ -9,41 +9,95 @@
|
|
|
<script type="text/javascript" src="/js/plugins/jquery-2.1.1.min.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
-<div id="container" style="width: 100%;height: 500px;"></div>
|
|
|
-<div id="btn-area" style="display: none">
|
|
|
- <button onClick="geolocation.getLocation(showPosition, console.log(1), options)" style="display: none" id="sss">获取精确定位信息</button>
|
|
|
+<div style="display: inline-block;vertical-align: top;width: 45%">
|
|
|
+ <div class="form-group row map">
|
|
|
+ <div class="offset-2 col-9">
|
|
|
+ <div class="input-group" style="margin-top: 20px;">
|
|
|
+ <input class="form-control region" type="text" placeholder="城市">
|
|
|
+ <span class="input-group-addon ">和</span>
|
|
|
+ <input class="form-control keyword" type="text" placeholder="关键字">
|
|
|
+ <a class="input-group-addon search" href="javascript:">搜索</a>
|
|
|
+ </div>
|
|
|
+ <div class="text-info">搜索时城市和关键字必填</div>
|
|
|
+ <div class="text-info">点击地图上的蓝色点，获取经纬度</div>
|
|
|
+ <div class="text-danger map-error mb-3" style="display: none">错误信息</div>
|
|
|
+ <div id="container" style="min-width:600px;min-height:600px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-<script type="text/JavaScript">
|
|
|
- var geolocation = new qq.maps.Geolocation("YGZBZ-QSKCU-7LGVI-2WWXU-E5YEJ-2WFBA", "myapp");
|
|
|
- var options = {timeout: 8000};
|
|
|
-</script>
|
|
|
+
|
|
|
</body>
|
|
|
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YGZBZ-QSKCU-7LGVI-2WWXU-E5YEJ-2WFBA" ></script>
|
|
|
-<script type="text/javascript">
|
|
|
+<script>
|
|
|
+var searchService, map, markers = [];
|
|
|
+// window.onload = function(){
|
|
|
+//直接加载地图
|
|
|
+//初始化地图函数 自定义函数名init
|
|
|
+function init() {
|
|
|
+//定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
|
|
|
+var map = new qq.maps.Map(document.getElementById("container"), {
|
|
|
+center: new qq.maps.LatLng(39.916527, 116.397128), // 地图的中心地理坐标。
|
|
|
+zoom: 15 // 地图的中心地理坐标。
|
|
|
+});
|
|
|
+var latlngBounds = new qq.maps.LatLngBounds();
|
|
|
+//调用Poi检索类
|
|
|
+searchService = new qq.maps.SearchService({
|
|
|
+complete: function (results) {
|
|
|
+var pois = results.detail.pois;
|
|
|
+$('.map-error').hide();
|
|
|
+if (!pois) {
|
|
|
+$('.map-error').show().html('关键字搜索不到，请重新输入');
|
|
|
+return;
|
|
|
+}
|
|
|
+for (var i = 0, l = pois.length; i < l; i++) {
|
|
|
+(function (n) {
|
|
|
+var poi = pois[n];
|
|
|
+latlngBounds.extend(poi.latLng);
|
|
|
+var marker = new qq.maps.Marker({
|
|
|
+map: map,
|
|
|
+position: poi.latLng,
|
|
|
+});
|
|
|
|
|
|
+marker.setTitle(n + 1);
|
|
|
|
|
|
- function showPosition(position) {
|
|
|
- window.lat = position.lat;
|
|
|
- window.lng = position.lng;
|
|
|
- var myLatlng = new qq.maps.LatLng(lat, lng);
|
|
|
- var myOptions = {
|
|
|
- zoom: 8,
|
|
|
- center: myLatlng,
|
|
|
- mapTypeId: qq.maps.MapTypeId.ROADMAP
|
|
|
- }
|
|
|
- var map = new qq.maps.Map(document.getElementById("container"), myOptions);
|
|
|
- };
|
|
|
- function init() {
|
|
|
- $('#sss').click();
|
|
|
- }
|
|
|
+markers.push(marker);
|
|
|
+//添加监听事件
|
|
|
+qq.maps.event.addListener(marker, 'click', function (e) {
|
|
|
+var address = poi.address;
|
|
|
+$("input[name='address']").val(address);
|
|
|
+$("input[name='longitude']").val(e.latLng.lng);
|
|
|
+$("input[name='latitude']").val(e.latLng.lat);
|
|
|
+});
|
|
|
+})(i);
|
|
|
+}
|
|
|
+map.fitBounds(latlngBounds);
|
|
|
+}
|
|
|
+});
|
|
|
+}
|
|
|
+//清除地图上的marker
|
|
|
+function clearOverlays(overlays) {
|
|
|
+var overlay;
|
|
|
+while (overlay = overlays.pop()) {
|
|
|
+overlay.setMap(null);
|
|
|
+}
|
|
|
+}
|
|
|
+function searchKeyword() {
|
|
|
+var keyword = $(".keyword").val();
|
|
|
+var region = $(".region").val();
|
|
|
+clearOverlays(markers);
|
|
|
+searchService.setLocation(region);
|
|
|
+searchService.search(keyword);
|
|
|
+}
|
|
|
|
|
|
- function loadScript() {
|
|
|
- var script = document.createElement("script");
|
|
|
- script.type = "text/javascript";
|
|
|
- script.src = "https://map.qq.com/api/js?v=2.exp&callback=init";
|
|
|
- document.body.appendChild(script);
|
|
|
- }
|
|
|
+//调用初始化函数地图
|
|
|
+init();
|
|
|
|
|
|
- window.onload = loadScript;
|
|
|
+
|
|
|
+// }
|
|
|
+</script>
|
|
|
+<script>
|
|
|
+$(document).on('click', '.search', function () {
|
|
|
+ searchKeyword();
|
|
|
+})
|
|
|
</script>
|
|
|
</html>
|
