質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.23%

  • PHP

    15731questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    11831questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    6478questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

61行目のjavascriptの変数を117行目のPHPの部分に渡したいです。

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 73

44shito

score 2

前提・実現したいこと

背景画像(ゴールデンブリッジなど外国で有名な所の画像しか出来ません)から場所を特定して、その場所の名前から検索エンジンで詳細を調べたい。

画像から場所を特定できる機能と検索エンジンをつなげて
画像検索すると

詳細

今はコメントにしてますが、61行目に画像を選択すると場所を表示するようにallet分で表示するのがあります。

発生している問題・エラーメッセージ

画像で場所を特定する機能と検索エンジンが別々になっている。

検索エンジンはソースコードの下のほうにあるPHPで行っています。

ソースコード

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>imagemap</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script>
$(function() {
$("#fileField").change(function() {
readFile(this);
});
$('#fileForm').on('submit', upload);
});

function readFile(input) {
if (input.files && input.files[0]) {
var file = input.files[0];
var reader = new FileReader();
reader.onload = function(event) {
$('#test_image').attr('src', event.target.result);
}
reader.readAsDataURL(file);
}
}

function upload(event) {
event.preventDefault();
var file = $("#fileField")[0].files[0];
var reader = new FileReader();
reader.onloadend = uploadToCloudVision;
reader.readAsDataURL(file);
}

function uploadToCloudVision(event) {
var content = event.target.result;
var data = {
requests: [{
image: {
content: content.replace('data:image/jpeg;base64,', '')
},
features: [{
type: "LANDMARK_DETECTION"
}]
}]
};

$('#results').text('Loading');
$.post({
url: 'https://vision.googleapis.com/v1/images:annotate?key=AIzaSyCM1Ut6GsAGt24tH4xYTRzGGz8gortWfLY',
data: JSON.stringify(data),
contentType: 'application/json'
}).fail(function(jqXHR, textStatus, errorThrown) {
$('#results').text('ERRORS: ' + textStatus + ' ' + errorThrown);
}).done(display);
}

function display(data) {
//     alert( data.responses[0].landmarkAnnotations[0].description );
if (jQuery.isEmptyObject(data.responses[0])) {
$('#results').text("Location Not Found.");
} else {
initMap(Object.values(data.responses[0].landmarkAnnotations[0].locations[0].latLng));
var contents = JSON.stringify(data, null, 4);
$('#results').text(contents);
}
}

function initMap(latLng) {
var latLng = { lat: latLng[0], lng: latLng[1] };
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: latLng
});
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
</script>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyCM1Ut6GsAGt24tH4xYTRzGGz8gortWfLY" type="text/javascript"></script>
<script src="http://wikipedia.simpleapi.net/api" type="text/html"></script>

</head>

<body>
<h1 class="entrytitle">imagemap</h1>
<h3>imagemapとは、画像から場所を特定して、詳細を表示するwebサイトです。</h3>
<h2>使用手順</h2>
<ol>
<li>『ファイルを選択』を押して、場所を探したい自分の画像を選択します。</li>
<li>『検索』を押します。</li>
<li>GoogleMap上にその場所を表示します</li>
</ol>
<div style="display: flex;">
<img id="test_image" style="height:500px;width: 50%;margin: 3px;">
<div id="map" style="height:500px;width: 50%;"></div>
</div>
<form id="fileForm" action="#">
<input type="file" id="fileField">
<br>
<input type="submit" value="検索">
<form action="php/sample.php">
</form>
</form>
<form method="GET" action="">
<input type="text" name="keyword" size="40" value="" />
<input type="submit" value="検索" />
</form>

<br>

<?php
if (isset($_GET['keyword'])) {
$keyword = urlencode($_GET['keyword']);
$url = "http://wikipedia.simpleapi.net/api?keyword=".$keyword."&output=xml";
$xml = simplexml_load_file($url);
if ($xml) {
echo $xml->result->body;
}
else {
echo "simplexml_load_fileでエラー";
}
<script>
function display(data)
function initMap(latLng)
</script>
}
?>  

</body>

</html>

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • Tomak

    2017/12/20 20:07

    「発生している問題・エラーメッセージ」画像で場所を特定する機能と検索エンジンが別々になっている。←これは不具合なのでしょうか? どのような不具合なのか明確にしてほしいです。例えば、「○○のPHPコードを実行すると△△というエラーメッセージが表示されるが、修正方法がわからない」などのようにしてほしいです。

    キャンセル

  • kei344

    2017/12/20 20:51

    質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.23%

関連した質問

同じタグがついた質問を見る

  • PHP

    15731questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    11831questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    6478questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。