google 定位 标记 地址解码 逆解码
DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link id="page_favicon" href="favicon.ico" rel="icon" type="image/x-icon" />
<title>地图title>
<?php include_once MvcReg::$_moduleName . '/views/layout/head.php'; ?>
head>
<body class="bg_hs" style="padding-bottom: 0px">
<div class="head">
<div class="content">
<h3>地图h3>
div>
div>
<div class="content">
<div class="top_search">
<a href="?md=index/search/search&search=me">依名称搜索a>
<a href="?md=index/search/regionSearch&search=region">依地图搜索a>
div>
<div class="search" style="display:none;">
<form action="#" onsubmit="return false;" method="get" >
<div class="box">
<span>机器：span>
<select id="machine" >
<option value="">请选择option>
<option value="1">AAAoption>
<option value="2">BBBoption>
select>
div>
<div class="box box2">
<input id="query" name="query" class="text" type="search" placeholder="输入关键字"/>
<input id="queryBtn" class="bnt" type="button" />
div>
form>
div>
div>
<div class="pop_bg" id="pop_wjmm">
<div class="pop_bg_com">
<div class="com" id="com">div>
<div class="bnt" id="bnt">
div>
div>
div>
<div class="content map_bg" >
<div id="map_pop" class="map_pop">div>
<div id="map_canvas" style="width:400px;height:650px">div>
div>
<?php include_once MvcReg::$_moduleName . '/views/layout/foot.php'; ?>
<script src="https://maps.googleapis.com/maps/api/js?key=key">script>
<script>
var map;
var markers = [];
var real_markers = [];
var build_data = [];
var real_data = [];
var infowindow = new google.maps.InfoWindow();
var real_infowindow = new google.maps.InfoWindow();
var has_query = true;
var moveing=false;
var is_move=true;
var $me='<?php echo $me;?>';
var $hpID='<?php echo $hpid;?>';
var $machine='<?php echo $machine;?>';
var $region='<?php echo $region;?>';
var $county='<?php echo $county;?>';
var $county_id='<?php echo $county_id;?>';
// 初始化
function initMap(lat,lng) {
// var lat = 25.041990;
// var lng = 121.517215;
// console.log(build_data)
if (build_data.length > 0) {
lat = build_data[0].latitude;
lng = build_data[0].longitude;
console.log(5566);
console.log(lat);
console.log(lng);
// let lat = 24.9954304
// let lng = 121.4578688
if($me && $hpID){
map = new google.maps.Map(document.getElementById('map_canvas'), {
maxZoom: 16,
minZoom: 14,
zoom: 8, //縮放比
Center: {lat: parseFloat(lat), lng: parseFloat(lng)},
mapTypeId: 'terrain'
});
}
// Adds a marker at the center of the map.
addMarker(build_data); //地點
}
}
// Adds a marker to the map and push to the array.
function addMarker(data) {
for (var i = 0; i < data.length; i++) {
console.log(data[i]);
if (parseFloat(data[i].latitude) > 0 && parseFloat(data[i].longitude) > 0) {
var location = {lat: parseFloat(data[i].latitude), lng: parseFloat(data[i].longitude)}; // 坐标对象
var iconUrl;
var content = '';
var qubie = data[i].qubie;
var address = "";
content = data[i].place + "
";
// 创建坐标点
var marker = new google.maps.Marker({
position: location,
map: map,
title: data[i].title,
// icon: iconUrl
});
makeInfoWindowEvent(map, infowindow, content, marker, i, "build", address);
markers[i] = marker;
}
}
}
function makeInfoWindowEvent(map, infowindow, contentString, marker, num, type, address) {
google.maps.event.addListener(marker, 'click', function () {
showPopup(num)
});
}
function showPopup(num){
var obj= build_data[num];
var html=''+obj.place+'×\n' +
' \n' +
' \t\n
' +
' · 选择设备 '+obj.machine+'\n' ;
if (obj.other) {
html +=
' · 其他 ' + obj.other + '\n';
}
html+=
' · 服务时间 '+obj.service+'\n';
if (obj.business) {
html +=
' · 备注 ' + obj.business + '\n'
}
html+=
' \n' +
' lastest update於
'+obj.updatedt+'，电话确认。\n' +
' \n' +
' ';
$("#map_pop").html(html);
$(".map_pop").addClass("hov");
$(".map_gb").click(function(){
$(".map_pop").removeClass("hov");
});
}
function telephone(tel){
$("#pop_wjmm").show();
$('#com').html('确定'+tel+'？');
var a = ''+tel+'">确定'
a += '取消';
$('#bnt').html(a);
$(".zgzg_bnt_qx").click(function(){
$("#pop_wjmm").hide();
})
}
function query(t,lat,lng) {
markers = [];
var machine=$("#machine").val();
var query=$("#query").val();
$(".map_pop").removeClass("hov");
let data = '';
if(t == 'location'){
data = { lat: lat,lng: lng,};
// data = { lat:24.9954304, lng:121.4578688};
}else if(t == 'me'){
data = { me: $me,hpid: $hpID};
}else if(t == 'region'){
data = {county_id: lng,machine:$machine};
}else{
data = { machine: machine,query: query,};
}
$.ajax({
url: "?md=index&cl=map&at=search",
type: "post",
data: data,
async: true,
dataType: "json",
success: function (r) {
if (r.status==1){
popup(r.msg)
}else {
build_data = r.data;
initMap(lat,lng);
}
}
});
}
function addPlace(id) {
$.ajax({
url: "?md=index&cl=map&at=addplace",//路径
type: "post",//提交方式
data: {
id: id,
},//请求参数
async: true,//
dataType: "json",
success: function (r) {
if (r.status==2){
window.location.href='?md=index&cl=land&at=land&redirect='+encodeURIComponent('?md=index&cl=map&at=map&hov=2');
}else {
popup(r.msg)
}
}
});
}
$( document ).ready(function() {
var boyd_h = $(window).height();
$("#map_canvas").height(boyd_h-105);
map = new google.maps.Map(document.getElementById('map_canvas'), {
maxZoom: 16,
minZoom: 14,
zoom: 16, //縮放比
mapTypeId: 'terrain'
});
// 条件判断 是否自动定位 / 条件定位
if($me && $hpID){
console.log($me)
console.log($hpID)
query('me',$hpID,'');
return false;
}
else if($region == 'region' && $county){
let address = $county;
geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: address }, (results, status) => {
if (status === "OK") {
map.setCenter(results[0].geometry.location);
new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
});
query('region',results[0].geometry.location,$county_id);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
return false;
}
// // // // // // // 定位当前 // // // // // // //
geocoder = new google.maps.Geocoder();
infoWindow = new google.maps.InfoWindow();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
codeLatLng(pos.lat,pos.lng)
},
() => {
handleLocationError(true, infoWindow, map.getCenter());
}
);
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(
browserHasGeolocation
? "Error: The Geolocation service failed."
: "Error: Your browser doesn't support geolocation."
);
infoWindow.open(map);
}
function codeLatLng(lat,lng) {
var infowindow = new google.maps.InfoWindow();
var latlng = new google.maps.LatLng(lat, lng);
// var latlng = new google.maps.LatLng(24.9954304, 121.4578688);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) { // 定位当前位置
map.setZoom(16);
marker = new google.maps.Marker({
position: latlng,
map: map,
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
});
map.setCenter(latlng); // 设置中心位置
infowindow.setContent(results[1].formatted_address); // 设置内容
infowindow.open(map, marker); // 创建视图窗口
query('location',lat,lng); // 自定义方法筛选数据
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
});
// 定位城市中心点
function geocodeAddress() {
// location包含经过地理编码的纬度，经度值。请注意，我们将此位置作为LatLng对象而不是格式化字符串返回。
let address = '六安市';
geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: address }, (results, status) => {
if (status === "OK") {
map.setCenter(results[0].geometry.location);
new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
// geocodeAddress();
script>
body>
html>
<?php include_once MvcReg::$_moduleName . '/views/layout/head.php'; ?>
<?php include_once MvcReg::$_moduleName . '/views/layout/foot.php'; ?>