|
|
@@ -1,96 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="zh-CN">
|
|
|
-<head>
|
|
|
- <meta charset="utf-8">
|
|
|
- <title>地图展示</title>
|
|
|
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
|
|
|
- <meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
|
- <style>
|
|
|
- body,
|
|
|
- html,
|
|
|
- #container {
|
|
|
- width: 800px;
|
|
|
- height: 600px;
|
|
|
- margin: 0;
|
|
|
- font-family: "微软雅黑";
|
|
|
- }
|
|
|
-
|
|
|
- </style>
|
|
|
- <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=E4Y9cdBjAvDM6DjGcOmBA4v2GcEXAWvG"></script>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
-
|
|
|
-<div id="container"></div>
|
|
|
-<div style="width: 400px">
|
|
|
- 经度值:<input type="text" id="longitude" readonly="readonly" size="20" value="118.34964" style="width:150px;" />
|
|
|
- 纬度值:<input type="text" id="latitude" readonly="readonly" size="20" value="35.088303" style="width:150px;" />
|
|
|
-</div>
|
|
|
-<div id="r-result" style="width: 400px">
|
|
|
- 请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /> 注：输入获取位置后需点击选着精确位置获取经纬度
|
|
|
-</div>
|
|
|
-<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
|
|
|
-</body>
|
|
|
-</html>
|
|
|
-<script>
|
|
|
- function G(id) {
|
|
|
- return document.getElementById(id);
|
|
|
- }
|
|
|
- var map = new BMapGL.Map('container'); // 创建Map实例
|
|
|
- map.centerAndZoom(new BMapGL.Point(118.34964, 35.088303), 14); // 初始化地图,设置中心点坐标和地图级别
|
|
|
- map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
|
|
- var marker = new BMapGL.Marker(new BMapGL.Point(118.34964, 35.088303));
|
|
|
- map.addOverlay(marker);
|
|
|
- map.addEventListener('click', function (e) {
|
|
|
- map.clearOverlays();
|
|
|
- G('longitude').value = e.latlng.lng.toFixed(6);
|
|
|
- G('latitude').value = e.latlng.lat.toFixed(6);
|
|
|
- var marker = new BMapGL.Marker(new BMapGL.Point(e.latlng.lng, e.latlng.lat));
|
|
|
- map.addOverlay(marker);
|
|
|
- });
|
|
|
-
|
|
|
- var ac = new BMapGL.Autocomplete( //建立一个自动完成的对象
|
|
|
- {"input" : "suggestId"
|
|
|
- ,"location" : map
|
|
|
- });
|
|
|
-
|
|
|
- ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
|
|
|
- var str = "";
|
|
|
- var _value = e.fromitem.value;
|
|
|
- var value = "";
|
|
|
- if (e.fromitem.index > -1) {
|
|
|
- value = _value.province + _value.city + _value.district + _value.street + _value.business;
|
|
|
- }
|
|
|
- str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
|
|
|
-
|
|
|
- value = "";
|
|
|
- if (e.toitem.index > -1) {
|
|
|
- _value = e.toitem.value;
|
|
|
- value = _value.province + _value.city + _value.district + _value.street + _value.business;
|
|
|
- }
|
|
|
- str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
|
|
|
- G("searchResultPanel").innerHTML = str;
|
|
|
- });
|
|
|
-
|
|
|
- var myValue;
|
|
|
- ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
|
|
|
- var _value = e.item.value;
|
|
|
- myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
|
|
|
- G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
|
|
|
-
|
|
|
- setPlace();
|
|
|
- });
|
|
|
-
|
|
|
- function setPlace(){
|
|
|
- map.clearOverlays(); //清除地图上所有覆盖物
|
|
|
- function myFun(){
|
|
|
- var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
|
|
|
- map.centerAndZoom(pp, 18);
|
|
|
- map.addOverlay(new BMapGL.Marker(pp)); //添加标注
|
|
|
- }
|
|
|
- var local = new BMapGL.LocalSearch(map, { //智能搜索
|
|
|
- onSearchComplete: myFun
|
|
|
- });
|
|
|
- local.search(myValue);
|
|
|
- }
|
|
|
-</script>
|
544782275@qq.com
